将静态宽度垂直子菜单置于动态水平菜单下方

我已经在这个问题上呆了好几个小时了。我可以找到我想要的各个组成部分，但我似乎无法将它们组合在一起。

我遇到的问题是我无法让静态宽度子菜单以它们派生的 li 项目为中心。如果这些父 li 项目具有静态宽度，这应该很容易，但我想根据页面的宽度动态更改它们的宽度。我不知道这在视觉上是否令人愉悦，但这是我想做的事情并且不想使其静态。我会将宽度设置为 100%，但当页面变得非常宽时，它们往往看起来很愚蠢（这就是我选择它们为静态的原因）

我确信我还应该对 css 结构进行其他更改以使其变得更好，所以如果您有任何提示，请告诉我！

这就是我所拥有的。

JSFiddle：http://jsfiddle.net/ede2gsc6/ http://jsfiddle.net/ede2gsc6/

html：

<ul id="top-menu">
    <li>ITEM1</li>
    <li>ITEM2
        <ul>
            <li>SUBITEM1</li>
            <li>SUBITEM2</li>
        </ul>
    </li>
    <li>ITEM3
        <ul >
            <li>SUBITEM1</li>
            <li>SUBITEM2</li>
            <li>SUBITEM3</li>
        </ul>
    </li>
    <li>ITEM4</li>
    <li>ITEM5
        <ul>
            <li>SUBITEM1</li>
            <li>SUBITEM2</li>
            <li>SUBITEM3</li>
            <li>SUBITEM4</li>
            <li>SUBITEM5</li>
        </ul>
    </li>
</ul>

和CSS：

body, ul {
    margin: 0;
    padding: 0;
}


#top-menu{
    float: left;
    width:100%;
    background-color: rgba(0,240,255,.5);
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    text-align: center; 
    padding: 0px;   
    margin: 0px;
    min-width: 620px;
    list-style: none;   
}
        #top-menu li {
            float: left;
            position: relative;
            width: 20%;
            list-style: none;
        }
        #top-menu a:hover {
            color: #00F0FF;
        }
            #top-menu li ul {
                padding-top: 1px;       
                position: absolute;
                background: rgba(0,240,255,.5);
                border-bottom: 1px solid black;
                border-left: 1px solid black;
                border-right: 1px solid black;
                visibility: hidden;
                width: 170px;
            }
            #top-menu li:hover ul {
                visibility: visible;
                display: block;
            }   
                #top-menu li ul li {
                    float: left;
                    padding: 0px;
                    width: 100%;
                    text-align: left;
                }

如果您计划使其更加动态，您也可以使用类而不是 id。

这是一个包含您所需要的类的示例。http://jsfiddle.net/54n1r96e/1/ http://jsfiddle.net/54n1r96e/1/

<ul class="nav">
<li>ITEM1</li>
<li>ITEM2
    <ul class="dropdown">
        <li>SUBITEM1</li>
        <li>SUBITEM2</li>
    </ul>
</li>
<li>ITEM3
    <ul class="dropdown">
        <li>SUBITEM1</li>
        <li>SUBITEM2</li>
    </ul>
</li>
<li>ITEM4</li>
<li>ITEM5
    <ul class="dropdown">
        <li>SUBITEM1</li>
        <li>SUBITEM2</li>
    </ul>
</li>