CSS下拉菜单：nav ul ul li移到右边 [英] CSS Drop Down Menu : nav ul ul li Moved to Right

问题描述

以下是一张图片：

问题是向右移动了 nav ul ul li ，如图所示，选项卡Contact移动到右边，因此大小不是我想要的。我希望联系人标签具有与关于相同的大小。

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".

这是我的代码：

（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

推荐答案

问题是，列表项的宽度和高度内部ul与外部ul中的不同。要修复缩进，我将填充内容设置为0为您的内部ul。

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.

下面的代码应该工作。此外，这里还有一个指向我的代码库的链接 http://cdpn.io/ivJxc

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

这篇关于CSS下拉菜单：nav ul ul li移到右边的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！