How do I make the dropdown menu width the same as the tab size? - css

Question

I'm new to this - sorry if this is a silly problem. When I hover over the dropdown menu options, the submenu appears, but the background of the submenu has a width of 100%, like the main menu. How can I alter it so that the submenu has a width only of, say, the tab it originates from?
Also, apologies for messy coding. I was playing around with jquery so there are some unnecessary tags in there...
Here is the CSS code:
#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;
}
and Here is the HTML code:
<div id="menu">
<ul id="navbar">
<li class="active"><span>Home</span></li>
<li class="has-sub"><span>Alpaca Wool Products</span>
<ul class="submenu">
<li><span>Fur Hats</span></li>
<li><span>Capes</span></li>
<li><span>Ponchos</span></li>
<li><span>Shawls</span></li>
<li class="last"><span>Scarves</span></li>
</ul>
</li>
<li class="has-sub"><span>Home Décor</span>
<ul class="submenu">
<li><span>Rugs</span></li>
<li><span>Tapestries</span></li>
<li><span>Throws</span></li>
<li><span>Upholstery</span></li>
<li class="last"><span>Teddy Bears</span></li>
</ul>
</li>
<li><span>About Us</span></li>
<li class="last"><span>Artisans</span></li>
</ul>
</div>

Answer 1

Ok. Here a workout. There might better solution exists.
First you need to give a fixed height to div#menu. Also I dont think you need a float there. Remove overflow hidden and position relative.
#menu {
width:100%;
background-color:#f23918;
height: 38px;
}
Then for submenu add following
li ul {
display: none;
min-width: 100%;
white-space: nowrap;
}
Last solution actually credited to https://stackoverflow.com/a/13775531/2120162
Here you can find how it looks. https://jsfiddle.net/theprog/3h8wpx97/1/
Update: Fixed moving part. Thanks #dowomenfart
li ul {
display: none;
min-width: 100%;
white-space: nowrap;
position:absolute !important;
z-index: 100;
}

Answer 2

Rather than tweaking your code I rewrote a simplified version based on what you need.
$(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>
Item A
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
<li>
Item B
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
<li class="active">
Item C
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
<li>
Item D NoSub
</li>
</ul>