Problem with a CSS menu

#1
Alhazred

Posted 01 April 2011 - 04:44 AM

Learning Programmer

Members
99 posts

I'm creating an horizontal dropdown menu, but I have a problem.

As you can see in this image when the pointer is on a link in the main bar, the background image has a green line (the link with yellow line is the current shown page).
Posted Image

When I move the pointer over a submenu link the main link lose the background with the green line as you can see here
Posted Image

How can I keep the background with the green line on the main link while selecting the submenu?

Some code:
HTML menu structure:

<div id="crd_menu">
    <ul>
        <li><a href="index.html" class="crd_active">Menu 1</a>
            <ul>
                <li><a href="#">Submenu 1</a></li>
                <li><a href="#">Submenu 2</a></li>
                <li><a href="#">Submenu 3</a></li>
                <li><a href="#">Submenu 4</a></li>
                <li><a href="#">Submenu 5</a></li>
            </ul>
        </li>
        <li><a href="page2.html">Menu 2</a></li>
        <li><a href="#">Menu 3</a></li>
        <li><a href="#">Menu 4</a></li>
    </ul>
</div>

CSS

div#crd_menu {
    width: 100%;
    height:33px;
    float: left;
    margin: 0;
    padding: 0;
    border-top: 1px solid black;
    background-image:url('images/menuback.png');
    background-repeat:repeat-x;
}

div#crd_menu ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

div#crd_menu li {
    width:100px;
    float:left;
    margin: 0;
    padding: 0;
    height:33px;
    border-right: 1px solid black;
    color:black;
} 

div#crd_menu a {
    display: block;
    font-family:arial;
    height:33px;
    line-height: 33px;
    color: #ffffff;
    text-decoration: none;
    background-image:url('images/menuback.png');
}

div#crd_menu a:hover {
    background-image:url('images/menuback_h.png');
    color: #1ed500;
    text-decoration: none;
}

div#crd_menu li ul {
    display: none;
}

div#crd_menu li:hover ul {
    display: block;
    position: absolute;
    z-index:1;
    width:200px;
    text-align:left;
    padding: 0;
    margin: 0 0 0 -1px;
    border:1px solid black;
}

div#crd_menu li li {
    border: none;
    width: 200px;
}

div#crd_menu li li a {
    padding: 0px 2px 0px 10px;
    background-image:url('images/menusub.png');
    background-color:#3e3e3d;
}

div#crd_menu a.crd_active {
    background-image:url('images/menuback_a.png');
    color:#f7b20d;
}

div#crd_menu a.crd_active:hover {
    background-image:url('images/menuback_h.png');
    color:#1ed500;
}

#2
BlaineSch

Posted 01 April 2011 - 08:35 AM

Writes binary right handed and hex left handed

Members
2,448 posts

If you give a hover event to the parent "li" element and style only it's immediate children you can accomplish this.

It is probably worth mentioning that some non-modern browsers don't support hover effects on anything except "a" tags. However, since you are already using a hover on an li, I figured there was nothing wrong with it.

            div#crd_menu > ul > li:hover > a {
                background-image:url('images/menuback_h.png');
                color: #1ed500;
                text-decoration: none;
            }

Here is the compiled code:

<!DOCTYPE HTML>
<html>
    <head>
        <title>CSS Menu</title>
        <style type="text/css">
            div#crd_menu {
                width: 100%;
                height:33px;
                float: left;
                margin: 0;
                padding: 0;
                border-top: 1px solid black;
                background-image:url('images/menuback.png');
                background-repeat:repeat-x;
            }

            div#crd_menu ul {
                margin: 0;
                padding: 0;
                list-style-type: none;
            }

            div#crd_menu li {
                width:100px;
                float:left;
                margin: 0;
                padding: 0;
                height:33px;
                border-right: 1px solid black;
                color:black;
            } 

            div#crd_menu a {
                display: block;
                font-family:arial;
                height:33px;
                line-height: 33px;
                color: #ffffff;
                text-decoration: none;
                background-image:url('images/menuback.png');
            }

            div#crd_menu a:hover {
                background-image:url('images/menuback_h.png');
                color: #1ed500;
                text-decoration: none;
            }

            div#crd_menu li ul {
                display: none;
            }

            div#crd_menu li:hover ul {
                display: block;
                position: absolute;
                z-index:1;
                width:200px;
                text-align:left;
                padding: 0;
                margin: 0 0 0 -1px;
                border:1px solid black;
            }

            div#crd_menu li li {
                border: none;
                width: 200px;
            }

            div#crd_menu li li a {
                padding: 0px 2px 0px 10px;
                background-image:url('images/menusub.png');
                background-color:#3e3e3d;
            }

            div#crd_menu a.crd_active {
                background-image:url('images/menuback_a.png');
                color:#f7b20d;
            }

            div#crd_menu a.crd_active:hover {
                background-image:url('images/menuback_h.png');
                color:#1ed500;
            }
            
            div#crd_menu > ul > li:hover > a {
                background-image:url('images/menuback_h.png');
                color: #1ed500;
                text-decoration: none;
            }
        </style>
    </head>
    <body>
        <div id="crd_menu">
            <ul>
                <li>
                    <a href="index.html" class="crd_active">Menu 1</a>
                    <ul>
                        <li><a href="#">Submenu 1</a></li>
                        <li><a href="#">Submenu 2</a></li>
                        <li><a href="#">Submenu 3</a></li>
                        <li><a href="#">Submenu 4</a></li>
                        <li><a href="#">Submenu 5</a></li>
                    </ul>
                </li>
                <li><a href="page2.html">Menu 2</a></li>
                <li><a href="#">Menu 3</a></li>
                <li><a href="#">Menu 4</a></li>
            </ul>
        </div>
    </body>
</html>