如何使下拉菜单宽度与选项卡大小相同？

Posted 2023-04-13

【中文标题】如何使下拉菜单宽度与选项卡大小相同？

【英文标题】：How do I make the dropdown menu width the same as the tab size?

【发布时间】：2015-04-27 18:31:10

【问题描述】：

我是新手 - 如果这是一个愚蠢的问题，我很抱歉。当我将鼠标悬停在下拉菜单选项上时，会出现子菜单，但子菜单的背景宽度为 100%，就像主菜单一样。我怎样才能改变它，使子菜单的宽度只有它起源的标签？

另外，对于混乱的编码表示歉意。我在玩 jquery，所以那里有一些不必要的标签......

这是 CSS 代码：

    #menu 
    float:left;
   width:100%;
   background-color:#f23918;
   overflow:hidden;
   position:relative;  

#menu ul 
   clear:left;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   left:50%;
   text-align:center;

 ul li 
    display:block;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   right:50%;

 li ul 
    display: none;

 ul li a 
    display: block;
    text-decoration: none;
    font-weight: bold;
    color: #ffffff;
    white-space: nowrap;
    background-color: #f23918;
    text-align: center;
    padding: 10px;
    text-transform: uppercase;

ul li a:hover 
background: #f29c18;

li:hover ul 
    display: block;
    position: absolute; 

li:hover li    /*Controls dropdowns*/
    float: none;
    font-size: 11px;

 li:hover a  background: #f23918; 
 
 li:hover li a:hover 
 
    background: #f29c18;
 

这是 html 代码：

    <div id="menu">
     <ul id="navbar">

        <li class="active"><a href="#"><span>Home</span></a></li>
        <li class="has-sub"><a href="#"><span>Alpaca Wool Products</span></a>
            <ul class="submenu">
                <li><a href="#"><span>Fur Hats</span></a></li>
                <li><a href="#"><span>Capes</span></a></li>
                <li><a href="#"><span>Ponchos</span></a></li>
                <li><a href="#"><span>Shawls</span></a></li>
                <li class="last"><a href="#"><span>Scarves</span></a></li>
            </ul>
        </li>
        <li class="has-sub"><a href="#"><span>Home Décor</span></a>
            <ul class="submenu">
                <li><a href="#"><span>Rugs</span></a></li>
                <li><a href="#"><span>Tapestries</span></a></li>
                <li><a href="#"><span>Throws</span></a></li>
                <li><a href="#"><span>Upholstery</span></a></li>
                <li class="last"><a href="#"><span>Teddy Bears</span></a></li>
            </ul>
        </li>

        <li><a href="#"><span>About Us</span></a></li>
        <li class="last"><a href="#"><span>Artisans</span></a></li>

    </ul>
</div>

【参考方案1】：

好的。在这里锻炼。可能存在更好的解决方案。

首先你需要给 div#menu 一个固定的高度。我也不认为你需要在那里漂浮。移除溢出隐藏和相对位置。

 #menu 
    width:100%;
    background-color:#f23918;
    height: 38px;
 

然后为子菜单添加以下内容

li ul 
    display: none;
    min-width: 100%;
    white-space: nowrap;

最后一个解决方案实际上归功于https://***.com/a/13775531/2120162

在这里您可以找到它的外观。 https://jsfiddle.net/theprog/3h8wpx97/1/

更新：固定移动部件。谢谢@dowomenfart

li ul 
    display: none;
    min-width: 100%;
    white-space: nowrap;
    position:absolute !important;
    z-index: 100;

【讨论】：

我唯一要添加到您的代码中的是#menu ul li .submenu position: absolute; z-index: 100 为底部移动的链接。但是，干得好 +1

我没有注意到这一点。更新:-) 谢谢@dowomenfart

【参考方案2】：

我没有调整您的代码，而是根据您的需要重写了一个简化版本。

$(document).ready(function () 
    $("#navbar > li").mouseover(function () 
        if (!$(this).hasClass("active")) 
            $(this).addClass("active");
            $(this).mouseout(function () 
                $(this).removeClass("active");
            );
        
    );
);

#navbar 
    background: #f23918;
    padding: 0;
    margin: 0;
    font-size: 0; /*fix inline block gap*/

#navbar > li 
    font-size: 16px;
    list-style: none;
    position: relative;
    display: inline-block;
    padding: 0;
    margin: 0;

#navbar > li > a 
    text-transform: uppercase;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    padding: 10px;
    display: block;
    color: #fff;

#navbar > li > a:hover,
#navbar > li.active > a,
#navbar > li > ul 
    background: #f29c18;

#navbar > li > ul 
    display: none;
    white-space: nowrap;
    padding: 0 0 5px;
    margin: 0;
    position: absolute;
    left: 0;
    top: 36px;

#navbar > li > ul > li 
    display: block;
    margin: 10px 20px;
    padding: 0;

#navbar > li > ul > li > a 
    color: #fff;

#navbar > li:hover > ul 
    display: block;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="navbar">
    <li>
        <a href="#">Item A</a>
        <ul>
            <li><a href="#">Sub Item 1</a></li>
            <li><a href="#">Sub Item 2</a></li>
            <li><a href="#">Sub Item 3</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Item B</a>
        <ul>
            <li><a href="#">Sub Item 1</a></li>
            <li><a href="#">Sub Item 2</a></li>
            <li><a href="#">Sub Item 3</a></li>
        </ul>
    </li>
    <li class="active">
        <a href="#">Item C</a>
        <ul>
            <li><a href="#">Sub Item 1</a></li>
            <li><a href="#">Sub Item 2</a></li>
            <li><a href="#">Sub Item 3</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Item D NoSub</a>
    </li>
</ul>

【讨论】：

也试过了，感谢您提供如此优雅的解决方案