58172

CSS Drop Down Menu : nav ul ul li Moved to Right

Question:

Here is an image :

<img alt="Drop Down Menu" class="b-lazy" data-src="https://i.stack.imgur.com/2qj9l.jpg" data-original="https://i.stack.imgur.com/2qj9l.jpg" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" /> The problem is the nav ul ul li moved to the right, as seen in the image, the tab "Contact" moved to the right, and thus the size was not what I want. I want the tab "Contact" to have the same size of "About".

This is the code of mine :

(HTML)

<nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a> <ul> <li><a href="#">Contact</a></li> </ul> </li> </ul> </nav>

(CSS)

/* Basic Styling */ a { text-decoration:none; color:inherit; } /* Menu Styling */ nav > ul > li { display:inline-block; width:200px; height:50px; line-height:50px; margin:0px; padding:0px; background-color:#dddddd; text-align:center; } nav ul li:hover { background-color:#aaaaff; } nav ul ul { display:none; } nav ul li:hover > ul { display:block; position:relative; } nav ul li:hover > ul > li { display:block; width:400px; height:80px; line-height:80px; padding:0px; margin:0px; text-align:center; position:relative; } nav ul li { float: left; } nav ul ul li, nav ul ul li a { display:block; } <h3><a href="http://jsfiddle.net/RM3Lz/" rel="nofollow">Fiddle</a></h3>

Answer1:

The problem was that the width and heights for the list items in the inner ul were different than the ones in the outer ul. To fix the indentation I set padding left to 0 for your inner ul.

The code below should work. Also here is a link to my codepen <a href="http://cdpn.io/ivJxc" rel="nofollow">http://cdpn.io/ivJxc</a>

/* Basic Styling */ a { text-decoration:none; color:inherit; } /* Menu Styling */ nav > ul > li { display:inline-block; width:200px; height:50px; line-height:50px; margin:0px; padding:0px; background-color:red; text-align:center; } nav ul li:hover { background-color:#aaaaff; } nav ul ul { display:none; padding-left:0; } nav ul li:hover > ul { display:block; position:relative; } nav ul li:hover > ul > li { display:block; width:200px; height:50px; line-height:50px; padding:0px; text-align:center; } nav ul li { float: left; }

Answer2:

Hi you need to add one additional rule, it is something like below

ul li ul { padding: 0; position: absolute; left: 0; width: 200px; }

simply add this rule in, then it will work. I consider it is better to give a rule on ul li ul, as it is the container of its li. Later, you can have more control over it.

check the jsFiddle <a href="http://jsfiddle.net/wenbolovesnz/J7T9M/" rel="nofollow">http://jsfiddle.net/wenbolovesnz/J7T9M/</a>

Answer3:

nav ul ul li{ width: 200px; background-color:#dddddd; } nav ul ul { padding: 0; display:none; }

Recommend

  • Duplicate jhipster project
  • Angular folder structure and component services
  • Azure SQL high wait time on “VDI_CLIENT_OTHER”
  • In phpunit what is the difference between __construct versus setup?
  • Building with Lombok's @Slf4j and Eclipse: Cannot find symbol log
  • Can you block a website from being in a browser's history?
  • Creating an alias for emacs in read-only mode on Linux in my .tcshrc file
  • Sapui5: How can I set an initial sort order in smarttable?
  • Condition on a timestamp column to select data for a year
  • WPF style for buttons
  • How do I get partial cell styling in excel using EPpplus?
  • exception thrown while building the java application using netbeans
  • Angular not getting response when it's a non-200
  • Carrierwave default image doesn't display
  • How to enable LDAP extension in XAMPP environment
  • Faces Servlet not parsing .xhtml pages in jsf 2. running on tomcat 7
  • How do you run a synchronous timer in C#?
  • Unsupported ciphersuite TLS_ECDHE_ECDSA_WITH_AES_128_GCM_SHA256
  • Android studio import problems. (Apktool)
  • Use AutoIt with java applications
  • VBScript InputBox and Help Files
  • What does “T extends Junk” mean in a generic class in Java?
  • How to select multiple items from a List view - JavaFX 8
  • Compiling multiple source files in Rcpp
  • Request Access Token in Postman for Azure Function App protected by Azure AD B2C
  • ASP.NET MVC 2 actions for the same route?
  • How do I use libcurl to printf a remote FTP directory listing?
  • Rotating Towards Path in OpenGL
  • concise way of flattening multiindex columns
  • How to clear a browser cache in Protractor
  • Can a PHP script be scheduled to run at a specific time or after a specific amount of time has expir
  • Android: Unable to detect vertical plane
  • reshape/remould data frame to create normalized bar chart and pie chart
  • Comma decimal separator is ignored by ASP.NET MVC model binder
  • calling IO Operations from thread in ruby c extension will cause ruby to hang
  • ReferenceError: TextEncoder is not defined