Creating a sleek navigation dropdown in HTML and CSS

Can someone provide guidance on creating a dropdown menu using just HTML and CSS? I am struggling to implement it for the "Others" list item. Here is the CSS code I have:

    nav {
        background-color: #01a6f0;
    }

    .navbar {
        list-style: none;
        float: right;
        margin-right: 10rem;
        margin-top: 2.6rem;
        margin-bottom: .5rem;
    }

    .navbar li {
        display: inline-block;
        padding: 1rem 1rem;
    }

    .navbar li:hover {
        background-color: #01A6FE;
    }

    .navbar li a {
        color: #fff;
    }

And here is the HTML code:

    <nav>
    <ul class="navbar">
        <li><a href="./home.html">Home</a></li>
        <li><a href="./puzzles.html">Puzzles</a></li>
        <li><a href="./stories.html">Stories</a></li>
        <li><a href="./goods.html">Goods</a></li>
        <li class="dropdown-link">Others
            <ul class="dropdown-menu">
                <li><a href="./story_show.html">Under The Sea</a></li>
                <li><a href="./story_show.html">Middle The Sea</a></li>
                <li><a href="./goods_show.html">Ovver The Sea</a></li>
            </ul>
        </li>
        </ul>
    </nav>
htmlcss

Answer №1

Check out this cool example using only HTML and CSS:

If you want to learn more about this code, you can visit the following website: https://css-tricks.com/solved-with-css-dropdown-menus/

a {
  text-decoration: none;
}

nav {
  font-family: monospace;
}

ul {
  background: darkorange;
  list-style: none;
  margin: 0;
  padding-left: 0;
}

li {
  color: #fff;
  background: darkorange;
  display: block;
  float: left;
  padding: 1rem;
  position: relative;
  text-decoration: none;
  transition-duration: 0.5s;
}
  
li a {
  color: #fff;
}

li:hover {
  background: red;
  cursor: pointer;
}

ul li ul {
  background: orange;
  visibility: hidden;
  opacity: 0;
  min-width: 5rem;
  position: absolute;
  transition: all 0.5s ease;
  margin-top: 1rem;
  left: 0;
  display: none;
}

ul li:hover > ul,
ul li ul:hover {
  visibility: visible;
  opacity: 1;
  display: block;
}

ul li ul li {
  clear: both;
  width: 100%;
}
<nav role="navigation">
  <ul>
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a>
      <ul class="dropdown">
        <li><a href="#">Sub-1</a></li>
        <li><a href="#">Sub-2</a></li>
        <li><a href="#">Sub-3</a></li>
      </ul>
    </li>
    <li><a href="#">Three</a></li>
  </ul>
</nav>

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

The modals are all tangled up and now spilling over the edges

The modals in the project seem to have stopped working for some unknown reason. They were functioning properly a few days ago, but now they appear to be broken. The container div is overflowing. Here is a snippet of HTML code I have been using since the ...

htmlbootstrap-4

What is the best way to insert a scroll into a section of a circular shape seamlessly?

Currently, my layout looks like this: https://ibb.co/iqaOXS However, I would like it to look more like this: https://ibb.co/eDkCRn The issue I'm facing is that the buttons are extending beyond the circular border. How can I prevent this from happeni ...

htmlcsswebscrollscrollbar

The reload button retains functionality while being present within an Angular2 form, allowing for a seamless user experience. The

After some observation, I have realized that when a button is placed inside a form but has no connection or function related to the form, such as a back or cancel button, it unexpectedly reloads the entire page. For instance, let's consider having ...

htmlcssangular

Resolving the transition effect problem in Tailwind CSS and Alpine JS

I have successfully implemented a basic button and modal combination using Tailwind and Alpine - check out the demo here: https://jsfiddle.net/0pso5cxh/ However, I am facing an issue with the leave transition. When the cancel button or close icon is click ...

csstailwind-cssalpine.js

The responsive navigation bar yielded an unforeseen outcome

Looking to create a responsive navigation bar similar to the one shown here My code successfully shows and hides the navigation items, but it's not updating the burger icon No console errors or warnings are present This is my HTML: <nav> ...

javascripthtmljquerycss

What is the correct way to call upon Bootstrap's CSS that was obtained through a Gradle dependency?

I'm having trouble referencing the Bootstrap library from the 'External Libraries' section in my project. In my build.gradle file, I included: compile group: 'org.webjars', name: 'bootstrap', version: '3.3.7' ...

csstwitter-bootstrapintellij-ideagradle

Transitioning the image from one point to another

I am currently working on a unique single-page website and I have been experimenting with creating dynamic background animations that change as the user scrolls. Imagine my website is divided into four different sections, each with its own distinct backgro ...

javascriptjquerycss

Struggling to display a function's output on a separate web page within a flask application

After spending close to 10 hours on this, I find myself stuck. My restaurant search app is functioning perfectly when I print the output to the terminal. However, I can't seem to figure out how to display it on a new page. Here's a snippet of my ...

pythonhtmlsqliteflask

AngularJs - Customizable dynamic tabs that automatically adapt

Below is the HTML code snippet: <div> <ul data-ng-repeat ="tab in tabs"> <li data-ng-class="{active: tab.selected == 'true'}" message-key="Tab"> </li> </ul> </div> As shown ...

javascripthtmlcssangularjstwitter-bootstrap

Steps to align table next to the paragraph tag

I am facing an issue trying to align a table inline with the p tag in my HTML code. I have attempted to make minimal changes to achieve this, but it is not working as expected. Here is the code I have tried: <p>ABCD</p> <table style = displ ...

htmlcss

Enhancing HTML table interactivity: Updating class of cells upon hover

While attempting to update the class on hover, I noticed that the class changes from 1 to hovering cells However, I want the class to change from 1 to currently hovered cells If moving the mouse from 1 to 10 and then to 2, the currently hovered cells wil ...

jqueryhtmlcss

What is the method for creating a HTML test report using Python incorporated into my code?

from selenium import webdriver import unittest, time, re import HTMLTestRunner class TestAutomation(unittest.TestCase): def setUp(self): self.errors = [] self.driver = webdriver.Chrome() self.driver.get("http: ...

pythonhtmltestingreport

Right-align the text in the title of the material card

Why isn't the CSS aligning my title of matcard to the right? <mat-card [ngStyle]="{ 'margin':'5px','height':'130px'}"> <mat-card-header> <mat-card-title [ngStyle]="{ 'text-align': ...

cssangularangular-materialmat-card

Having trouble getting the Bootstrap toggle checkbox to function properly within Angular 2 components?

Working on an Angular 2 project with Bootstrap, I recently tried to integrate a bootstrap-toggle checkbox into the UI. Despite following the instructions from this site, the checkbox was displayed as a normal checkbox instead of toggled. The Index.html cod ...

jqueryhtmltwitter-bootstrapangular

Tips for placing a large image within a small div

I have an image with a ratio of 1920*1300 that I want to be displayed on any device the website is viewed and cover the entire div. Check out my code below: .carousel { width: 100vw; height: 80vh; position: relative; } .carousel a { width: 1 ...

htmlcssimage

Creating iterative headings in R Quarto HTML

I'm in the process of creating an innovative Quarto HTML document. My goal is to generate dynamic headings within the HTML code. I have managed to achieve the following successfully: {r} #| output: asis star_wars_data = data(starwars) TESTING <- ...

htmlrquarto

Is there a way to restrict keyboard input on this date picker?

Can you review the following link and let me know which properties or events I should utilize in this scenario? https://codesandbox.io/s/charming-frost-qrvwe?file=/src/App.js ...

javascripthtmlreactjsdommaterial-ui

Multi selection dropdown feature in Angular failing to populate the options

I am working on a small Angular controller that manages a dropdown menu, with the second dropdown menu populating based on the selection made in the first one. Despite my best efforts, I can't seem to populate the dropdown menus with any content from ...

javascripthtmlangularjs

Display the original content of a previous div element after modifying it using JavaScript

I wanted to simplify the code. In my jsp file, when the document is loaded, the select values are filled in automatically. For instance: <div class="col-sm"> <label style="font-size: 20px;"><fmt:message key="cap.workplace"/>: </ ...

javascriptjqueryhtml

Challenges arise when utilizing CSS3 animations in conjunction with transitions triggered by toggling a JavaScript class

Struggling to activate an animation while updating a class using JavaScript for a PhoneGap app. Planning on utilizing -webkit- prefixes for compatibility. However, the animations are currently unresponsive in Chrome during testing, both when applied to th ...

javascripthtmlcsscordova