Dropdown menu on wordpress

2 Views

I have set up a wordpress dropdown menu to work in the theme I have created. It is working in so far as the second level child appears when you hover over the desired parent link in the menu, but the dropdown is appearing all the way off to the left of the menu instead of under the one it should. To test it, go to THIS SITE.

How do I get it to appear below the one I want it to. Hover over “Solar Electricity” to see the test. It comes out under Home instead of where it should.

Read More

The css I’m using is: 

/* sub menus!!  */

ul.dropdown ul {
    background-color:#383530;
    list-style: none;
    margin:0; /* Appear just below the hovering list */
    padding:0.6em;
    width:200px; /* specify the width. */
    position:absolute; /* needed */
    z-index:500; /* specify the order */
}

ul.dropdown li ul {
    top:27px; /* Positioning:Calc with top level horz list height */
    -moz-box-shadow:0 2px 10px #000; /* CSS 3 */
}

ul.dropdown ul ul {
    top:0;
    left:100%; /* Position the sub menus to right. */
}

ul.dropdown ul li {
    float:none; /* umm.. Appear below the previous one. mmkay? */
}

/* Drop Down! */

/* Hide all the dropdowns (submenus) */
ul.dropdown ul,
ul.dropdown li:hover ul ul,
ul.dropdown ul li:hover ul ul
{ display: none; }

/* Display the submenus only when li are hovered */
ul.dropdown li:hover ul,
ul.dropdown ul li:hover ul ,
ul.dropdown ul li ul li:hover ul
{ display: block;}

ul.dropdown li * a:hover {
    /* Change color of links when hovered */
    background: #600;
    background: -moz-linear-gradient( top, #200, #400); /* CSS 3 */
    border-bottom:1px solid #900;
    border-top:1px solid #222;
}
Post Views: 2

Related posts

Leave a Reply

2 comments

  1. When you click the three images in the other menu, with the duplicate dropdown menu displayed.

    help dropdownmenu wordpress bootstrap4

    This is the code:

      if( $args->walker->has_children && $depth == 0 ) {
              $output .= '<span class="caret down" onclick="myFunction()">';
          }
            $output .= '</span>';
}
function start_lvl( &$output, $depth=0, $args = array() ){
    $submenu = ($depth > 0) ? ' sub-menu' : '';
    $output .= "<ul id='myDropdown' class='dropdown-menu $submenu depth_$depth'>";

}

  2. Set display:inline-block instead of display:inline to following rule in your style.css at line #206

    #menu li {
  display: inline-block; /* change this */
  list-style: none;
  padding: 0.3em 1em;
}