[英]HTML/CSS Dropdown menu <li> width
我想用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;
}
您也需要在此处明确设置宽度和最大宽度-在您的CSS中尝试此操作
#nav li {
background-color: #1b9cc9;
position: relative;
line-height: 39px;
height: 40px;
width: 12em;
max-width: 12em;
margin: 0 5px 0 0;
float:left;
display:block;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.