Minor bug with HTML/CSS menu

Question

I'm trying to put up a website but I came across some problems with the dynamic menu. To be more specific, I've adapted a template to include a dropdown menu: some menu items include a sublist that appears when the cursor is over; besides, the main item should change background at mouse over AND when the user is on that specific page.

What I'd like to get is that whenever you are visiting a subpage, only the main menu item is highlighted, but unfortunately this won't happen. I can't make the main item switch background when it is selected, and I have no idea why.

Here's the CSS involved: /* menu */

#menu {
    background: #65b63a;
    clear: both;
    height: 30px;
    border: 1px solid #65b63a;
    padding:0;
    margin:0;
}

#menu ul li.active a, #menu ul li:hover {
    background:url('images/menuover.jpg') repeat-x bottom;
}

#menu ul {
    list-style: none;
    float:left;
    margin:0;
    padding:0;
    font-size:10pt;
}    

#menu ul li {
    background: #65b63a;
    position:relative;
    display: block;
    float: left;
    margin-right: 1px;
    font-size: 10pt;
    text-transform:uppercase;
    line-height: 30px;
    padding:0;
    margin:0;
    border-right:1px #aeaeae solid;
}

#menu ul li a {
    display: block;
    float: left;
    padding: 0 17px;
    color: #FFFFFF;
    text-decoration: none;
}


#menu ul li.sub a{
    background-image:none;
}

#menu ul li ul{
    display:none;
}

#menu ul li ul li{
    padding:0;
    margin:0;
}


#menu ul li:hover ul{
    background:none;
    display:block;
    position:absolute;
    width:200px;
    padding-top:30px;
    margin:0;
    font-size:10pt;
}

#menu ul li ul a:hover {
    text-decoration:underline;
    background:none;
}

#menu ul li li{
    width:200px;
    font-size:10pt;
    background-image:none;
    text-transform:none;

}

And here's the HTML involved:

        <div id="menu">
            <ul>
               <li><a href="index.html">Home</a></li>  <!-- this one is a single item -->
                <li class="active"><a href="#">Chi? Dove? Quando?</a> <!-- this should be "active" but it isn't -->
                    <ul>
                        <li class="sub"><a href="chi.html">Chi siamo</a></li>
                        <li class="sub"><a href="dove.html">Dove siamo</a></li>
                        <li class="sub"><a href="orari.html">Orari</a></li>
                        <li class="sub"><a href="staff.html">Lo staff</a></li>
                        <li class="sub"><a href="contatti.html">Contatti</a></li>
                    </ul>
                </li>
            </ul>
        </div>

I believe the problem is in the CSS, but I can't make it work.

Thanks in advance, Lorenzo

P.S. As a reference, you can find a raw of the website @ http://www.pansepol.it/raw The homepage is and example of single-itemed page, while "Viaggi di Gruppo" > "Asia" is an example of a multi-leveled. As you can see, while navigating to this last page, "Viaggi di Gruppo" isn't highlighted whatsoever.

EDIT:-----------------------------------------------------------

Silly me, it was that simple. I applied the "active" class to the <li> element and corrected the CSS as Justus and Raad suggested.

Now the code reads:

#menu ul li.active a, #menu ul li:hover {
    background:url('images/menuover.jpg') repeat-x bottom;
}

and

<li class="active"><a href="#">Chi? Dove? Quando?</a>
                <ul>
                    <li class="sub"><a href="chi.html">Chi siamo</a></li>
                    <li class="sub"><a href="dove.html">Dove siamo</a></li>
                    <li class="sub"><a href="orari.html">Orari</a></li>
                    <li class="sub"><a href="staff.html">Lo staff</a></li>
                    <li class="sub"><a href="contatti.html">Contatti</a></li>
                </ul>
            </li>

Everything works smoothly.

Thank you,

Lorenzo

I tried with your code and I get this jsfiddle.net/rVabR is it your expecting result? — TNK
– TNK, Commented Feb 18, 2013 at 14:43

Justus Romijn · Accepted Answer · 2013-02-18 14:20:52Z

1

I believe you made a minor mistake in your CSS:

#menu ul li.active a, #menu ul li:hover {

Should be:

#menu ul li.active, #menu ul li:hover {

Because you want the li to show the background-image, not your a.

answered Feb 18, 2013 at 14:20

Justus Romijn

16.1k5 gold badges54 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

LorDisturbia Over a year ago

Thanks for the quick reply. I tried correcting the code as you suggested, but that didn't change anything... Any other clue?

Justus Romijn Over a year ago

On the website the active class is added to the a element. Make sure you add the classname to the li (as in your question code)

Justus Romijn Over a year ago

You may use the big accept button if I pointed you in the right direction.

Raad · Accepted Answer · 2013-02-18 14:27:12Z

0

On the "Home" page, the "active" class is being applied to the <li> element; but on the "Viaggi di Gruppo" > "Asia" it is applied to the <a> element instead. It needs to be one or the other, then adjusted in the css if necessary.

answered Feb 18, 2013 at 14:27

Raad

4,6662 gold badges26 silver badges41 bronze badges

Collectives™ on Stack Overflow

Minor bug with HTML/CSS menu

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related