CODEWITHSUNDEEP
csshtml
Jamie
Jamie

Reputation: 1094

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

Here is an image :

Drop Down Menu 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;
}

Fiddle

Upvotes: 0

Views: 2217

Answers (3)

Hanzallah Afgan
Hanzallah Afgan

Reputation: 734

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

Upvotes: 0

loveNZ
loveNZ

Reputation: 307

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 http://jsfiddle.net/wenbolovesnz/J7T9M/

Upvotes: 0

katzkode
katzkode

Reputation: 2001

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 http://cdpn.io/ivJxc 

/* 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;
}

Upvotes: 1

Related Questions