I have a very basic horizontal Nav bar and can't figure out two things.

1. I put a border-right 1px on each item so that I can have a simple separator. I obviously don't want the last item to have a border right 1px.

How can I get rid of it? I tried creating an id in the <li> to have "border-right: none; - but that didn't work.

2. How can I increase the clickable area for each nav bar item? Currently, only the nav bar item is clickable but I would like the surrounding "box" area to be clickable.

1. I put a border-right 1px on each item so that I can have a simple separator. I obviously don't want the last item to have a border right 1px.

Create a class in your css and call it something like .last with border-right: none, then add that class to the last menu item.

How can I increase the clickable area for each nav bar item?

Put display:block on the <a> inside the list item.

What's the proper/best way to add the .last class to the last menu item?

I tried surrounding it by a <div> and also tried putting it in the <li> but they didn't work.

Originally Posted by LadynRed

Put display:block on the <a> inside the list item.

I didn't understand this completely. I tried messing with display:block but nothing turned out right.


Here is my Nav bar code:

html

<div id="nav">
        <ul>
            <li><a href="">Item 1</a></li>
            <li><a href="">Item 2</a></li>
            <li><a href="">Item 3</a></li>
            <li><a href="">Item 4</a></li>
            <li><a href="">item 5</a></li>
            <li><a href="">Item 6</a></li>
        </ul>
    </div>

css

#nav ul{
    background-color:#669933;
    width:780px;
    display:block;
    margin: 0px 0px 0px 0px;
    height:24px;
    padding:5px 0px 0px 0px;
    text-align:center;
    line-height: 1.4em;
    font-size: 13px;
    font-weight: bold;
}
#nav li{
    display:inline;    
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #E1E1E1;
}
#nav ul a{
    text-decoration:none;
    color:#FFFFFF;
    margin: 0px 14px;
}
#nav ul a:hover{
    text-decoration:none;
    color:#F5E412;
}

like this:

<li class="last"><a href="">Item 6</a></li>

Originally Posted by LadynRed

like this:

Hmm, I don't get what's wrong. It's still not working. I put it exactly how you have it.

How is it in your CSS ?
Should be something like this:

#nav li.last{border-right: none;}

Thanks! That worked. I had it wrong, I only put: .last {border-right; none;}

I'm confused as to why I needed the #nav in there. Is this because it within the #nav id div?

It also worked fine with just: #nav .last {border-right; none;}

Is one more correct than the other?

I'm confused as to why I needed the #nav in there. Is this because it within the #nav id div?

The reason it worked is SPECIFICITY - adding the div declaration made application of the class more specific. Same for the #nav .last - means that the class ONLY applies to elements inside of #nav.

Great, I see, thanks for all the help.