html - 带有子导航问题的水平导航

Question

我正在创建一个带有单行下拉子导航的水平菜单。当我翻转我的主导航链接时，它会显示子导航，但会将其余内容推到右侧。我希望子菜单出现在主菜单的最左侧，并且不影响主菜单。谢谢！

小提琴

HTML

<ul id="nav">
<li><a href="#">LINK1</a></li>
<li><a href="#">LINK2</a>
    <ul>
    <li><a href="#">LINK3</a></li>
    <li><a href="#">LINK4</a></li>
    <li><a href="#">LINK5</a></li>
    <li><a href="#">LINK6</a></li>
    </ul></li>
<li><a href="#">LINK7</a></li>
<li><a href="#">LINK8</a></li>

CSS

#nav{
display:block;
list-style:none;
text-align: left;
}
#nav a{
width: 50px;
height: 15px;
text-decoration:none;
display:block;
font-size:12px;
font-family: Arial, Verdana, Helvetica, sans-serif;
text-align:center;
color:#666666;
border-left: 1px solid #999999; 
float:left; 
padding: 10px 5px 5px 5px;
}
#nav a:hover, #nav a:focus {
background: #999 ;
color:#333;
}
#nav li { 
height: 30px;
display:block;
position:relative;
float:left;
}
#nav li ul { 
height: 30px;
position: absolute;
left: -9999px;
}
#nav li:hover ul {
position: relative;
left: 0;
clear: both;
}
#nav li li a{
width: 50px;
text-decoration:none;
display:block;
font-size:9px;
font-family: Arial, Verdana, Helvetica, sans-serif;
text-align:center;
border-left: 1px solid #999999; 
color:#666666;
padding: 5px 0 5px 0;
z-index: 10000;
vertical-align: middle;
}

Answer 1

进行了一些更改并且它正在工作，主要是：

#nav li:hover ul {
    left: 0;
    top: 100%;
    white-space: nowrap;
    word-spacing: -1em;
    clear: both;
}
#nav li li {
    word-spacing: normal;
    display: inline-block;
    float: none;
}

jsFiddle 演示

Answer 2

你也可以使用它

小提琴：http: //jsfiddle.net/8GYbh/9/

#nav li { 
    height: 30px;
    display:inline;
}
#nav li:hover ul {
    position: absolute;
    left: 0;
    clear: both;
    top:45px;
}