Can you provide step-by-step instructions for creating a customized CSS dropdown menu?

Need some help with my code. I have a header that I don't want to change much, but I'd like to add a dropdown menu without using a list. Here's my code:

<!-- Navigation Bar -->

<div class="navbar">
    <div class="button_l"><a href="Main_Page.html"> Home </a></div>
    <div class="button"><a href="About.html"> About </a></div>
    <div class="button"><a href="History.html"> History </a></div>
    <div class="button"><a href="Breakdown.html"> Breakdown </a></div>
    <div class="button_r"><a href="#"> Yeah </a></div>
</div>

CSS:

.navbar {
width: 90%;
height: 30px;
font-family: 'Press Start 2P', cursive;
font-size: 15px;
line-height: 25px;
position: absolute;
border: 2px solid;
border-radius: 250px;
background: url("../images/navbar.png") repeat-x;
margin-left: 50px;
}

.button a {
float: left;
width: 20%;
height: 30px;
text-align: center;
text-decoration: none;
}

.button_l a {
float: left;
width: 20%;
height: 30px;
text-align: center;
text-decoration: none;
}

.button_r a {
float: left;
width: 20%;
height: 30px;
text-align: center;
text-decoration: none;
}

.button a:hover {
float: left;
color: #fff;
width: 20%;
height: 30px;
text-align: center;
text-decoration: none;
background: url("../images/navbar_roll.png") repeat-x;
}

.button_l a:hover {
float: left;
color: #fff;
width: 20%;
height: 30px;
text-align: center;
text-decoration: none;
border-top-left-radius: 250px;
border-bottom-left-radius: 250px;
background: url("../images/navbar_roll.png") repeat-x;
}

.button_r a:hover {
float: left;
color: #fff;
width: 20%;
height: 30px;
text-align: center;
text-decoration: none;
border-top-right-radius: 250px;
border-bottom-right-radius: 250px;
background: url("../images/navbar_roll.png") repeat-x;
}

Want to add a dropdown menu for the "Breakdown" button without using ul and li tags. How can I achieve this with just HTML and CSS? Thanks!

No JavaScript, keep it simple and pure.

htmlcssdrop-down-menumenu

Answer №1

One possible approach is as follows

<div class="navbar">
    <div class="button button_l"><a href="Main_Page.html"> Home </a><div class="sub-menu">Menu here</div></div>
    <div class="button"><a href="About.html"> About </a></div>
    <div class="button"><a href="History.html"> History </a></div>
    <div class="button"><a href="Breakdown.html"> Breakdown </a></div>
    <div class="button button_r"><a href="#"> Yeah </a></div>
</div>

Include the below CSS styling

.button {
    position:relative; 
}
.sub-menu {
    position:absolute;
    top:100%;
    left:-10000px;
}
.button:hover .sub-menu {
    left:0;
}

Expected layout can be viewed at http://jsfiddle.net/ryJT4/1/

Answer №2

From a semantic standpoint, it is recommended to utilize a nav element instead of using a div along with an unordered list for each item. By doing so, you can make use of the hover functionality of the li element to easily toggle the display of your sub-navigation. Here is an example:

Code Example

<nav>
    <ul>
        <li><a href="#">One</a></li>
        <li><a href="#">Two</a></li>
        <li>
            <a href="#">Three</a>
            <ul>
                <li><a href="#">Four</a></li>
                <li><a href="#">Five</a></li>
            </ul>
        </li>
    </ul>
</nav>

CSS Styles

li {
    float: left;
    position: relative;
    margin-right: 20px;
}
ul ul {
    display: none;
    position: absolute;
    bottom: 1em;
}
ul li:hover ul {
    display: block;
}

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

Tips on redirecting a user to a specific page after they have made a selection without doing so immediately

I am a beginner in the world of coding. Currently, I am working on creating templates for an online software application. Users will have the option to select from different choices using radio buttons. However, I want to ensure that users are not redirect ...

javascripthtml

Modifying Copyright Feature in Footer

I am attempting to implement this function within my dark-colored footer: import Typography from '@material-ui/core/Typography'; function Copyright() { return ( <Typography variant="body2" color="textSecondary" align="center"> ...

javascripthtmlcssreactjsmaterial-ui

Discovering methods to store browser credentials securely in jQuery

I need to prevent the login button from being enabled when either the username or password fields are empty. Check out the code snippet below: $(document).ready(function(){ $('input').on('keyup blur mouseenter', function(e) { ...

javascriptjqueryhtmlspring-mvcspring-security

What is the best way to implement a function on every item within a specific class?

I'm new to coding and I have a website that showcases job listings. I want to create a function that dynamically changes the logo of a company based on the first 50 characters of the company name mentioned. The current function only works for the firs ...

javascripthtml

Why is Emmet's document snippet failing to include the "http-equiv='X-UA-Compatible'" meta tag?

While experimenting with the Emmet boilerplate in VS Code for HTML files, I noticed a discrepancy. Online tutorials show that there should be 3 meta tags when using Emmet, but when I try it in VS Code, I only see 2 meta tags. One meta tag seems to be missi ...

htmlvisual-studio-codeemmet

Hide the burger menu when a link is clicked

Is there a way to make my Bootstrap burger menu automatically close when the user clicks on a menu link, rather than having to click on the burger itself? I've tried using some JavaScript code but it ends up disabling the burger menu entirely. Can any ...

javascripthtmlcssmenubootstrap-5

Embedded HTML code within a table cell

How can I dynamically build an HTML string and display it inside a cell in reactJS' ag grid? Here's my example: function generateHtmlString(props) { let myHtmlString = "<span>a</span>"; myHtmlString += "--"; myHtmlString += "&l ...

htmlreactjsag-grid

Dynamically assigning column values based on object properties

I am currently utilizing the Ionic Framework along with its grid system that is reminiscent of Bootstrap. However, I believe my query leans more towards AngularJS than specific Ionic components. Here is what I have: <ion-col *ngFor="let col of row ...

javascripthtmlangularionic-frameworkionic2

Selecting options using AngularJS to parse through a list

I am faced with a challenge involving a collection of strings representing years. Here is an example: $scope.years = ["2001", "2002", "2003", ...]; My goal is to display these values in a select tag within a web page. However, whenever I attempt this usi ...

javascripthtmlangularjsrepeat

Steps for placing an image within the boundary of a rectangular div

My div has a width of approximately 730px and a height of 50px. I am looking to place an image at the bottom of the div, exactly where its height ends - after 50px. I have been considering a query to append the image at the bottom. One solution could be ...

csshtml

Calculate the sum of multiple user-selected items in an array to display the total (using Angular)

Within my project, specifically in summary.component.ts, I have two arrays that are interdependent: state: State[] city: City[] selection: number[] = number The state.ts class looks like this: id: number name: string And the city.ts class is defined as f ...

javascripthtmlarraysangulartypescript

Desktop users can enjoy the off-canvas menu feature, while mobile users will have access to the accordion menu option with Foundation 6

My goal is to customize my off-canvas menu in Foundation 6.3.1 so that it appears on desktop while displaying an accordion menu on mobile devices. On desktop, I want the off-canvas menu always visible (see example). For mobile, when the hamburger icon is ...

jquerycsszurb-foundationzurb-foundation-6

Make the navigation bar stay at the top of the page when scrolling past another element with a top position of 100vh

Trying to explain a unique concept here. I want a nav bar fixed in the position of top:100vh, so that as I scroll down and reach the next section, the navbar sticks at the top rather than staying stuck at the beginning with position:fixed top:0. The aim is ...

javascripthtmlcsssass

Incorporating a scrollbar when a div exceeds the bottom of the viewport

I am encountering an issue on my webpage with a <div> that contains a <table> with rows of varying heights: <html> <head></head> <body> <div> <table> <tr>... <tr>... ... </ ...

cssscrollbarhtml

Horizontal scrolling alone is proving to be ineffective

My current HTML code includes a table that is integrated with PHP Laravel. The data is being pulled from Admin.php to populate the table, resulting in it being wider than the screen window. To address this, I added a horizontal scroll bar for navigation pu ...

javascriptphpjqueryhtmlcss

Is it possible to incorporate an element using absolute positioning using jQuery or Javascript?

When trying to add a new element on the screen, I am facing an issue with the absolute positioning not working properly. Sample Code in Javascript function drawElement(e,name){ $("#canvas").append("<div id='" + name + "' class='e ...

javascriptcsscss-position

Adjust CKEditor's height within Vue.js

I recently began experimenting with integrating ckeditor5 into a Vue.js project. However, I encountered an issue where I couldn't manually adjust its height. Below is the code snippet I used - could you please review it and let me know if there are an ...

cssvue.jsvuejs2ckeditorvue-component

What is the best way to adjust the Material Drawer width in Reactjs to match the width of its children?

Currently, I am utilizing the Material-ui Drawer component to toggle the display of content on the right side of the screen. The functionality I am aiming for is that when the Drawer opens, it will shrink the existing content on the right without any overl ...

cssreactjstypescriptmaterial-uidrawer

Expanding the size of your Bootstrap 3 input box

https://i.sstatic.net/h7HpX.png Incorporating Bootstrap 3 into a Flask application, I have created a basic layout so far: <div class="container"> <div class="row"> <div class="col-xs-12"> <div class="content"> ...

csstwitter-bootstrap

How to send information to a modal component in ReactJS?

I'm feeling a bit lost here, maybe I'm missing something. What I am trying to achieve is a loop that populates an array with progress bar elements and then displays them with the relevant information. When a user clicks on a progress bar, the d ...

javascripthtmlreactjszurb-foundation