title: How do I make the dropdown menu width the same as the tab size?
body: <p>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?</p>
  
  <p>Also, apologies for messy coding. I was playing around with jquery so there are some unnecessary tags in there...</p>
  
  <p>Here is the CSS code:</p>
  
  <pre><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;
  } 
  </code></pre>
  
  <p>and Here is the HTML code:</p>
  
  <pre><code>    &lt;div id="menu"&gt;
       &lt;ul id="navbar"&gt;
  
          &lt;li class="active"&gt;&lt;a href="#"&gt;&lt;span&gt;Home&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li class="has-sub"&gt;&lt;a href="#"&gt;&lt;span&gt;Alpaca Wool Products&lt;/span&gt;&lt;/a&gt;
              &lt;ul class="submenu"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Fur Hats&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Capes&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Ponchos&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Shawls&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="last"&gt;&lt;a href="#"&gt;&lt;span&gt;Scarves&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li class="has-sub"&gt;&lt;a href="#"&gt;&lt;span&gt;Home Décor&lt;/span&gt;&lt;/a&gt;
              &lt;ul class="submenu"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Rugs&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Tapestries&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Throws&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Upholstery&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="last"&gt;&lt;a href="#"&gt;&lt;span&gt;Teddy Bears&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
  
          &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;About Us&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li class="last"&gt;&lt;a href="#"&gt;&lt;span&gt;Artisans&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>