CODEWITHSUNDEEP
cssmenu
Onyx
Onyx

Reputation: 11

CSS Menu - Display the active pages items submenu

I have a typical CSS top navigation which displays a submenu when you roll over the different parent menu items. How can I change the code to keep the active submenu displayed. So if you were on the page for that parent menu item, or one of its children, it would keep that submenu displayed unless you hovered over another parent menu item.

Here is a jsfiddle link to the code: http://jsfiddle.net/cgzUm/

The code itself:

<div id="topbar">
<div id="navbar">
    <div class="elements">
        <ul>
            <li id="menua"><a href="#">Menu A</a>
                <div class="subnavbar">
                    <ul>
                        <li><a href="#">Submenu A1</a></li>
                        <li><a href="#">Submenu A2</a></li>
                        <li><a href="#">Submenu A3</a></li>
                    </ul>
                </div>
            </li>
            <li id="menub"><a href="#">Menu B</a>
                <div class="subnavbar">
                    <ul>
                        <li><a href="#">Submenu B1</a></li>
                        <li><a href="#">Submenu B2</a></li>
                        <li><a href="#">Submenu B3</a></li>
                    </ul>
                </div>
            </li>
            <li id="menuc"><a href="#">Menu C</a>
                <div class="subnavbar">
                    <ul>
                        <li><a href="#">Submenu C1</a></li>
                        <li><a href="#">Submenu C2</a></li>
                        <li><a href="#">Submenu C3</a></li>
                    </ul>
                </div>
            </li>
            <li id="menud"><a href="#">Menu D</a>
                <div class="subnavbar">
                    <ul>
                        <li><a href="#">Submenu D1</a></li>
                        <li><a href="#">Submenu D2</a></li>
                        <li><a href="#">Submenu D3</a></li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
</div>

And the CSS code:

#navbar { position: relative; width: 990px; height: 40px; z-index: 12; margin: 0px auto; }
#navbar .elements { display: inline; float: left; position: relative; width: 100%; height: 100%; text-align: center; margin: 0px; padding: 0px; text-align: center; }
#navbar .elements > ul { clear: left; display: inline; float: left; position: relative; left: 50%; height: 40px; margin: 0px; padding: 0px; list-style-type: none; margin: 0px; }
#navbar .elements > ul > li { display: inline; float: left; position: relative; right: 50%; text-transform: uppercase; margin: 0px; padding: 10px 0px 5px 0px; height: 25px; font-size: 14px; }
#navbar .elements > ul > li > a { display: block; color: #002B55; overflow: hidden; font-size: 12px; font-weight: 700; text-decoration: none; height: 25px; line-height: 25px; padding: 0px 25px; margin: 0px; }
#navbar .elements a:hover, #navbar .elements li a.selected { color: #0073AE; }
#navbar .elements > ul > li:hover .subnavbar { display:block; }
#navbar .elements > ul > li > a:active .subnavbar { display:block; }
#navbar .subnavbar { position: fixed; width: 100%; height: 27px; top: 40px; left: 0px; background-color: #FFF; border-top: 1px solid #2B2B2B; text-align: center; margin: 0px; padding: 0px; overflow: hidden; z-index: 13; display: none; }
#navbar .subnavbar.over { display: block; padding-bottom: 7px; }
#navbar .subnavbar ul { height: 27px; z-index: 5; list-style-type: none; margin: 0px auto; padding: 0px; }
#navbar .subnavbar ul li { display: inline; text-transform: uppercase; }
#navbar .subnavbar ul li a { text-decoration: none; line-height: 27px; font-size: 12px; padding: 7px 8px 7px 9px; color: #002B55; }
#navbar .subnavbar ul li a:hover { color: #0073AE; }
#navbar .subnavbar ul li a.selected { color: #0073AE; }
#navbar .selected .subnavbar { z-index: 12; }
#navbar ul > li.selected div.subnavbar { display: block; }
#navbar .elements > ul > li { padding-bottom: 6px; }

Upvotes: 1

Views: 6787

Answers (1)

andi
andi

Reputation: 6522

First, add class="active" on the li which is the active menu item, like this:

<li id="about" class="active"><a href="/wordpress/about">About</a>

Then add this line of CSS:

#navbar .elements > ul > li.active .subnavbar { display:block; z-index:1; }

and update the z-index on this one:

#navbar .elements > ul > li:hover .subnavbar { display:block; z-index:2;}

jsFiddle: http://jsfiddle.net/cgzUm/4/

Upvotes: 1

Related Questions