Hierarchical horizontal navigation menu

[Bryan]

I've been trying to figure out how to do this for the past 2 days and
am finally tossing in the towel. No matter what I do, I just can't
seem to get it to work and haven't been able to find any examples of
how to do it in a more CSS-oriented way. Most of the hierarchical
examples are for vertical navigation menus.

Basically, I'm trying to achieve the same effect as on
anthropologie.com (that's the only one that I can think of off-hand).
Any clues on how I should begin? And I'm sorry if this is fairly
simple to do, but I'm a newbie to the whole pure XHTML/CSS thing.
Thanks.

Oh, and in case it helps, here's a bit of my stylesheet just in case
it helps.

/* --- Overall Definitions --- */
body {
background: #422605;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
font-family: "Lucida Grande", Arial, Verdana, Sans-Serif;
font-size: 11px;
}

a {
color: #000000;
text-decoration: none;
}

a:link {
text-decoration: none;
color: #036;
}

a:visited {
color: #036;
text-decoration: none;
}

a:hover {
color: #036;
text-decoration: underline;
}
/* --- Layout Definitions --- */
#mainContainer {
background: transparent;
width: 780px;
height: 800px;
margin: 20px auto 20px auto;
border: #fffaed double 4px;
padding: 2px;
text-align: left;
}

#header {
background: url(logo.png) no-repeat #ffffff;
position: relative;
top: -11px;
width: 100%;
height: 160px;
}

#header h1 {
display: none;
}

#header h2 {
display: none;
}

#header hr {
display: none;
}

#toolbar {
position: absolute;
left: 575px;
top: 5px;
float:right;
}

#search {

}

#search form {

}

#search p {
color: #036;
}

..text {

}

..button {
position: relative;
top: 3px;
}

#wishList {

}

#wishList p {
text-align: center;
}

#navigation {
margin: 0px;
padding: 0px;
position: relative;
top: 80px;
text-align: center;
}

#navigation ul {
padding-left: 0;
margin-left: 0;
background-color: #036;
color: white;
width: 100%;
list-style: none;
}

#navigation li {
display: inline;
}

#navigation a {
padding: 0.2em 1em;
background-color: #036;
color: white;
text-decoration: none;
border-right: 1px solid #fff;
}

#navigation a:hover {
background-color: #369;
color: #fff;
}

#content {
position: absolute;
top: 300px;
left: 56px;
background: #ffffff;
}

#footer {
position: absolute;
top: 400px;
left: 56px;
background: #ffffff;
}

[Phil Evans]

Bryan wrote:

I've been trying to figure out how to do this for the past 2 days and
am finally tossing in the towel. No matter what I do, I just can't
seem to get it to work and haven't been able to find any examples of
how to do it in a more CSS-oriented way. Most of the hierarchical
examples are for vertical navigation menus.
Check out the Suckerfish Dropdowns -
http://www.htmldog.com/articles/suckerfish/dropdowns/

Lightweight, attractive, generally a Good Thing.
Oh, and in case it helps, here's a bit of my stylesheet just in case
it helps.

[snip CSS code]

The link should be everything you need, but for future reference - in a
case like this, we'd need more than just the CSS - it's pretty
meaningless without the HTML it's applied to. Best thing is always to
post a live URL

Cheers

P