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


Tags: css,drop-down-menu,menu,navigation,width

Problem :

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 :

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 http://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;
}

    CSS Howto..

    PHP imagecopyresampled + how to get the best results

    How to hide elements in mobile devices? CSS

    How do I change the alignment of my search box?

    How I can center a menu bar with ul

    How do you style TextFlow with CSS Styles in Flex 4.5.1?

    Show/Hide Markers that are pulled from function

    How to use css to crop parts of an image

    How to set width of a
    in CSS to X number of pixels less than the width:auto?

    How to add multiple css files to CKEditor editorarea

    How to write function in css

    How to make one list-item in menu higher than the others with CSS?

    How to set z-index for a shadow (CSS)

    How do I make this style an external CSS/SCSS file?

    How can I make the ul list the same size as the input element in terms of width?

    Rollover table shows hidden span class text with css

    Styling Tables - How to use column groups to modify TH tag located in that column

    Changing my web-font in css caused a my old font-size values defined in “em” to be inaccurate. How to fix it?

    How would I get my horizontal navigation bar to span the full width?

    How to size a content div to cover the entire content area in jQuery Mobile

    How to change CSS property with jQuery?

    CSS: How to create special shape

    How to give the background-image path in CSS?

    How can you have your websites resolution change according to the users screen resolution?

    How to use custom CSS with my Sharepoint WebPart?

    How to override CSS Background that already has !important?

    How to use #resource in CSS?

    how to set a specific pixel or character width limit for a text in css

    How to view browser's calculated CSS specificity?

    How To Center a Letterpress Effect?

    How to make a tetrahedron?