html - 在动态水平菜单下居中静态宽度垂直子菜单

Question

我已经在这里工作了几个小时。我可以找到我想要的各个组件，但我似乎无法将它们放在一起。

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

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

这是我的。

JSFiddle: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;
                }

Answer 1

如果你打算让它更动态一点，你也可以使用类而不是 id。

这是一个包含您需要的类的示例。 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>