Horizontal list (ul) with multiline list item? - html

Question

I have a horizontal list (for a nav bar) and i want an individual list item to be multilined. I tried using a <br /> but that causes the entire list to skip a line
Here's what i got for html :
<ul class="nav_list">
<li><a href="#">Home<a></li>
<li><a href="#">Bar/Bat Mitzvah<br />Tutoring<a></li>
<li><a href="#">Early <br />Childhood<a></li>
<li><a href="#">Home<a></li>
<li><a href="#">Home<a></li>
</ul>
and css:
.nav_list {
float:right;
height:30px;
margin-top:55px;
width:510px;
}
.nav_list li {
display:inline;
list-style-type:none;
}
.nav_list li a {
font-size:18px;
font-family: arial;
color:#b64366;
text-decoration:none;
padding:4px 4px 5px 10px;
background-image:url('../images/nav_divider.png');
background-repeat:no-repeat;
background-position:right;
font-weight:bold;
cursor:pointer;
}
And this is what it should look like (photoshop):
Any suggestions?

Answer 1

Here is your solution: http://jsfiddle.net/3jWwH/
The Html had some errors, like the 'a' tag wasn't ended correctly '/a'.
'br /' works fine, you just have to add float:left to '.nav_list li'
Also I think you should apply padding to 'li' instead of 'a'.
Is this correct?

Answer 2

You can set a width to each of the list elements to constrain them to a certain width. This will cause the words to split to multiple lines.
.nav_list li a {
width: 100px;
}
Then add a bottom border to make the underline on hover.
.nav_list li :hover {
border-bottom: 1px solid #b64366;
}

Answer 3

I think this is what you want:
http://jsfiddle.net/zXzXn/1/
CSS:
.nav_list {
float:right;
margin-top:55px;
}
.nav_list li {
display:inline-block;
list-style-type:none;
text-align:center;
margin:0 10px 0 0;
}
.nav_list li a {
font-size:18px;
font-family: arial;
color:#b64366;
text-decoration:none;
padding:4px 10px 5px 10px;
background-image:url('../images/nav_divider.png');
background-repeat:no-repeat;
background-position:right;
font-weight:bold;
cursor:pointer;
display:block;
}
.nav_list li a:hover{
border-bottom:2px solid #b64366;
}
​