我正在尝试为即将到来的项目设计一个导航栏，我非常喜欢我采用的水平下拉方法，而不是我通常使用的垂直下拉方法。它看起来不错，但似乎只有一个问题。如您所见，当我将鼠标悬停在“新闻”按钮（下方的 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>