html - 使用 html css 的子菜单对齐

Question

首先，我只是网络开发的初学者。我正在尝试一个带有水平主菜单和垂直子菜单的网站。

当我将鼠标悬停在主菜单中的列表项上时，子菜单会下拉并取代主菜单的其他元素。另一个问题是子菜单与主菜单列表项不对齐。

这是代码: http://jsfiddle.net/mCvct/1/

一段时间以来一直在尝试这样做，并且一直在寻找一些解决方案。但到目前为止无法解决此问题。

代码:

<div id="menu">
    <ul>
        <li> <a href="#">SERVICES</a>

            <div class="subnavi">
                <ul>
                    <li><a href="#">service1</a>
                    </li>
                    <li><a href="#">service2</a>
                    </li>
                    <li><a href="#">service3</a>
                    </li>
                </ul>
            </div>
            <!-- end of subnavi -->
        </li>
        <li> <a href="contact.php">CONTACT US</a>
        </li>
        <li> <a href="#">HOME</a>
        </li>
        <li> <a href="#">ABOUT US</a>
        </li>
    </ul>
</div>
<!-- end of menu -->

    ul {
        overflow:hidden;
        vertical-align:middle;
    }
    ul li {
        list-style:none;
    }
    ul li a {
        width:16.2%;
        /*164.6px;*/
        font-size:1em;
        line-height:1.8em;
        float:left;
        display:inline;
        text-align:center;
    }
    #menu ul li .subnavi {
        display:none;
        clear:both;
    }
    #menu ul li .subnavi ul {
        width:20em;
        background:#a0a0a0;
        list-style:none;
        margin:auto;
        line-height:2em;
        border:1px solid #a60000;
    }
    #menu ul li .subnavi ul li a {
        width:24em;
        line-height:1.8em;
        float:none;
        display:inline;
    }
    #menu ul li:hover .subnavi {
        display:block;
    }

Answer 1

您需要删除 .subnav 上的 clear:both 和 .subnav ul 上的 position: absolute/p>

#menu ul li .subnavi {
    display:none;
}
#menu ul li .subnavi ul {
    width:20em;
    background:#a0a0a0;
    list-style:none;
    margin:auto;
    line-height:2em;
    border:1px solid #a60000;
    position:absolute;
    top: 40px;
}

检查这个fiddle