我正在尝试为即将开展的项目设计一个导航栏，我非常喜欢我采用的横向下拉方法，而不是我经常使用的垂直下拉菜单。它看起来不错，但似乎只有一个问题。当你将鼠标悬停在“新闻”按钮（下面的JSFiddle）上时，第三个选项只是将自己移动到下一行，我不能为我的生活找出导致这种情况发生的原因。 CSS中某处是否存在错误，或者我是否以错误的方式使用某些标签？谢谢，这是代码示例：
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
html {
color:#ededed;
background-color:#4d4c4c;
}
#wrap {
width:1000px;
margin:auto;
}
#div {
width:1000px;
height:100%;
background-color:#252525;
border-radius:5px;
box-shadow:0px 0px 8px black;
border:2px groove #353535;
margin:auto;
clear:both;
}
#header {
height:150px;
width:300px;
background-color:red;
margin-bottom:5px;
}
nav {
margin-left: auto;
margin-right:auto;
text-align: left;
background-color:#222222;
margin-bottom:10px;
width:1000px;
height:50px;
border:1px inset #131313;
border-radius:5px;
box-shadow:2px 2px 8px black;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul li ul li:hover {
}
nav ul {
list-style: none;
position: relative;
display: inline-block;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
height:50px;
line-height:400%;
text-shadow:
-1px -1px 0 #090909,
1px -1px 0 #090909,
-1px 1px 0 #090909,
1px 1px 0 #090909,
2px 2px 3px black;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
nav ul li {
float: left;
height:50px;
padding-left:10px;
padding-right:10px;
}
nav ul li a {
display: block;
padding: 25px 40px;
color: #757575;
text-decoration: none;
}
nav ul ul {
border-radius: 4px;
padding: 0;
position: absolute;
top: 100%;
height:30px;
margin-top:-10px;
margin-left:-6px;
line-height:210%;
background-color:#252525;
border:1px solid black;
box-shadow:2px 2px 8px black;
}
nav ul ul li {
float: left;
color:white;
position: relative;
text-align:center;
height:30px;
padding-left:5px;
padding-right:5px;
border-radius:4px;
}
nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
nav ul ul li a:hover {
background: #848788;
}
nav ul ul ul {
position: absolute; top:0; margin-top:30px; margin-left:-5px; line-height:210%; background-color:#252525; border:1px solid black; box-shadow:2px 2px 8px black;8
}
nav ul li:hover {
cursor:pointer;
color:#2967ed;
background-color:#333333;
border-radius:3px;
text-shadow:2px 2px 5px black;
}
nav ul ul ul li {
color:white;
}
nav li:last-child:after {
content: none;
}
.space {
border-left:1px inset #333333; border-right:1px inset #333333; width:1px; height:100%; padding-left:0; padding-right:0
}
#left {
float:left;
width:69%;
height:99%;
background-color:white;
margin:5px;
}
#right {
float:left;
width:29%;
height:99%;
margin:5px;
}
<nav>
<ul>
<li>Home<img src="images/arrow.png" style="padding-left:5px">
<ul>
<li>Choice One<img src="images/arrow.png" style="padding-left:5px">
<ul>
<li>TEST</li>
</ul>
</li>
<li class="space"></li>
<li>Choice Two<img src="images/arrow.png" style="padding-left:5px">
<ul>
<li>Third</li>
</ul>
</li>
<li class="space"></li>
<li>Choice Three</li>
</ul>
</li>
<li class="space"></li>
<li>News<img src="images/arrow.png" style="padding-left:5px">
<ul>
<li>News Page One</li>
<li class="space"></li>
<li>Second News</li>
<li class="space"></li>
<li>A Third News</li>
</ul>
</li>
<li class="space"></li>
<li>Forums</li>
<li class="space"></li>
<li>About</li>
<li class="space"></li>
<li>Contact</li>
<li class="space"></li>
</ul>
</nav>
答案 0 :(得分：1)
只需从父display:inline-block移除ul。
这会将子ul元素的宽度限制为父元素的宽度。因此，当孩子的宽度超过父母的宽度时;它会突破到新的界限。
nav ul {
display:inline-block; /* Simply remove this.. easy. */
}
答案 1 :(得分：0)
你的问题是你的第一个ul ...包含顶部所有链接的那个被设置为宽度为300px
当你显示下拉列表时，他们需要不大于它们，否则它们会破坏并给你带来不良影响。
在你的例子中，因为第三个项目太长了，它强制包含的ul大于300px。
我刚刚将父级ul更改为更大（500 px），但你可以看到为什么这个模型会给你一些问题。
ul{width:500px;}