所有嵌套的 UL 都需要与其父 LI 的右侧对齐。目前，嵌套的 UL 似乎改为对齐到更高级别的 NAV 元素的右侧。
实时代码
链接 here to fiddle with HTML and problem CSS
HTML
<body>
<div id="header">
<div id="header-content-container"> <a href="/" title="Logo" id="logo">Logo!</a>
<div id="top-nav-container">
<nav>
<ul>
<li><a href="/">HOME</a>
</li>
<li><a href="#">SERVICES</a>
<ul>
<li><a href="#">Item 00000000</a>
</li>
<li><a href="#">Item 000000000000000</a>
</li>
<li><a href="#">Item 000000000000000</a>
</li>
<li><a href="#">Item 00000000000000</a>
</li>
<li><a href="#">Item 0000000000000</a>
</li>
<li><a href="#">Item 000000000000</a>
</li>
<li><a href="#">Item 000000000</a>
</li>
</ul>
</li>
<li><a herf="#">LIBRARY</a>
</li>
<li><a href="/contact/">CONTACT</a>
<ul>
<li><a href="#">Item 0</a>
</li>
<li><a href="#">Item 00</a>
</li>
<li><a href="#">Item 000</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="clearer"></div>
</body>
CSS
.clearer {
clear: both;
}
body {
background: none repeat scroll 0 0 red;
font-family:sans-serif;
font-size: 13px;
margin: 0;
padding: 0;
position: relative;
vertical-align: baseline;
}
div#header {
background-color: white;
float: left;
height: 76px;
margin: 0;
padding: 0;
width: 100%;
}
div#header-content-container {
height: 100%;
margin: 0;
width: 768px;
background: black;
}
a#logo {
background: blue;
float: left;
height: 50px;
margin: 12px 0 0 19px;
width: 260px;
}
#top-nav-container {
float: right;
margin: 10px 0 0;
position: relative;
z-index: 9000;
}
nav {
float: right;
margin: 0 9px 0 0;
}
nav ul {
display: inline-table;
list-style: outside none none;
padding: 0;
position: relative;
}
nav ul::after {
clear: both;
content:"";
display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: green;
}
nav ul li:hover > ul {
display: block;
}
nav ul li a {
color: #eee;
display: block;
padding: 16px 15px;
text-decoration: none;
}
nav ul li:hover a {
color: orange;
}
nav ul ul {
background: none repeat scroll 0 0 #343434;
border-radius: 0;
left: auto;
padding: 0;
position: absolute;
right: 0;
top: 100%;
display: none;
}
nav ul ul li {
float: none;
border-top: 1px solid purple;
border-bottom: 1px solid blue;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
color: yellow;
}
nav ul ul li a:hover {
background: cyan;
}
问题
最佳答案
检查更新的 fiddle .
我修改了nav ul ul类
nav ul ul { background: none repeat scroll 0 0 #343434;
border-radius: 0;
padding: 0;
position: absolute;
left: -48px;
top: 100%;
display: none;
}
关于html - CSS 下拉菜单，将嵌套的 UL 对齐到父 LI 的右边缘，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29723501/