Designing a dropdown menu with sub-menus that appear when hovered over

In my quest to design CSS that will dynamically display links in left-to-right divs, I am seeking a way for sub-menus to appear below the menu being rolled over. The challenge lies in the fact that these menus will be loaded from a WordPress database, meaning that hard-coded names are not feasible due to potential changes.

For example, consider the dynamic loading of menus from a WordPress database:

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

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

This code loads HTML like the following:

<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>

I am now exploring CSS options to enhance the navigation drop-down functionality.

View the output without CSS here.

htmlcsswordpressdrop-down-menunavigation

Answer №1

My approach is to set the top level li's as inline-block elements and then convert the sub-menus into blocks. Using the css :hover selector and adjusting the absolute positioning of the sub-menus usually works well. I have created a fiddle for you to see it in action.

http://jsfiddle.net/jaredkhan/EuH8P/2

Answer №2

http://jsfiddle.net/UVkGG/

.menu{
    white-space:nowrap; /* Ensures menu items do not wrap if container is too small */
}
.menu>li{
    display:inline-block; /* Arranges menu items on a single line */
    height:20px; /* Sets default height for top level menu */
    width:200px;
    padding:5px;
    line-height:24px;
    background:#eee;
    vertical-align:top; /* Aligns menu li's to the top of page */
    list-style:none;
    cursor:pointer;
    overflow:hidden; /* Hides sub-menu */
}
.menu>li:hover{
    height:auto; /* Removes height limit to show sub-menu */
}
.sub-menu{
    margin:0; padding:0;
}
.sub-menu>li{
    display:block; /* Places 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 entire highlighted block clickable, not just the text */
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to animate elements while scrolling in React.js?

I am new to using React.JS and currently working on setting up an E-commerce Store. My goal is to have 5 images stack on top of each other and move together as the user scrolls. I used to achieve this effect in Vanilla JavaScript by adding a window.addEven ...

cssreactjsanimationscroll

Are there any better methods for creating div backgrounds and borders using CSS?

Within my application, there exists a multitude of div elements that share identical backgrounds and borders but vary in size. Having to utilize the same background image for each individual div proves to be highly inefficient, particularly in terms of ba ...

htmlcss

What could be causing the tabs to disappear from the Material UI tab component in my React project?

What am I currently working on? I am in the process of developing a horizontally scrollable tab component to select dates within a month For this project, I have decided to utilize the Material UI library Issues Encountered The dates before the 14th Sun ...

cssreactjsmaterial-uitabs

Positioning elements in CSS using percentages allows for flexible and responsive

I am new to web design and I am trying to create a webpage similar to the one shown in this image. However, I want to set the height and width of the divs using percentage values instead of pixels. Whenever I attempt this, the boxes end up overlapping or ...

htmlcsscss-position

The text box remains disabled even after clearing a correlated text box with Selenium WebDriver

My webpage has two text boxes: Name input box: <input type="text" onblur="matchUserName(true)" onkeyup="clearOther('txtUserName','txtUserID')" onkeydown="Search_OnKeyDown(event,this)" style="width: 250px; background-color: rgb(255, ...

javascriptjavahtmlseleniumselenium-webdriver

Utilizing PHP and HTML div tags to connect and manipulate a MySQL database

Struggling with incorporating HTML div tags into a booking system. I have the user input fields for city, date, and pet type set up, but getting lost when it comes to passing this information to a SQL database using PHP. Can someone provide guidance on how ...

phphtmlcsssql

Is storing HTML tags in a database considered beneficial or disadvantageous?

At times, I find myself needing to modify specific data or a portion of it that originates from the database. For instance: If there is a description (stored in the DB) like the following: HTML 4 has undergone adjustments, expansions, and enhancements b ...

c#asp.nethtmlcssdatabase

How can CSS be used to format an unordered list around images?

Can anyone suggest ways to improve the formatting of this HTML list when wrapping around a left-floated image? I often encounter this small problem while working on client websites: The image has a right-margin, but it doesn't seem to affect the ... ...

htmlcsshtml-lists

I am having issues with my search form - it doesn't appear to be

I am trying to create a search form that will display users (username, firstname, or lastname) from my database as the user types, similar to how Facebook and Twitter do it. However, when I click on the search button, nothing happens. Below are two parts o ...

phphtml

What might prevent an onSubmit event from triggering the execution of "checkTheForm()"?

Despite consuming a substantial amount of information on the internet, I still find myself puzzled by why my code isn't functioning as expected. I acknowledge that there are numerous tutorials out there guiding me to use <form action="index.html" o ...

javascriptjqueryhtmlformsvalidation

SDTT: "Please ensure that the image field has a value before continuing"

I recently added this code snippet to a LocalBusiness listing (using guidance from this resource): <div itemscope itemtype="http://schema.org/LocalBusiness"> <div itemprop="image" itemscope="" itemtype="http://schema.org/ImageObject"> ...

htmlimageschema.orgmicrodatagoogle-rich-snippets

CSS and JavaScript dropdown malfunctioning due to a position swap in internal CSS

This example demonstrates functionality .c1 { background-color:red; position:relative; } .c2 { background-color:blue; position:absolute; height:50px; width:100px; display:none;} .show { display:block; } <body> <button ...

javascriptcss

What could be causing the styled-component's flex value to not update?

I have a sidebar and main content on my website layout. The main content occupies most of the screen space, while the sidebar should only take up a small portion. Both elements are within a flexbox container, with the sidebar and main content as child divs ...

cssreactjstypescriptflexboxstyled-components

Is there a way to execute a code snippet just once when focusing on a specific field?

<form id="myForm"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname"><br> <label for="mname">Middle name:</label> ...

javascripthtmltypescript

Sort by label using the pipe operator in RxJS with Angular

I have a situation where I am using an observable in my HTML code with the async pipe. I want to sort the observable by the 'label' property, but I'm not sure how to correctly implement this sorting logic within the pipe. The labels can be e ...

javascripthtmlangulartypescriptrxjs

Ensure that the child element completely fills the parent element while maintaining a padding around the edges

How can I create a child div that fills 100% of the parent's width and height, including padding? I've tried using box-sizing = border-box, but it isn't working. I also attempted adding the box-sizing property to all elements with *, but tha ...

htmlcss

At what point does IE7 recalculate styles? It seems to have difficulty functioning consistently when a class is applied to the body

Currently facing a peculiar issue. I'm utilizing a class on the element as a toggle switch to control various layout behaviors on my website. When the class is active, specific actions occur; when it's inactive, these actions do not take place. ...

javascriptcssinternet-explorerinternet-explorer-7

Ensure the item chosen is displayed on a single line, not two

I've encountered an issue with my select menu. When I click on it, the options are displayed in a single line. However, upon selecting an item, it appears on two lines - one for the text and another for the icon. How can I ensure that the selection re ...

javascriptcssreactjsmaterial-uijss

jquery hover effect not functioning properly

I have a question regarding my jquery mobile application. I am trying to implement a hover effect on items with the class grid-item, where the width and height change simultaneously in an animation. Here is the code snippet I am using: $('.grid-i ...

javascriptjqueryhtmlcsshover

Field for user input along with a pair of interactive buttons

I created a form with one input field and two buttons - one for checking in and the other for checking out using a code. However, when I submit the form, it leads to a blank page in the php file. What could be causing this issue? UPDATE After changing fro ...

javascriptphpjqueryhtml