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

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;
}