Sorry, if I overlooked a thread, but I didn't find anything similar .

Well, I am pretty new to CSS, but everything is going fine - except that I don't figure out the navigation. I feel pretty stupid after days of trying...

I just want a static submenu. It is supposed to look like this:

topic1
subtopic1
subtopic2
...
topic2
subtopic3
...

I have no problem formatting the first menu points, but if I try to apply hover, etc. to the submenu, I always get a problem with either Firefox or MS Explorer. So far I went through a lot of tutorials and I tried different ways such as a separate div container, classes, but nothing really works. I even found a tutorial n http://www.thestyleworks.de/index.shtml, where it was really good explained. Only - it doesn't work. The funny thing is that their tutorial works fine on both browsers, but not when I apply it to my site.
The problem is probably me . What I am looking for is a tutorial where this is explained in simple steps, so I can get this done.

Ok, hopefully someone can help me, please. I could send my stylesheet as it is right now, if someone would have a look.

Thanks, Brigitte

I feel pretty stupid after days of trying.

Don't beat yourself up, CSS dropdown menus are one of the more difficult things to create.

Try this tutorial: http://www.htmldog.com/articles/suckerfish/dropdowns/

The hover probably doesn't work in IE because the hover is applied to something besides the <a> tag, and IE will only do a hover on an <a>. Scripting is needed to force it to hover on anything else.

Thanks for the encouragement . I will check this link out. So far I tried to avoid putting java script in it, but maybe that is the only choice.

If I ever figure it out, I will post the result for other newbies .

I solved the problem strictly with CSS and now it works on Firefox and MS Explorer. So far I still have to do two reviews before I can get my site reviewed, but hopefully in the next few days .

But here is the code for the navigation. It is not a dropdown menu, but static with one sublevel. I use this stylesheet as a template for Typo3 CMS.

#navigation {
padding: 0px;
float: left;
margin-top: 2px;
margin-left: 30px;
}
#navigation ul {
margin: 10px 15px 10px -30px;
padding: 0;
background-color: transparent;
}
#navigation a {
border: 1px solid #990099;
margin: 2px 5px 12px;
font-family: sans-serif;
font-style: normal;
font-variant: normal;
font-weight: bold;
font-size: 1em;
line-height: normal;
font-size-adjust: none;
font-stretch: normal;
color: #000000;
text-decoration: none;
display: block;
background-color: transparent;
}

#navigation ul li {
list-style-type: none;
list-style-image: none;
list-style-position: outside;
width: 153px;
z-index: 100;
float: left;
position: relative;
background-color: #bbc7ff;
}
#navigation ul li a {
border: 1px solid black;
margin: 2px;
padding: 0;
display: block;
background-color: transparent;
}
#navigation ul li a:link, #navigation ul li a:visited {
border-color: #ff8040 #668cb2 #668cb2 #ff8040;
border-width: 1px;
margin: 0;
padding: 3px;
background-image: url(linkbg.jpg);
color: black;
text-decoration: none;
width: 100px ! important;
height: 15px;
background-color: #ffffff;
}

#navigation ul li a:hover {
text-decoration: none;
color: #ffffff;
background-color: #000037;
}

#navigation ul ul {
background-color: #33cc00;
display: inline;
float: none;
position: relative;
}

#navigation ul ul li {
margin-left: 10px;
display: block;
background-color: transparent;
width: 100px;
margin-right: 10px;
margin-top: 0px;
float: left;
position: static;
}

#navigation ul ul li a:link {
opacity: 1;
width: 90px ! important;
background-color: #ffffff;
display: block;
background-image: none;
}
#navigation ul ul li a:visited {
opacity: 1;
width: 90px ! important;
display: block;
background-image: none;
background-color: #ffffff;
color: #ff9900;
}
#navigation ul ul li a:hover {
text-decoration: none;
color: #ffffff;
background-color: #000037;
}
#navigation ul ul li a {
font-weight: normal;
}