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

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

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

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

Comments

[dowomenfart]

Only thing I would add to your code is #menu ul li .submenu{ position: absolute; z-index: 100} for the link at the bottom moving. But, nice job +1

[Shimul Chowdhury]

I didnt noticed that. Updated :-) Thanks @dowomenfart

[Izzyev]

Tried this too, thank you for such an elegant solution