Animating drop-right feature in a horizontal navigation menu

I want to design a horizontal menu with an animated effect that activates when hovering over first-level items. Here is the code snippet:

.nav {
  float: right;
}

.nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.nav ul li {
    position: relative;
}

.nav > ul > li {
  float: left;
  margin-left: 30px;  
}

.nav ul li a {
  text-decoration: none;
  display: inline-block;
  width: auto;
  color: #6E6C6C;
  transition: 1s ease;
}

.nav ul ul {
  position: absolute;
  top: 50%;
  left: 50%;
  display: none;
  width: 110px;
}

.nav ul li a:hover {
  color: #000;
  transform: translateX(-50%);
}

.nav > ul > li > a {
  padding: 15px 20px 15px 20px;
  width: auto;
}

.nav ul li:hover > ul {
  display: block;
}

If I hover out of the first-level item, it reverts to its initial state. How can I fix this issue? Should I consider using flexbox? Please show me a simple example.

css

Answer №1

You might consider updating the .nav ul li a:hover selector to .nav ul li:hover > a.

Check out the revised code snippet below:

.nav {
  float: right;
}

.nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.nav ul li {
    position: relative;
}

.nav > ul > li {
  float: left;
  margin-left: 30px;  
}

.nav ul li a {
  text-decoration: none;
  display: inline-block;
  width: auto;
  color: #6E6C6C;
  transition: 1s ease;
}

.nav ul ul {
  position: absolute;
  top: 50%;
  left: 50%;
  display: none;
  width: 110px;
}

.nav ul li:hover > a {
  color: #000;
  transform: translateX(-50%);
}

.nav > ul > li > a {
  padding: 15px 20px 15px 20px;
  width: auto;
}

.nav ul li:hover > ul {
  display: block;

}
<div class="nav">
  <ul>
    <li><a href="#">List Item 1</a>
      <ul>
        <li><a href="#">List Sub-Item 1</a></li>
        <li><a href="#">List Sub-Item 2</a></li>
        <li><a href="#">List Sub-Item 3</a></li>
      </ul>
    </li>
    <li><a href="#">List Item 2</a>
      <ul>
        <li><a href="#">List Sub-Item 1</a></li>
        <li><a href="#">List Sub-Item 2</a></li>
      </ul>
    </li>
    <li><a href="#">List Item 3</a></li>
    <li><a href="#">List Item 4</a></li>
  </ul>
</div>

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

How can I apply both Css and Bootstrap styles to an element in Next.js?

I'm having trouble incorporating the Bootstrap class sticky-top into another CSS style element. I attempted to achieve the same effect without Bootstrap by adding position: sticky, top: 0 in the CSS, but it didn't work as expected. The issue aris ...

cssnext.jsbootstrap-5

Customize WPBakery Accordion Background Color

I'm currently using WPBakery's Accordion section, version 5.4.7, to showcase a Gravity Form. I am attempting to modify the background color of the active accordion section to black. After exploring various forum examples, I have attempted to add ...

csswordpressaccordionbackground-colorvisual-composer

How to utilize CSS variable references across different files in React?

In my React project, I have integrated multiple variables that I would like to be able to access from other CSS files in order to maintain a unified codebase for specific UI configurations such as colors and buttons. However, I am uncertain whether these ...

cssreactjs

Arrangement of cards in a column

As someone who is new to working with CSS, Wordpress, and similar technologies, I am seeking assistance. I am struggling with creating card layouts. My goal is to achieve a layout similar to this, where the cards are displayed in two columns instead of ju ...

htmlcsswordpresslayout

Remove the right margin on the bootstrap container

I am currently working on creating dashboards using the Python library called Dash, and I have encountered an issue with Bootstrap components. Specifically, I am unable to remove the right margin from the container. I have tried using class_name='m-0& ...

pythoncsstwitter-bootstrapplotly-dashbootstrap-5

Displaying a hand cursor on a bar chart when hovered over in c3.js

When using pie charts in c3js, a hand cursor (pointer) is displayed by default when hovering over a pie slice. I am looking to achieve the same behavior for each bar in a bar chart. How can this be done? I attempted the CSS below, but it resulted in the h ...

javascriptcssd3.jsc3.js

Creating dynamic text overlay on images using CSS with adjustable position

I have a collection of 11 divs, with 8 containing images and 3 displaying ':'. https://i.sstatic.net/Vfljg.png All 11 boxes are enclosed within a class called "timer", structured as shown below: <div class="timer"> <div><img&g ...

htmlcss

Tips for maintaining the default arrow icon for HTML select elements

While styling a drop down in Firefox on Mac OS X, I noticed that the arrow changes from the standard look to an unattractive downward arrow. How can I maintain the standard form element with the appealing up and down arrows, instead of the unsightly downwa ...

htmlcsscross-browser

AngularJS incorporating dynamic stylesheets

I am facing a challenge with my AngularJS application as it fetches data via an API and dynamically builds a webpage. Typically, I rely on ng-style for dynamic styling, but now I need to utilize the nth-of-type attribute which can only be applied in a CSS ...

cssangularjs

Achieving a Full-Screen Three.js Canvas in React: A step-by-step guide on spanning the view height and width of a webpage

I've been working on tweaking the code found in this particular example: How to connect Threejs to React? This is the snippet of code I am focusing on: import React, { Component } from 'react' import * as THREE from 'three' clas ...

javascriptcssreactjsthree.js

Using div tags may cause rendering issues

I am trying to use multiple div tags with webkit borders, but for some reason only the one called 'Wrapper' is displaying properly. Here is my code: .wrapper { margin: 20px auto 20px auto; width: 800px; background: url('images/background_1. ...

csshtmltags

Guide to creating a contenteditable div that automatically generates smart quotes instead of traditional dumb quotes

I've observed that when I write in Google Docs, I get smart quotes. However, when I create contenteditable divs on my own, I only see dumb quotes. Is there a way to make my contenteditable divs display smart quotes instead of dumb quotes? ...

javascripthtmlcss

What is the best way to adjust the spacing in my bootstrap Navbar? I am struggling to make it stretch to the entire width of the screen

I am currently working on a website project where I want to have a navigation bar that spans the full width of the screen with a black background. I also need the links to be centered and evenly distributed within the navbar. My main issue right now is re ...

htmlcssnavbarbootstrap-5spacing

Elements that possess identical class attributes yet exhibit dynamic behavior

I'm currently facing challenges with dynamically generated elements. I am working on a page for my website that will show a list of users (data provided by the controller). Each user is represented within a div, containing two h3 tags displaying the u ...

javascriptjqueryhtmlcss

Issue with vertical cell alignment in MUI x-data-grid persists following the latest update to version 7.2.0

After updating my MUI app to the latest npm packages version, specifically upgrading x-data-grid from 5.17.9 to 7.2.0, I encountered an issue. In my application, I utilize a grid where certain columns are populated using the renderCell property: const cel ...

cssreactjstypescriptmaterial-ui

Keep moving the box back and forth by pressing the left and right buttons continuously

Looking to continuously move the .popup class left and right by clicking buttons for left and right movement. Here is the js fiddle link for reference. This is the HTML code structure: <button class="right">Right</button> <button class="l ...

javascriptjqueryhtmlcssjquery-animate

How to perfectly center an element with a specified aspect ratio

I am experiencing a strange problem when attempting to center an element with aspect-ratio applied. I thought it would work similar to centering an image, but I keep getting stuck with an element of 0px x 0px. https://codepen.io/richardcool/pen/xxeKOwp I ...

htmlcssaspect-ratio

"Embedding social content within an iframe may result in the element being unresponsive

I have a setup where I'm utilizing social embed to include Instagram content in the footer. When I insert the provided iframe code, the layout looks correct but the content is not clickable. <iframe src="https://embedsocial.com/facebook_album ...

javascripthtmlcssiframebootstrap-4

Encountering a predicament when attempting to retrieve an image from an alternative

[index.jsp][5] style.css [problem][6] [folder hierarchy][7] Although everything runs smoothly when the file is located in the css directory, it fails to show any images if placed in the images folder. Kindly provide assistance. ...

htmlcssjsp

What could be causing the image to not display as completely rounded-full in NextJS13 when using tailwind?

I tried to make an image round using the Image Component in NextJS13, but I ran into some issues Additionally, when I styled it with Tailwind, the full style didn't seem to take effect <div className="h-64 w-96 relative"> <I ...

cssimagenext.jstailwind-cssnext.js13