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?

jqueryhtmlcssmenu

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/

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

Expanding Viewports with Dynamic Scrolling Bootstrap Columns

Striving to achieve a specific design in Bootstrap, but hitting roadblocks. The criteria are as follows: No scrolling in the browser window. Display occupying 100% of browser height. Columns for Menu, Left contents, and Right contents must scroll indepen ...

csstwitter-bootstrap

Toggle the visibility of an element using a checkbox in JavaScript

In my scenario, there are 8 checkboxes where only one is checked by default. If you click on the unchecked checkboxes twice, the table linked to them will hide. Ideally, I want the unchecked checkboxes to be hidden by default and the checked one to be sh ...

javascriptjquerycheckbox

The minmax() function is causing grid items to not wrap correctly

I have been working on creating a responsive web page where the "boxes" automatically adjust to a new row when the browser window is resized. To achieve this, I utilized the following CSS code: grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); ...

htmlcssgridcss-grid

Unlocking the power of dynamic text using a single form

My comment reply system is experiencing an issue where the first reply works fine, but subsequent replies are unable to get the reply text value. How can I ensure that all replies work properly based on the Razor code provided below? <h4>Comments< ...

javascriptjqueryhtmlajaxasp.net-mvc

What steps can I take to completely remove JavaScript from an HTML document?

To eliminate the <script> tags in the HTML, I can utilize regex just like this $html = preg_replace('#<script(.*?)>(.*?)</script>#is','', $html); While this approach works well, dealing with inline JavaScript require ...

javascriptphphtmlregex

Unable to transfer all the formatting from the original file for the window.print() function. Localhost is functioning properly, but encountering issues with production

I'm encountering an issue with getting all styles from my Vue app. I have tried the code provided in this answer: https://stackoverflow.com/questions/52343006/how-to-print-a-part-of-a-vue-component-without-losing-the-style While it works fine on loc ...

javascriptcssvue.jsvuejs2vuetify.js

Deactivate the selection option in Syncfusion NumericTextbox

I have integrated an Angular NumericTextbox component from Syncfusion into my application. A problem we encountered is that when the input is clicked, it automatically gets selected. Is there a way to disable this behavior? Problem: https://gyazo.com/a72b ...

htmlangulartypescriptsyncfusionnumeric-textbox

Dynamic updating of scores using Ajax from user input

My goal is to design a form that includes three "Likert Scale" input fields. Each of these three inputs will have a total of 10 points that can be distributed among them. The submit button should become enabled when the score reaches 0, allowing users to s ...

javascriptjqueryhtmlcssajax

Tips for breaking up array elements across multiple "tr" tags

In this particular example, I have a Fiddle set up with multiple tr elements displayed within an ng-repeat. My goal is to have three td elements per row. Would it be necessary to use an inner angularjs ng-repeat and split the iconDets array for this purpos ...

javascriptjqueryangularjs

Ensuring elements are correctly positioned

I am struggling to make the images in the following code align horizontally across the top and also need to align the h1's in the same way. I have tried using the vertical-align property, but it seems to behave oddly to me. HTML: <div class=&apos ...

cssformattingalignmentvertical-alignment

Ways to display title attributes when focused using jQuery?

Typically, title attributes in all browsers only appear when the mouse hovers over them. I am looking to also display them when users are focused on them via keyboard navigation. Unfortunately, without using JavaScript, this cannot be achieved solely throu ...

jquerycssxhtmlaccessibility

Scrolling automatically within a child element that has a maximum height limit

I am currently developing a console/terminal feature for my website. https://i.stack.imgur.com/AEFNF.jpg My objective is to allow users to input commands and receive output, which might consist of multiple lines of information. When new output is displa ...

javascripthtmlcssvelocity.js

What is the best method for storing a Google Analytics object in a $_SESSION variable when transitioning between PHP scripts to avoid encountering a non-object error

Currently in the process of developing a web application that integrates with the Google Analytics API, however encountering challenges when it comes to implementation. The user is given the option to choose their profile from three interconnected drop-do ...

javascriptphpjqueryajaxgoogle-analytics-api

Display temporary image until real image loads within ng-repeat angularjs

I am looking to display a placeholder image while the actual image is being loaded. I have tried using the ng-image-appear plugin. The issue I'm facing is that the placeholder image does not appear for img elements inside ng-repeat, although it works ...

javascripthtmlangularjsimage

Unraveling JSON Data with jQuery - Exploring Multidimensional Arrays

I'm facing a challenge while trying to parse the response data in json format. Here is the JSON output obtained from an external URL: [ { "id": "1", "qtext": "Do you like this product?", "op": [ { "oid": "1", ...

phpjqueryarraysjson

Finding JPG images using Jquery selector

I am looking to utilize jQuery to specifically target <a href=""> elements that have 'href' attributes with file extensions '.JPG' or '.jpg' For instance: To only select these 'links' <a target=& ...

jqueryhtml

Is it possible for the ".filter" function to verify if the target contains multiple attributes?

I'm currently working on a checkbox filter setup and using Jquery's .filter to sort through some divs. Below is the snippet of Jquery code that I am using: $(document).ready(function(){ var checkboxes = $('div.filter-groups').find(&ap ...

javascriptjqueryhtmlcssfilter

Attempting to dynamically assign a nickname to a CSS element selector during runtime

I have been attempting to adjust the position of a font awesome icon within an input field dynamically. My goal was to have the style calculated at runtime, similar to how I've handled other stylesheet elements in the past. However, I am facing diffic ...

htmlcsstwitter-bootstrapfont-awesome

Nested div elements maintain background-image continuity

Is it possible to maintain the background image of the body within a child div that has a red background color with opacity? * { box-sizing: border-box; } body { background-image: url('https://d6scj24zvfbbo.cloudfront.net/306f4bc782c04bbe4939f8c ...

htmlcssbackground-image

Leveraging the power of AngularJS controllers with jQuery's $.ajax functionality

Is there a way to utilize jQuery's $.ajax() function within an angularJS controller (instead of using angularJS built-in $http) in order to access $scope values from a view/template later? Below is an example of a somewhat minimalistic angularJS cont ...

jqueryajaxmodel-view-controllerangularjs