drop down css

[Ian Rutgers]

Hi everyone,

I am working on formatting the drop menu "Main Menu" in
http://www.taoofpeace.com/test/curriculum/index.php. Specifically there
needs to be a little padding above and below the word "Main Menu" and a
little padding to the left of each "Main Menu" item. By a little padding I
am thinking not much more than 0.3em.

If I add any padding to just the "Main Menu" it throws off the drop down
menu placement. Same is true to the left and right menu placement.

I started with the code from http://www.alistapart.com/articles/dropdowns/
and have been customizing it. How can I accomplishing the padding without
throwing off the menu. (Needs to work in IE and Firefox.) The css for the
menu comes from ...

#contentLeftNav a#selectedTopic, #nav li{
border-left:1px;
border-right:1px;
border-bottom:0px;
border-top:0px;
border-style:solid;
border-color:#F7931D;
background-image:url(../images/orangePixel2.gif);
background-repeat:repeat;
}
#mainNav{
position:absolute;
top:200px;
left:500px;
z-index:9;
}
#nav ul { /* all lists */
margin: 0;
list-style: none;
}
#nav li { /* all list items */
float: left;
position: relative;
width: 12em;
}
#nav li ul { /* 1st level list items */
display: none;
position: absolute;
top: 1em;
left: 0em;
}
#nav li ul li {
left: -1px;
line-height:1.3em;
}
#nav li>ul { /* to override top and left in browsers other than IE, which
will position to the top right of the containing li, rather than bottom left
*/
top: auto;
left: auto;
}
#nav li:hover ul, #nav li.over ul { /* lists nested under hovered list items
*/
display: block;
}
#nav li{
color:white;
}
#nav li ul li a:link{
color:white;
}
#nav li ul li a:hover, #nav li ul li a:focus{
display:block;
width:100%;
background-image:url(../images/orangePixel.gif);
}
#first{
padding-top:.5em;
}
#last{
padding-bottom:.5em;
}

Thanks in advance for your sage advice!