Question

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

我遇到的问题是我无法将静态宽度子菜单置于它们派生的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>

Answer 2

您可以使用

left: 50%;
margin-left: -85px;

在你#nav li ul上生成该中心定位。工作示例：http://jsfiddle.net/ede2gsc6/3/

Answer 3

我设法让它发挥作用。

我通过应用50％的保证金将ul项目向右移动了50％。所以ul从ITEM1，ITEM2等中途开始（如果你想知道它在哪里，取消对小提琴边框的注释）
之后，我将尺寸在其宽度的50％范围内的li物品移动到了剩下。这意味着李的中间现在位于左侧 UL认证。所以li项目居中
在子菜单的li项目上使用宽度：100％将为所有这些项目提供相同的宽度（最长菜单项的宽度）
其余部分都与李项目的样式有关，使它们显示为通常围绕它们的ul。

查看 JSFiddle 以查看结果并阅读代码中的注释。这是我添加/修改的代码：

            #top-menu li ul {
                padding-top: 1px;
                margin-left: 50%;
                position: absolute;
                background: rgba(0,240,255,.5);
                /*border-bottom: 1px solid black;
                border-left: 1px solid black;
                border-right: 1px solid black;*/ /*remove comment tags if you want to see where the actual ul is*/
                visibility: hidden;
                width: auto;/*set width to fit content*/
                background-color: transparent;
            }
            #top-menu li:hover ul {
                visibility: visible;
                display: block;
            }   
                #top-menu li ul li {
                    float: left;
                    padding: 5px 5px;
                    width: 100%;/*set width to the longest item in li so all li items have equal width*/
                    clear: both;
                    text-align: left;
                    border-right: 1px solid red;
                    border-left: 1px solid red;
                    margin-left: calc(-50% - 6px);/*unfortunately a calc function is needed here because adding padding/borders to the left moves the entire block to the right.*/
                    margin-top: -1px;/*solves issue of submenu disappearing when hovering over border*/
                    background-color: purple;
                }
#top-menu li ul li:last-child{
    border-bottom: 1px solid red;/*add border to the bottom of the last li-item*/

}

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

3 个答案: