Drop-down Navigation in HTML and CSS is a popular way to create

My navigation menu is functioning well and has an appealing design.

The HTML structure for the menu is as follows:

<div id="menubar">
    <div id="welcome">
        <h1><a href="#">Cedars Hair <span>Academy</span></a></h1>
    </div><!--close welcome-->
    <div id="menu_items">
        <ul id="menu">
            <li class="current"><a href="index.html">Home</a></li>
            <li><a href="index.html">The Salon</a></li>
            <li><a href="index.html">Testimonials</a></li>
            <li><a href="index.html">Courses</a></li>
            <li><a href="index.html">The Staff</a></li>
            <li><a href="index.html">Contact Us</a></li>
        </ul>
    </div><!--close menu-->
</div><!--close menubar-->

I am now looking to modify it to include a dropdown under 'The Salon' with an option for 'Hair Cut':

<li><a href="#">The Salon</a>
    <ul>
        <li><a href="#">Hair Cut</a></li>
    </ul>
</li>

While I know this can be achieved using CSS, my concern lies in the complexity due to existing CSS styles associated with the aforementioned divs (menubar, welcome, menu_items etc.). Could you suggest the simplest method to implement a dropdown menu?

javascriptjqueryhtmlcssnavigation

Answer №1

A quick and easy method summarized:

https://jsfiddle.net/svArtist/2jd9uvx0/

  1. Conceal nested lists

  2. When hovering over list items, reveal the sub-lists

ul ul {
    display:none;
    display:absolute;
    bottom:-100%;
}
li{
    position:relative;
}
li:hover>ul {
    display:table;
}
<ul>
    <li><a href="#">The Salon</a>
        <ul>
            <li><a href="#">Hair Cut</a>
            </li>
        </ul>
    </li>
</ul>

Answer №3

Implemented the sub menu feature with the hover property on li elements.

You can view the demonstration on this code snippet - https://example.com/demo

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

Alignment issue with text in Vuetify Datatables cells

I'm experimenting with Vuetify on my Laravel Vue application, and everything seems to be working fine except for the DataTables styles. The padding of the cells is not vertically center aligned as expected. Here's a screenshot https://i.sstatic.n ...

cssvue.jsbootstrap-4vuetify.js

The hover effect for a :before class is not functioning as intended

I have created a dropdown menu with a triangle at the top in this style: When the cursor hovers over only the triangle, it appears like this: However, when the cursor is over the div, the hover effect for both elements is activated as shown here: I am t ...

css

What is the best way to organize and sort mysql data without disrupting operations?

I've been searching for information on this topic but haven't been able to find a tutorial that explains exactly what program to use. I have a MySQL database with expenses data. What I need is for the system to automatically categorize a new ex ...

javascriptphpjquerymysqlajax

Tips for overlaying text on the background in Next.js:

I'm currently working on creating an image element with overlay text. Check out my jsx code below: <div className={styles.img}> <img src={src} alt="" /> <p>{`(${size})`}</p> </div> And here is t ...

javascriptcssnode.jsnext.jssass

Mastering the application of map, filter, and other functions in Angular using Observables

After creating this Observable: const numbers$:Observable<any>=Observable.create((observer)=>{ for(let i=0;i<5;i++) observer.next(i); }) I attempted to use map and filter as shown below: numbers$.pipe(map(x=>{x+110})).subscr ...

htmlcssangulartypescriptfrontend

Django's background image remains static regardless of CSS changes

I recently downloaded an HTML template and am attempting to customize it by changing the background image within the CSS file. The current code in the CSS file is as follows: background: url(../img/background.jpg) Despite my efforts to replace it with t ...

pythoncssdjangopython-3.xstatic

What is the best way to showcase a set of paired arrays as key-value pairs?

Currently, I am developing a client in React that is responsible for receiving streaming data that represents objects from the back end. The client's task is to parse this data and dynamically construct the object as a JavaScript data structure, typic ...

javascriptarraysreactjs

What could be the reason my node.js application built with express is unable to retrieve data from mongoose

Currently, I have experience in PHP MVC and recently delved into learning Nodejs. Here is how my app directory structure looks like: root - controllers -user.js - model -user.js - public -stylesh ...

javascriptnode.jsmongodbexpressmongoose

steps for repairing a scoreboard

Is there a way to make my scoreboard increase by +1 point instead of +10? In my JavaScript code, I used intervals as it was the only solution that worked: let scoreInterval = setInterval(updateScore); let score = 0; function updateScore() { var poin ...

javascripthtmlcss

Is there a way to retrieve the password of the currently logged in user using Keycloak in JavaScript?

Does anyone know how to access the password of a logged-in user in a React application using Keycloak? I have successfully retrieved most of the necessary information from the idToken, like this: keycloak.init({ onLoad: 'login-required'}).then(fu ...

javascriptreactjsauthenticationtokenkeycloak

What are the typical situations in which Node.js is commonly used?

Do you believe that a majority of node.js users primarily utilize npm? What do you think are the most prevalent use cases for node.js apart from npm? ...

javascriptnode.js

Failed to send JSON data to WebMethod

I am encountering difficulties while attempting to send JSON to a WebMethod. I have provided the method I am using below. If there is a more efficient approach, please advise me. My goal is to store the JSON object in a database. JavaScript function TEST ...

javascriptjqueryasp.netajax

Creating a custom jQuery tooltip plugin that dynamically follows the mouse's movements - but how can we accurately track the mouse's position?

Hello, I've created 2 functions - one to show a tooltip and another to hide it. These functions can take either ajax configuration or simple configuration. Here's an example: <style type="text/css"> .nube{display:none; height:auto ...

jquerytooltipmouse-position

Enhancing Dataset Quality: Incorporating Failed Results with Apify

We have implemented the Apify Web Scraper actor to execute a URL validation task that retrieves the input URL, the title of the page, and the HTTP response status code. Our testing includes 5 URLs - 4 valid ones and 1 non-existent URL. The successful resul ...

javascriptnode.jsweb-scrapingapify

Obtain the final array within an array composed of multiple arrays

My dilemma involves working with a dynamically generated array, where I need to extract only the values from the last array for aggregation purposes, discarding all others. Imagine a structure similar to this: let target = [] let data = [ [ { name: &apo ...

javascript

Learn how to connect a button to a webpage using jquery while also executing another function when clicked

I would like the showAll button click to redirect to another page where the showAll function is executed and the results are displayed on the new page. Additionally, I am looking for a way to modify the console.log statement to output the result on the new ...

jqueryhtml

Stop geocomplete from providing a street address based on latitude and longitude coordinates

Is there a way to prevent geocomplete from displaying the street portion of the address when passing lat and lng coordinates? Here's an example: If I pass these coordinates to geocomplete: var lat = '40.7127744' var lng = '-74.006059& ...

javascriptjquerygoogle-mapsgeolocationgeocomplete

Using Crawler4j, Jsoup, and JavaScript to retrieve modified attribute values

Currently, I am utilizing Crawler4j and Jsoup for web crawling and it's performing well with HTML text. However, some vital contents have default values hardcoded in CSS and then dynamically adjusted through JavaScript. For instance, there's a e ...

javascriptcssweb-crawlerjsoupcrawler4j

Ensure consistency across browsers by disabling zoom functionality on touchpad inputs while still permitting scrolling actions

I am looking for a way to disable 2-finger zoom on trackpad "wheel" events while still allowing 2-finger scroll. On mobile, I have already disabled zoom with: <meta name="viewport" content="initial-scale=1, minimum-scale=1, m ...

javascripthtmlmacosbrowsertrackpad

Tips for integrating a unique font into your PhoneGap project

I've been attempting to incorporate a custom font into my PhoneGap application, trying out two different methods I came across online. Unfortunately, neither of them seem to be effective when using PhoneGap 3 and Xcode 5. First method involves using ...

htmlcssxcodecordova