drop down css

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

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{
#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;
#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{
#nav li ul li a:link{
#nav li ul li a:hover, #nav li ul li a:focus{

Thanks in advance for your sage advice!

Site Timeline