CSS下拉菜单：导航ul li移到右侧

这是一张图片：

问题是

nav ul li

向右移动，如图所示，选项卡“Contact”向右移动，因此大小不是我想要的。我希望“联系人”选项卡的大小与“大约”相同

这是我的密码：

（HTML）

---

问题是内部ul中列表项的宽度和高度与外部ul中的不同。为了修复缩进，我将内部ul的padding left设置为0

下面的代码应该可以工作。这里还有一个指向我的代码笔的链接

---

您好，您需要添加一个附加规则，如下所示

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

只需添加此规则，它就会工作。我认为最好在UL LIL上给出一个规则，因为它是它的容器。以后，你可以对它有更多的控制

检查JSFIDLE

---

实际上，我怎样才能使

导航ul

显示在

导航ul

的右侧？我不知道你的意思。是否要为导航添加其他级别？目前没有导航ul.Yes。这就是我的意思。我只想在菜单中添加另一个级别，而不是设置

左填充：0px对于li，将其设置为要向右推动图元的距离。
/* 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;
}

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

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

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