title: HTML/CSS Dropdown menu <li> width
body: <p>I want to make a dropdown menu with HTML/CSS and some javascript. I am stuck with the width of the li element. It has to have the width of the content inside instead of a static width.</p>
  
  <p>The problem is when I hover with my mouse over the li element (To show the dropdown menu) it is changing his width.</p>
  
  <p>I created a jsfiddle file that you can find <a href="http://jsfiddle.net/UtzJh/" rel="nofollow">here.</a></p>
  
  <p>CSS:</p>
  
  <pre><code>  #nav{
          background-color: #1da8d8;
          width: 100%;
          max-width: 960px;
          margin: 0;
          padding: 0;
          float: left;
      }
  
      #nav li a i {
          text-align: right;
      }
  
      #nav ul {
          padding: 0;
          margin:0;
          list-style: none;
          width:12em;
          z-index:99;
          position:relative;
          overflow:visible;
      }
  
      #nav li {
          background-color: #1b9cc9;
          position: relative;
          line-height: 39px;
          height: 40px;
          width: auto;
          margin: 0 5px 0 0;
          float:left;
          display:block;
      }
      #nav ul li{
          background-color:#1b9cc9;
          top: 20px;
          width: 12em;
          float: left;
      }
  
      #nav a {
          color: #ffffff;
          text-decoration:none;
          display:block;
          padding: 0.1em;
          margin: 0 0.2em 0 0;
          height:1.05em;
          width: auto;
      }
  
      #nav ul li:hover, #nav ul li a:hover{ background-color:#1da8d8;}
  
  
      #nav ul{
          display:none;
      }
  
      /*all see this */
      #nav ul ul, #nav ul ul ul{
          display:none;
          position:absolute;
          margin-left:12em;
      }
  
      /* non-IE browsers see this */
      #nav ul li&gt;ul, #nav ul ul li&gt;ul{
          margin-top:-1.8em;
      }
  
      #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul, #nav li:hover ul ul ul ul ul{
          display:none;
      }
  
      #nav li:hover ul, #nav ul li:hover ul, #nav ul ul li:hover ul, #nav ul ul ul li:hover ul, #nav ul ul ul ul li:hover ul{
          display:block;
      }
  
      li&gt;ul {
          top: auto;
          left: auto;
      }
  </code></pre>