Create a navigation bar using CSS that is designed from an unordered list without any specific

Question

Create a navigation bar using CSS that is designed from an unordered list without any specific

Is it possible to create a multilevel menu using only CSS for the menu structure mentioned below? Websites like cssmenumaker.com showcase examples of menus with 2-3 level submenus by adding classes like has-submenu.

Can we achieve this without adding any classes to the sub-menu and solely manage it through CSS?

For example:

.nav ul {}
.nav ul ul {}
.nav ul li{}....


<ul class="nav">
    <li><a href="#">Home</a>

    </li>
    <li><a href="#">About Us</a>

    </li>
    <li><a href="#">News</a>

    </li>
    <li><a href="#">Gallery</a>

        <ul>
            <li><a href="#">Image Gallery</a>

            </li>
            <li><a href="#">Video Gallery</a>

            </li>
        </ul>
    </li>
    <li><a href="#">Contact</a>

    </li>
</ul>

A demonstration on jsfiddle based on cssmenu.com can be found at: http://jsfiddle.net/zo61z9sw/

Visit for more information.

Alternatively, is it necessary to use jQuery or any other framework to handle multilevel menus?

jquery html css menu

Answer 1

Answer №1

This method is effective because the submenu ul is contained within the parent li.

Initially set the submenu ul to display: none;
When hovering over the parent li, change the child ul to display: block;. This is achieved using li:hover > ul with the greater than sign ensuring only direct child ul elements are affected.

In this scenario, the use of .has-sub is unnecessary as checking all li elements for child ul will suffice.

CSS:

/*CSS for menu without subclasses*/
#testmenu {
    border-radius: 5px;
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.15);
    background: linear-gradient(to bottom, #f2edea 0%, #c0bebf 100%);
    font-weight: 600;
    height: 52px;
    width: auto;
    margin-bottom: 100px;
}
 #testmenu ul, #testmenu li, #testmenu span, #testmenu a {
    border: 0;
    margin: 0;
    padding: 0;
    position: relative;
}
#testmenu:after, #testmenu ul:after {
    content:'';
    display: block;
    clear: both;
}

/* Remaining CSS style rules removed for brevity */

I have omitted some vendor prefixes in order to condense the code. There may be room for optimization by removing or consolidating certain styles.

JS Fiddle: http://jsfiddle.net/x9fmzc82/

Answer 2

This method is effective because the submenu ul is contained within the parent li.

Initially set the submenu ul to display: none;
When hovering over the parent li, change the child ul to display: block;. This is achieved using li:hover > ul with the greater than sign ensuring only direct child ul elements are affected.

In this scenario, the use of .has-sub is unnecessary as checking all li elements for child ul will suffice.

CSS:

/*CSS for menu without subclasses*/
#testmenu {
    border-radius: 5px;
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.15);
    background: linear-gradient(to bottom, #f2edea 0%, #c0bebf 100%);
    font-weight: 600;
    height: 52px;
    width: auto;
    margin-bottom: 100px;
}
 #testmenu ul, #testmenu li, #testmenu span, #testmenu a {
    border: 0;
    margin: 0;
    padding: 0;
    position: relative;
}
#testmenu:after, #testmenu ul:after {
    content:'';
    display: block;
    clear: both;
}

/* Remaining CSS style rules removed for brevity */

I have omitted some vendor prefixes in order to condense the code. There may be room for optimization by removing or consolidating certain styles.

JS Fiddle: http://jsfiddle.net/x9fmzc82/

Create a navigation bar using CSS that is designed from an unordered list without any specific

Answer №1

Similar questions

What is the process for cancelling a pending request using jQuery in JavaScript Selenium?

Troubleshooting issues with browser scrollbars in a Silverlight application (HTML)

Tips on adding space between a material icon and its corresponding description

CSS - Desiring a border with three layers

Guide on using jQuery to incrementally cycle through an array using a button

How can I populate a <select> tag with options dynamically using C# when the page loads?

The reference to the jQuery object is void

Adding extensive HTML content using jQuery

This error is thrown when trying to access the property 'message' of an undefined value

Embedded Twitter posts are not showing up correctly when using vue

PHP implementation for a static header layout

Troubleshooting Problem with React Slider: Inability to Display Images and Previous Button

Using jQuery UI to style div elements with dynamic titles

PHP and WordPress are experiencing issues with character encoding

The error "relative error: invalid property value" occurs when setting the width and height of a parent element

Is there a way for me to determine the total number of seconds since the chatbot was first opened?

Is there a way to display the product name in the input field when it is selected using the keyboard?

Tips for retaining filled data after an incomplete form submission

Experiencing difficulties with incorporating cURL data into MySQL using Simple Dom Parser

Create a layout using jquery-tokeninput