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

Question

我是新手 - 如果这是一个愚蠢的问题，我很抱歉。当我将鼠标悬停在下拉菜单选项上时，会出现子菜单，但子菜单的背景宽度为 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>

Answer 1

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

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

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

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

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

最后一个解决方案实际上归功于https://stackoverflow.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;
}

Answer 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>