Double Navigation

[priscilla]

Hi, I'm having trouble achieving this navigation.
I've done the first line (in red). But I can't seem to add the second line (in white).

http://media.tumblr.com/tumblr_m9iw2nPbdF1rpbdj4.png

Here's what I've done so far..

html:

<div id="menu-bar">
<ul id="nav">
<li><a href="/home">Home</a></li>
<li><a href="/favourites">Favourites</a></li>
<li><a href="/menu">Menu</a></li>
<li><a href="/home">Bookings</a></li>
<li><a href="/reviews">Reviews</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</div>

css:

#menu-bar {
padding-top: 11px;
margin-bottom: 20px;
}

#nav {
background-color: #000000;
}

ul#nav {
width: 860px;
float: left;
margin: 10px 0 0 0; /* Space from nav bar to Huong Huong header */
padding: 10px 0px 10px 30px; /* space around nav text */
color: #FFFFFF;
}

ul#nav li {
display: inline;
margin: 0px 20px 0px 0px; /* Spaces between nav items */
}

ul#nav li a {
text-transform: uppercase;
color: #8b0b20;
text-decoration: none;
font-family: rockwell;
letter-spacing: 1px;
font-size: 15px;
}

Also what would be the best way to go about creating the divider lines? Thank you so much in advanced!

[alou]

Why not wrpaping the second line in a span and css it as you wish?

Something like

<li><a href="/home">Home</a><span class="secondline">About Us</span></li>

and

span.secondline {display:block;color:#ffffff;font-size:0.7em}

would do what you want.

[priscilla]

thank you!

i figured it out just putting the second line in a <p> tag within each list item and floating the list left. But I will try out that way too.

[alou]

Good luck