Adding a Submenu to Underline Horizontal Menu

[rlfinc]

Hello All-
Hoping to get some guidance as to how to approach this. I am a newbie to CSS so sorry if the answers obvious. I downloaded and implemented the Underline Horizontal Menu menu without problem. But in trying the different methods I've found online to add a horizontal css submenu, I keep coming up short. If someone can give me some tips on adding the submenu coding to my external css document, I'd appreciate any guidance I can get. Thanks in advance.

.topmenu {
position:absolute;
left:110px;
top:54px;
height:19;px;
width:635px;
background-color:#FFFFFF;
}

#underlinemenu{
margin: 0;
padding: 0;
}

#underlinemenu ul{
margin: 0;
margin-bottom: 1em;
padding-left: 0;
float: left;
font-weight: bold;
width: 100%;
border: 1px solid #DFDFDF;
border-width: 1px 0;
}

* html #underlinemenu ul{ /*IE only rule. Delete extra margin-bottom*/
margin-bottom: 0;
}

#underlinemenu ul li{
display: inline;
}

#underlinemenu ul li a{
float: left;
color: gray;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
padding: 2px 6px 4px 6px;
text-decoration: none;
font-size: 9px;
}

#underlinemenu ul li a:hover{
color: #CADB2A;
border-bottom: 4px solid #CADB2A;
padding-bottom: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
}

[Medyman]

A general rule that I always follow and tell others to follow is to determine functionality before design. Design can always be added later. That's what CSS is for.

But there are some constraints on the design depending on the functionality you want to implement.

So, if you want a dropdown menu, start with one (http://www.dynamicdrive.com/style/csslibrary/item/suckertree-menu-horizontal/) of (http://www.dynamicdrive.com/style/csslibrary/item/two-level-css-tabs-menu/) these (http://www.dynamicdrive.com/dynamicindex1/ddtabmenu.htm) and adapt the CSS to match this (http://www.dynamicdrive.com/style/csslibrary/item/underline-horizontal-menu/).

It's much easier to do it this way than to try to add things after the fact.

[rlfinc]

Thank you for the prompt response. I actually did begin with one of the examples you referenced, then I realized that it needed a javascript. I think thats how I ended up where I did. Are there any pure CSS methods, that you know of, that would apply a rollover effect like the ddtab menu withouth using javascript?

[Medyman]

Pure CSS Dropdown menus are possible, but they have their drawbacks. Non-modern browsers (e.g. IE5, IE6) don't have the level of CSS support needed to accomplish cross-browser designs.

With that said, there are options like this (http://www.tjkdesign.com/articles/keyboard_friendly_dropdown_menu/default.asp). It won't look the same in all browsers without javascript, but it will still be accessible.

[flicity]

The most bulletproof code I've found is from css play:

http://www.cssplay.co.uk/menus/

[rlfinc]

For anyone who took the time to respond, thank you. I actually found put something together that (finger-crossed) seems to be functioning well across most browsers. Starting to get the hang of this after all.