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

Posted 2023-04-13

【中文标题】下拉菜单项将其他元素向右移动

【英文标题】：Dropdown menu item moves other elements to the right

【发布时间】：2014-11-02 17:49:21

【问题描述】：

我一直在尝试从头开始创建这个基本菜单，但我遇到了一个小问题：例如，每当我将鼠标悬停在“类别”菜单（这是一个下拉元素）时，右侧的元素就会自动移动更远。

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/

我想这样当用户将鼠标悬停在“类别”项目上时，它会在其下创建下拉菜单，但保持其尺寸不变。我该怎么做？

【问题讨论】：

你不能减小下拉菜单的宽度吗？？

我不会那样做，它看起来很丑。这是我希望它的外观：http://codepen.io/andornagy/full/xhiJH（悬停 Wordpress 按钮）

当使此类导航变得重要时，您至少要操纵最具体的元素，即锚标签，为每个导航菜单添加一个虚拟锚链接并将所有填充传递给它们

【参考方案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 元素，并根据需要添加一些行高和高度值。

对于二级导航，在ul 上将位置更改为absolute 并调整 关闭任何空白的上边距。

查看演示：http://jsfiddle.net/audetwebdesign/adw5hp84/

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

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

【讨论】：

像魅力一样工作。非常感谢！

不错的一个...也看看我的答案，几乎给出了相同的结果，但方式不同...

【参考方案2】：

去掉#navbar > ul > li.navbar_multiple:hover > ul > li中的width：

#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/

【讨论】：

现在好多了，但现在我如何编辑下拉列表，让所有项目都在同一点结束？

如果我希望子菜单项的宽度高于主按钮怎么办？

再次更新了我的答案......不要害怕只是玩它，你会到达你想去的地方;）

这个解决方案的工作方式很有趣。通过将width: 100px 添加到li.navbar_multiple，您已将父容器的宽度设置为小于子元素（二级菜单）的宽度。这会导致溢出情况，但由于溢出是可见的，因此会出现二级菜单。这种方法也很有效。您将需要一些非常微妙的设计要求，以支持这种方法而不是使用绝对定位的方法。在大多数情况下，任何一种方法都可以解决问题。

【参考方案3】：

你可以试试吗？

如果内容将添加到娱乐日常节目等下拉列表中，这也将有效

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

【讨论】：

bt 为我工作。也可以试试这个。 #navbar > ul > li > ul > li min-height:20px;高度：自动；

【参考方案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