我想用HTML / CSS和一些JavaScript制作一个下拉菜单。我对li元素的宽度感到困惑。它必须具有内部内容的宽度,而不是静态宽度。
问题是,当我将鼠标悬停在li元素上(以显示下拉菜单)时,它正在更改其宽度。
CSS:
#nav{
background-color: #1da8d8;
width: 100%;
max-width: 960px;
margin: 0;
padding: 0;
float: left;
}
#nav li a i {
text-align: right;
}
#nav ul {
padding: 0;
margin:0;
list-style: none;
width:12em;
z-index:99;
position:relative;
overflow:visible;
}
#nav li {
background-color: #1b9cc9;
position: relative;
line-height: 39px;
height: 40px;
width: auto;
margin: 0 5px 0 0;
float:left;
display:block;
}
#nav ul li{
background-color:#1b9cc9;
top: 20px;
width: 12em;
float: left;
}
#nav a {
color: #ffffff;
text-decoration:none;
display:block;
padding: 0.1em;
margin: 0 0.2em 0 0;
height:1.05em;
width: auto;
}
#nav ul li:hover, #nav ul li a:hover{ background-color:#1da8d8;}
#nav ul{
display:none;
}
/*all see this */
#nav ul ul, #nav ul ul ul{
display:none;
position:absolute;
margin-left:12em;
}
/* non-IE browsers see this */
#nav ul li>ul, #nav ul ul li>ul{
margin-top:-1.8em;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul, #nav li:hover ul ul ul ul ul{
display:none;
}
#nav li:hover ul, #nav ul li:hover ul, #nav ul ul li:hover ul, #nav ul ul ul li:hover ul, #nav ul ul ul ul li:hover ul{
display:block;
}
li>ul {
top: auto;
left: auto;
}
现在,宽度会自动调整为孩子的整个宽度。将孩子的位置设置为绝对位置将忽略此情况。
改变postition:relative;
上#nav ul
,以position:absolute;
#nav ul {
padding: 0;
margin:0;
list-style: none;
width:12em;
min-width:100%;
z-index:99;
position:absolute;
overflow:visible;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句