Q:

Can anybody help me out with a html/css dropdown menu issue? 

I just started to create a website and all is perfect, without the menu...
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. 
HTML
<div>
    <ul type="none">
        <li class="dropdown"><a class="nav" href="#">Home</a> 
            <ul class="dropdownitems">
                <li><a class="dropdownitem" href="#">Home Style1</a></li> 
                <li><a class="dropdownitem" href="#">Home Style2</a></li>
                <li><a class="dropdownitem" href="#">Home Style3</a></li> 
                <li><a class="dropdownitem" href="#">Home Style4</a></li>               
            </ul>
        </li>
        <li class="dropdown"><a class="nav" href="#">Other</a> 
            <ul class="dropdownitems">
                <li><a class="dropdownitem" href="#">Other1</a></li> 
                <li><a class="dropdownitem" href="#">Other2</a></li> 
            </ul>
        </li>
    </ul>
</div>

CSS
.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 > 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;
}

Please take a look: http://jsfiddle.net/9afrX/1/
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! 

A:

you are using position:absolute; to the dropdown , you should make it parent list(li) 
position:relative

http://jsfiddle.net/9afrX/13/

