Html 水平导航子菜单对齐CSS

我用CSS和Html代码创建的导航菜单工作不正常。 导航菜单的对齐方式并不完美，我希望这样： 我想把它转换成CSS

请帮忙

        <style>
    /* Targeting both first and second level menus */

#nav li {
    list-style:none;
    float: left;
    position: relative;
}
#nav li a {
    display: block;
    padding: 8px 12px;
    text-decoration: none;
}
#nav li a:hover {

    background-color:red;
    color:#FFF;
    opacity:1;
}

/* Targeting the first level menu */
#nav {  
    top:150px;
    min-width:850px;
    background:#fff;
    opacity:0.5;
    display: block;
    height: 34px;
    z-index: 100;
    position: absolute;
}
#nav > li > a {
}

/* Targeting the second level menu */
#nav li ul {
    color: #333;
    display: none;
    position: absolute; 
    width:850px;
}
#nav li ul li {
    display: inline;
}
#nav li ul li a {
    background: #fff;
    border: none;
    line-height: 34px;
    margin: 0;
    padding: 0 8px 0 10px;
}
#nav li ul li a:hover {
    background-color:red;
    color:#FFF;
    opacity:1;
}

/* Third level menu */
#nav li ul li ul{
    top: 0;
}
ul.child {
background-color:#FFF;  
}
/* A class of current will be added via jQuery */
#nav li.current > a {
    background: #f7f7f7;
    float:left;
}
/* CSS fallback */
#nav li:hover > ul.child {
    left:0;
    top:34px;
    display:inline;
    position:absolute;
    text-align:left;
}
#nav li:hover > ul.grandchild  {
    display:block;
}
    </style>
    <ul id="nav">
    <li><a href="#">Home</a></li>
    <li>
        <a href="#">Products</a>
        <ul class="child">
            <li><a href="#">Hard Drives</a></li>
            <li><a href="#">Monitors</a></li>
            <li><a href="#">Speakers</a>
                <ul class="child">
                    <li><a href="#">10 watt</a></li>
                    <li><a href="#">20 watt</a></li>
                    <li><a href="#">30 watt</a></li>
                </ul>
            </li>
            <li><a href="#">Random Equipment</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Services</a>
        <ul class="child">
            <li><a href="#">Repairs</a></li>
            <li><a href="#">Installations</a></li>
            <li><a href="#">Setups</a></li>
        </ul>
    </li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
</ul>

/*以一级和二级菜单为目标*/
#李海军{
列表样式：无；
浮动：左；
位置：相对位置；
}
#李娜{
显示：块；
填充：8px 12px；
文字装饰：无；
}
#导航李a：悬停{
背景色：红色；
颜色：#FFF；
不透明度：1；
}
/*瞄准一级菜单*/
#导航{
顶部：150px；
最小宽度：850px；
背景：#fff；
不透明度：0.5；
显示：块；
高度：34px；
z指数：100；
位置：绝对位置；
}
#导航>李>a{
}
/*瞄准二级菜单*/
#纳夫利乌尔{
颜色：#333；
显示：无；
位置：绝对位置；
宽度：850px；
}
#李宇利{
显示：内联；
}
#纳夫利乌利阿{
背景：#fff；
边界：无；
线高：34px；
保证金：0；
填充：0 8px 0 10px；
}
#导航李：悬停{
背景色：红色；
颜色：#FFF；
不透明度：1；
}
/*三级菜单*/
#纳夫里乌尔里乌尔{
排名：0；
}
儿童{
背景色：#FFF；
}
/*将通过jQuery添加一个current类*/
#导航li.current>a{
背景：#f7f7f7；
浮动：左；
}
/*CSS回退*/
#导航李：悬停>ul.child{
左：0；
顶部：34px；
显示：内联；
位置：绝对位置；
文本对齐：左对齐；
}
#导航李：悬停>ul.孙子{
显示：块；
}

已修复。我想这就是你想要的

只需从

#nav li

中删除

位置：relative

，并将其交给

#nav