Creating dropdown menu with submenus appearing on rollover

1 Views

I am looking to create CSS that will display these links below in “left to right” divs and when action like “rollover” happens the appropriate sub-menu’s will appear right below the menu they just rolled over.

Here is the KEY. This menu will be “Dynamically Loaded” from wordpress database so I need to know how to style the “main menus” and then on the rollover of each menu the dropdown will appear below in the right spot. But I can’t hard coded names as the menu items will change etc.. does this make sense?

Read More

Here is one dynamic example loaded from a a wordpress database.

THIS CODE BELOW: 

<? 
require('wordpress/wp-blog-header.php');
?>

<div class="access">
  <?php wp_nav_menu(); ?>
</div>

LOADS THE FOLLOWING HTML BELOW: 

<div class="access">
  <div class="menu-papamenu-container"><ul id="menu-papamenu" class="menu"><li id="menu-item-45" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-45"><a href="?p=love">Home</a>
<ul class="sub-menu">
    <li id="menu-item-46" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-46"><a href="?p=Happy">Happy</a></li>
    <li id="menu-item-47" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-47"><a href="?p=coolBeans">Cool Beans</a></li>
    <li id="menu-item-49" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-49"><a href="?p=SoHappy">So Happy</a></li>
</ul>
</li>
<li id="menu-item-48" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-48"><a href="?p=Contact">Contact Us</a>
<ul class="sub-menu">
    <li id="menu-item-50" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-50"><a href="?p=Address">Address</a></li>
    <li id="menu-item-51" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-51"><a href="?p=Phone">Phone</a></li>
    <li id="menu-item-52" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-52"><a href="?p=Email">Email</a></li>
</ul>
</li>
<li id="menu-item-53" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-53"><a href="?p=About">About Us</a>
<ul class="sub-menu">
    <li id="menu-item-54" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-54"><a href="?p=Company">Company</a></li>
    <li id="menu-item-55" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-55"><a href="?p=CompanyAddress">Company Address</a></li>
</ul>
</li>
</ul></div></div>

But how can I add CSS to give it the proper navigation drop downs etc?

The OUTPUT without CSS can be seen here.

Post Views: 1

Related posts

Leave a Reply

2 comments

  2. http://jsfiddle.net/UVkGG/

    .menu{
    white-space:nowrap; /* Stops the menu from wrapping if the container is too small */
}
.menu>li{
    display:inline-block; /* Put menu items on one line */
    height:20px; /* Set default height for top level menu */
    width:200px;
    padding:5px;
    line-height:24px;
    background:#eee;
    vertical-align:top; /* Align menu li's to top of page*/
    list-style:none;
    cursor:pointer;
    overflow:hidden; /* Hide sub menu */
}
.menu>li:hover{
    height:auto; /* Remove height limit to show sub menu */
}
.sub-menu{
    margin:0; padding:0;
}
.sub-menu>li{
    display:block; /* Put sub-menu items on separate lines */
    padding:5px;
    margin:2px;
    background:#ccc;
    list-style:none;
    cursor:pointer;
}
.sub-menu>li:hover{
    background:#aaa;
}
.menu a{
    text-decoration:none;
    color:#111;
    font-weight:bold; 
    display:block; /* Makes the entire highlighted block clickable not just the text */
}