Question

我一直试图从头开始创建这个基本菜单，但是我遇到了一个小问题：每当我将“＆＃39;类别＆＃39;例如菜单（这是一个下拉元素），右边的元素会自动移动得更远。

HTML：

<div id = "navbar">
    <ul>
        <li>News</li>
        <li>News</li>
        <li>News</li>
        <li>News</li>
        <li>Market</li>
        <li class = "navbar_multiple">&nbsp;&nbsp;Categories
            <ul>
                <li>Travel</li>
                <li>Entertainment</li>
                <li>Fun</li>
            </ul>
        </li>
        <li>Fun</li>

    </ul>
</div>

CSS：显然太长了 - 但包含在下面的jsFiddle中

这里是jsFiddle：http://jsfiddle.net/ktvde9qo/4/

我想这样做，以便当用户将鼠标悬停在＆＃39;类别＆＃39; item，它会在它下面创建下拉菜单，但保持其尺寸不变。我怎么能这样做？

Answer 1

我会使用以下CSS尝试以下方法：

#navbar > ul > li
{
float: left;
margin-left: 21px;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
text-transform: uppercase;
color: #fff;
border-top: 2px solid transparent;
padding-top: 8px;
    position: relative;
    line-height: 1.5;
    height: 24px;
}

#navbar > ul > li > ul {
list-style: none;
position: absolute; /* change this */
margin-left: 0px;
padding-left: 0px;
    margin-top: -5px; /* this can control the whitespace... */
}

将position: relative添加到主导航中的li元素，并根据需要添加一些行高和高度值。

对于辅助导航，将位置更改为absolute上的ul并进行调整关闭任何空格的上边距。

请参阅演示：http://jsfiddle.net/audetwebdesign/adw5hp84/

通过使用辅助菜单的绝对定位，您可以将它们从主菜单栏的流程中取出，并且您不必担心标签的长度会影响主导航布局。

请注意，在设置链接之间的间距等方面可能需要做更详细的工作。

Answer 2

摆脱width中的#navbar > ul > li.navbar_multiple:hover > ul > li：

#navbar > ul > li.navbar_multiple:hover > ul > li {
    display:block;
    height:20px;
    padding-left: 10px;
    margin-left: 0px;
}

更新了您的小提琴：http://jsfiddle.net/ktvde9qo/11/

编辑：要使所有子菜单项具有相同的宽度，只需删除（或注释掉）以下行，或者根据需要修改它们：

#navbar > ul > li > ul > li:first-child {
    margin-top: 8px;
    padding-top: 9px;
    width: 100%;
}

小提琴更新：http://jsfiddle.net/ktvde9qo/13/

编辑2 ：要使子菜单项长于主菜单项，只需向子菜单项添加较长的宽度，向主菜单项添加较短的宽度：

子菜单项：

#navbar > ul > li > ul > li {
    padding-left: 0px;
    display: none;
    text-transform: none;
    font-size: 12px;
    padding: 4px 4px 8px 6px;
    padding-top: 10px;
    border-top: 1px solid #39718e;
    background-color: #316885;
    width:200px; /* changed this */
}

主菜单项：

#navbar > ul > li.navbar_multiple {
    margin-left: 13px;
    width:100px; /* changed this */
}

最后的小提琴更新：http://jsfiddle.net/ktvde9qo/18/

Answer 3

你能试试吗？

如果内容会在“娱乐到娱乐日常活动”的下拉列表中添加，那么这将是有效的

#navbar > ul > li > ul{
 width:150px;
}

Answer 4

我认为你正在寻找类似的东西：

<强> CSS

#navbar {
height: 35px;
background-color: #4c9fcd;
position: relative;
top: 0px;
z-index: 1001;
}

#navbar > ul {
list-style: none;
text-align: left;
padding-left: 25px;
margin-top: 0px;
}

#navbar > ul > li
{
float: left;
margin-left: 21px;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
text-transform: uppercase;
color: #fff;
border-top: 2px solid transparent;
padding-top: 8px;
}

#navbar > ul > li:first-child {
margin-left: 0px;
}

#navbar > ul > li.navbar_multiple {
margin-left: 13px;
//padding-left: 5px;
}

#navbar > ul > li:hover {
border-top: 2px solid white;
cursor: pointer;
//background-color: #316885;
}

#navbar > ul > li > ul {
list-style: none;
position: relative;
margin-left: 0px;
padding-left: 0px;
}

#navbar > ul > li > ul > li {
padding-left: 0px;
display: none;
text-transform: none;
font-size: 12px;
padding: 4px 4px 8px 6px;
padding-top: 10px;
border-top: 1px solid #39718e;
background-color: #316885;
}

#navbar > ul > li > ul > li:first-child {
margin-top: 8px;
padding-top: 9px
}

#navbar > ul > li > ul > li:last-child {
border-bottom: 3px solid #4c9fcd;
}

#navbar > ul > li.navbar_multiple:hover > ul > li {
display: block;
height:20px;
padding-left: 10px;
margin-left: 0px;
}

#navbar > ul > li.navbar_multiple > ul > li:hover {
background-color: #0d3f5a;
}

#navbar > ul > li.navbar_multiple:hover {
background-color: #316885;
padding-right: 0px !important;
}

fiddle

下拉菜单项将其他元素移动到右侧

4 个答案: