# Css relative sizing a dropdown nav menu

**URL:** <https://forum.kirupa.com/t/css-relative-sizing-a-dropdown-nav-menu/228326>\
**Category:** Uncategorized\
**Created:** [June 6, 2007, 10:38pm UTC](https://forum.kirupa.com/t/css-relative-sizing-a-dropdown-nav-menu/228326 "2007-06-06T22:38:33Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![fileslasher](https://avatars.discourse-cdn.com/v4/letter/f/4da419/32.png) [@fileslasher](https://forum.kirupa.com/u/fileslasher)\
**Post date:** [June 6, 2007, 10:38pm UTC](https://forum.kirupa.com/t/css-relative-sizing-a-dropdown-nav-menu/228326/1 "2007-06-06T22:38:33Z")

</div>

Hi all I’m trying get my dropdownhorizontal menu to size properly using ems but I’m not quite sure how to do it. I allways get overlapping. I just need it to work in ie7 and firefox. I know older ie’s dont suport relative sizing but that’s ok for now. Here’s my html code and css code. If any1 can help me out it would be very helpfull.

html code:

```auto

<ul>
<li><a href="#">Top 3 Movies</a>
<ul>
<li><a href="http://www.imdb.com/title/tt0099685/" target="_blank">Goodfellas</a></li>
<li><a href="http://www.imdb.com/title/tt0093058/" target="_blank">Full Metal Jacket</a></li>
<li><a href="http://www.imdb.com/title/tt0110912/" target="_blank">Pulp Fiction</a></li>
</ul>
</li>

<li class="rightBorder"><a href="#">Top 3 Games</a>
<ul>
<li><a href="http://www.gamespot.com/gamecube/action/residentevil/index.html?q=resident%20evil&amp;tag=result;title;8" target="_blank">Resident Evil</a></li>
<li><a href="http://www.gamespot.com/gamecube/action/metroidprime/index.html?q=metroid%20prime&amp;tag=result;title;4" target="_blank">Metroid Prime</a></li><li><a href="http://www.gamespot.com/gamecube/adventure/residentevil4/index.html?q=resident%20evil&amp;tag=result;title;5" target="_blank">Resident Evil 4</a></li>
</ul>
</li>
</ul>

```

css code:

```auto

body {
font-size:100%;
}

}
ul {
    font-family:Arial, Helvetica, sans-serif;
    font-size:1em;
    margin:0;
    padding:0;
    list-style:none;
}
ul li {
    position:relative;
    float:left;
    width:125px;
    border-bottom:#000000 1px solid;
    border-left:#000000 1px solid;
    border-top:#000000 1px solid;
    top:5px;
    background-image:url(assets/bg_menu2.gif);
    text-align:center;
}
li ul li {
    border-bottom:#000000 1px solid;
    border-left:#000000 1px solid;
    border-right:#000000 1px solid;
    border-top:0;
    left:-1px;
}
li ul {
    position:absolute;
    left:0;
    top:15px;
    display:none;
}
ul li a {
    display:block;
    border-bottom:0;
    text-decoration:none;
}
li:hover ul {
    display:block;
}
.rightBorder {
    border-right:#000000 1px solid; }

```