title: Can anybody help me out with a html/css dropdown menu issue?
body: <p>I just started to create a website and all is perfect, without the menu...</p>
  
  <p>My menu has some problems: the "top levels" are okay, but the "second levels"/dropdown menus are not good and I can't figure out how to fix them. They are not under "their parents" and the width and height of them are not good. I would like to see padding or a specific width for exemple 100px for all submenus and height 20px for all, but I can't get it to work.</p>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;div&gt;
      &lt;ul type="none"&gt;
          &lt;li class="dropdown"&gt;&lt;a class="nav" href="#"&gt;Home&lt;/a&gt; 
              &lt;ul class="dropdownitems"&gt;
                  &lt;li&gt;&lt;a class="dropdownitem" href="#"&gt;Home Style1&lt;/a&gt;&lt;/li&gt; 
                  &lt;li&gt;&lt;a class="dropdownitem" href="#"&gt;Home Style2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a class="dropdownitem" href="#"&gt;Home Style3&lt;/a&gt;&lt;/li&gt; 
                  &lt;li&gt;&lt;a class="dropdownitem" href="#"&gt;Home Style4&lt;/a&gt;&lt;/li&gt;               
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li class="dropdown"&gt;&lt;a class="nav" href="#"&gt;Other&lt;/a&gt; 
              &lt;ul class="dropdownitems"&gt;
                  &lt;li&gt;&lt;a class="dropdownitem" href="#"&gt;Other1&lt;/a&gt;&lt;/li&gt; 
                  &lt;li&gt;&lt;a class="dropdownitem" href="#"&gt;Other2&lt;/a&gt;&lt;/li&gt; 
              &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h2>CSS</h2>
  
  <pre><code>.nav {font-family: times new roman, arial, "ms sans serif", sans-serif; text-decoration: none; color:#484848; font-size:17px;}
  .nav:visited { text-decoration: none; color:black;}
  .nav:focus { text-decoration: none; color:black;}
  .nav:hover, nav:active { text-decoration: none; color:black;}
  .nav:hover {
  font-family: times new roman, arial, "ms sans serif", sans-serif;
  font-size: 17px;
  color: orangered;
  text-decoration: none;
  border-bottom: solid 3px orangered;
  }
  
  .dropdownitems {
  display:none;
  }
  
  li.dropdown:hover &gt; ul.dropdownitems {
    display:block;
    padding: 10px;
    position: absolute;
    left: 0;
    clear:both;
    width: 100px;
  }
  
  
  .dropdownitem { 
  font-family: times new roman, arial; 
  text-decoration: none; 
  color:black; 
  background-color:#F0F0F0;
  
  }
  .dropdownitem:visited { text-decoration: none; color:black;}
  .dropdownitem:focus { text-decoration: none; color:black;}
  .dropdownitem:hover, nav:active { text-decoration: none; color:black;}
  .dropdownitem:hover {
  font-family: times new roman, arial, "ms sans serif", sans-serif;
  font-size: 16px;
  color: black;
  text-decoration: none;
  border-bottom: solid 3px orangered;
  
  }
  
  span div ul
  {
      list-style: none;
      margin: 0px;
      padding: 0px 10px 0px 0px;
      width: 100%;
  }
  
  .dropdown
  {
      display: block;
      float: left;
      width:60px;
  }
  </code></pre>
  
  <p>Please take a look: <a href="http://jsfiddle.net/9afrX/1/" rel="nofollow">http://jsfiddle.net/9afrX/1/</a></p>
  
  <p>If you check it, you will see all the problems, if any body can correct it, please do it, I will really appreciate it. Thanks!</p>