BlueTree BlueTree - 1 year ago 60
CSS Question

Wordpress Dropdown Navigation menu

I need help with my dropdown menu.

What I want to achieve is to hide my sub menu as well as my sub child menu. Also, I want to the sub list item to only show only if I hover to the list items that I want.

Thank you in advance. Your help very much appreciated!

1) This is my navigation hierarchy:

Navigation hierarchy screenshot

2) This is my Navigation menu:

Navigation menu screenshot

3) This is my CSS:

#access ul ul a { color: #fff; }
#access { position:relative; float:left; height:19px; margin-left:15px; }
#access ul {list-style-type:none; margin:0px; padding:0px;}
#access li {float: left;position: relative; }
#access a { height:19px; display: block; padding:3px 15px 0 15px; text- decoration: none;font-size: 14px; font-family:'LeagueGothicRegular'; color: #ffffff;}
#access ul ul { display: none; float: left; margin: 0; position: absolute; top: 10px; left: 0; width: 150px; z-index: 99999; }
#access ul ul ul { left: 100%; top: 0; }
#access ul ul a {
background: #000000;
color: #ffffff;
font-size: 14px;
font-weight: normal;
height: 19px;
line-height: 1.4em;
padding:2px 15px 0 15px;
width: 157px;
text-decoration: none; font-family:'LeagueGothicRegular', Abadi MT Condensed , Charcoal, sans-serif; color: #ffffff;}

#access li a:hover { color: #ed1c24; }
/* I believe HERE is the problem */
#access li:hover ul { display: block; color: #ffffff;}

#access a:focus {color: #ed1c24;}
#access .current_page_ancestor > a { color:#ed1c24;}

Answer Source

I managed to solve my problem. This worked for me.

 #access ul li:hover > ul {
    display: block;