我的第一个ul的宽度等于margin-right = 50px的单词的宽度,我的底部ul宽度= 200px。问题是如果顶部ul宽度是180px并且我悬停在它上面,顶部ul匹配底部200px,这增加右侧并推动列表。
nav {
width: 100%;
height: 50px;
background-color: #d60d8c;
}
.navbar-tab {
margin: auto;
width: 1300px;
}
ul {
margin: 0px;
padding: 0px;
list-style: none;
font-family: arial;
}
.navbar-tab-1 {
padding-right: 50px;
}
ul li {
list-style: none;
height: 50px;
display: inline-block;
font-family: 'Raleway', sans-serif;
font-size: 19px;
font-weight: 400;
line-height: 50px;
float: left;
}
ul li a {
text-decoration: none;
color: black;
display: block;
}
ul li ul li {
display: none;
}
ul li:hover ul li {
display: block;
}
.hover-list li {
font-size: 15px;
background-color: #e2e2e2;
width: 200px;
text-indent: 20px;
}

<nav id="navbar">
<ul class="navbar-tab">
<li class="navbar-tab-1">Home</li>
<li class="navbar-tab-1">Diamond Search
<ul class="hover-list">
<a>
<li>GIA Diamond Search</li>
</a>
<a>
<li>Diamonds</li>
</a>
</ul>
</li>
<li class="navbar-tab-1">Wedding Bands</li>
<li class="navbar-tab-1">Engagement Rings</li>
<li class="navbar-tab-1">Selection Guide</li>
<li class="navbar-tab-1">Jewellery Services</li>
</ul>
</nav>
&#13;
答案 0 :(得分:3)
您可以为包含子菜单的ul元素提供绝对位置,以防止它影响父级的宽度:
.hover-list {
position: absolute;
}
nav {
width: 100%;
height: 50px;
background-color: #d60d8c;
}
.navbar-tab {
margin: auto;
width: 1300px;
}
ul {
margin: 0px;
padding: 0px;
list-style: none;
font-family: arial;
}
.navbar-tab-1 {
padding-right: 50px;
}
ul li {
list-style: none;
height: 50px;
display: inline-block;
font-family: 'Raleway', sans-serif;
font-size: 19px;
font-weight: 400;
line-height: 50px;
float: left;
}
ul li a {
text-decoration: none;
color: black;
display: block;
}
ul li ul li {
display: none;
}
ul li:hover ul li {
display: block;
}
.hover-list li {
font-size: 15px;
background-color: #e2e2e2;
width: 200px;
text-indent: 20px;
}
.hover-list {
position: absolute;
}
<nav id="navbar">
<ul class="navbar-tab">
<li class="navbar-tab-1">Home</li>
<li class="navbar-tab-1">Diamond Search
<ul class="hover-list">
<a>
<li>GIA Diamond Search</li>
</a>
<a>
<li>Diamonds</li>
</a>
</ul>
</li>
<li class="navbar-tab-1">Wedding Bands</li>
<li class="navbar-tab-1">Engagement Rings</li>
<li class="navbar-tab-1">Selection Guide</li>
<li class="navbar-tab-1">Jewellery Services</li>
</ul>
</nav>
另外,我建议在ul li
,ul li a
或ul li ul li
等标记选择器上使用类选择器。与类选择器相比,标签选择器不仅具有稍差的性能,而且它们也适用于更多元素 - 有时当您不打算使用它们时 - 就像您有另一个ul
一样页面中列出了一些不相关项目的元素。