title: How do I make the box smaller in html?
body: <p>In my code, I have a drop-down menu. However, the grey box extends to the end of the screen. How can I limit the grey box?</p>
  
  <p>Code from here: <a href="http://cssdeck.com/labs/7rsznauv" rel="nofollow">http://cssdeck.com/labs/7rsznauv</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;nav&gt;
      &lt;ul class="cf"&gt;
          &lt;li&gt;&lt;a class="dropdown" href="#"&gt;Menu Item 2&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Sub-menu Item 1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Sub-menu Item 2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Sub-menu Item 3&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
              &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>nav ul {
      -webkit-font-smoothing:antialiased;
      text-shadow:0 1px 0 #FFF;
      background: #ddd;
      list-style: none;
      margin: 0;
      padding: 0;
      width: 100%;
  }
  nav li {
      float: left;
      margin: 0;
      padding: 0;
      position: relative;
      min-width: 25%;
  }
  nav a {
      background: #ddd;
      color: #444;
      display: block;
      font: bold 16px/50px sans-serif;
      padding: 0 25px;
      text-align: center;
      text-decoration: none;
      -webkit-transition: all .25s ease;
         -moz-transition: all .25s ease;
          -ms-transition: all .25s ease;
           -o-transition: all .25s ease;
              transition: all .25s ease;
  }
  nav .dropdown:after {
      content: ' ▶';
  }
  nav .dropdown:hover:after{
      content:'\25bc'
  }
  nav li:hover a {
      background: #ccc;
  }
  nav li ul {
      float: left;
      left: 0;
      opacity: 0;
      position: absolute;
      top: 35px;
      visibility: hidden;
      z-index: 1;
      -webkit-transition: all .25s ease;
         -moz-transition: all .25s ease;
          -ms-transition: all .25s ease;
           -o-transition: all .25s ease;
              transition: all .25s ease;
  }
  nav li:hover ul {
      opacity: 1;
      top: 50px;
      visibility: visible;
  }
  nav li ul li {
      float: none;
      width: 100%;
  }
  nav li ul a:hover {
      background: #bbb;
  }
  
  /* Clearfix */
  
  .cf:after, .cf:before {
      content:"";
      display:table;
  }
  .cf:after {
      clear:both;
  }
  .cf {
      zoom:1;
  }​
  </code></pre>