Css active sub menu display

HTML & CSS
1

hi

I am having trouble with the active link I can’t get the submenu to static display. I need the hover to do what it is doing. But say the active link is home I need the home sub menu to display and if you hover over another menu item
it will display and once removed the statically active link will still be there.

http://203.193.216.214/ is the link

I currently have #tabs ul li:active ul {display: block;} at the bottom of the hover css

any help would be great

2

If you put a special class on the body tag of each main page, like <body class=“home”> than place a matching ID on the sub list (e.g. <ul id=“home”>) you can make a rule to display that UL when on the Home pages, something like

.home #home {display…}

EDIT: Hmm, this will cause a bit of a mess when other links are hovered, though, without some more elaborate CSS…

3

Hi, Welcome to SitePoint! :slight_smile:

I’m afraid you have not understood the purpose of the :active pseudo class. It only effects the anchor state in that brief moment that it is clicked, it has been confused with current page styling by many people.

Read through this recent thread for more explanations on it.
Selected or Active?

Your using a WP theme so it looks like they have already provided you with a class to target your current page styles with. In the html on your home LI you will see this class.

<li class="page_item page-item-12 [COLOR=Blue]current_page_item[/COLOR]">

You will want to use it to target the current page Sub UL to be visible at all times.

4

That is what I am looking for. thanks tried the following after the all the menu code but it did nothing!!

.current_page_item
{
display: block;
}

5

tried
.current_page_item ul
{
display: block;
}

6

You have to get more specific since it has an ID on it :slight_smile:


#tabs ul li.current_page_item ul {
     display: block;
}

You also need to add z-index to your :hover state so it can layer over the current class

#tabs ul li:hover ul {
    display: block; 
    [COLOR=Blue]z-index:2;[/COLOR]
}
7

it works great but if I press say the contact link it or the pepper farm links anything before it will not hover.

8

Yeah, I saw that coming. See the last codebox in previous post.
It was a stacking order problem with the absolute positioning.

9

Perhaps you could try a higher z-index on the hover styles.

E.g.

#tabs ul li:hover ul {
display: block;
[COLOR="Red"]z-index:100;[/COLOR]
}
10

You must have posted a few seconds after me Ralph :slight_smile:
Yes, that is the way to fix it though.

11

thank you for all your help I have been looking at you web site and have book marked it. I was going to make sure that this menu was done in complete css and with your help it is ta

12

It could still use some improvement. Using display:none; to hide sub menus is not good practice from an accessibility standpoint. It is much better to hide the sublist off-screen with a large negative margin.

This Menu is similar to what you are doing, if you view the page source you will find these rules that hide and show the sublist.

#nav li ul {
    position:absolute;
    height:26px;
    left:0;
    top:30px;
    [COLOR=Blue]margin-left:-999em;[/COLOR]
    background:#EEF;
}
#nav li:hover ul,
#nav li.sfhover ul {
    [COLOR=Blue]margin-left:0;[/COLOR][COLOR=DarkGreen]/*show the sub ul on hover*/[/COLOR]
}

That way your menu can still be tabbed through by keyboard users. :wink: