WordPress Dropdown Navigation menu

2 Views

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.

Read More

Thank you in advance. Your help very much appreciated!

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 {
    margin-top:1px;
    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;}
Post Views: 2

Related posts

2 comments

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

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

  2. The line you mention does in fact affect your menu. Don’t use display:block unless you want to show it, and position:relative also may throw off the positioning.

    This is a fairly simplistic solution for it. You will have to change the classes to work with the ones that wordpress uses. I don’t have a copy which I can use at the moment to be more helpful.

    ul.menu {
  background:#222;
  color:#FFF;   
  padding:0;
  margin:0;
}

ul.menu a { 
  text-decoration:none;
  display:inline-block; 
  padding: 10px; 
  color:inherit; 
}

ul.menu li { 
  display:inline-block;
  position:relative;
}

ul.menu li:hover { 
  background:#777;
  color:#00F;
}

ul.menu > li.submenu > ul.menu {
  display:none;
  position:absolute;
  top:100%;
  left:0;
}

/* For submenus put them on the right side */
ul.menu > li.submenu > ul.menu ul.menu  {
  display:none;
  position:absolute;
  top:0;
  left:100%;
}

ul.menu > li.submenu:hover ul.menu,
ul.menu > li.submenu li.submenu:hover ul.menu {
  display:block;
}
    <ul class="menu">
  <li class="submenu"><a href="#">Test</a>
    <ul class="menu">
      <li class="submenu"><a href="#">Test 2</a>
        <ul class="menu">
          <li><a href="#">Test 3</a>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Comments are closed.