使子菜单下拉菜单比父 li 更宽答案

【问题标题】：Make submenu dropdown wider than parent li使子菜单下拉菜单比父 li 更宽
【发布时间】：2017-05-03 02:05:46
【问题描述】：

我通过使子菜单正常工作来完成这项工作，问题是我无法使子菜单的宽度比其父菜单宽。

当我悬停时，它一团糟，正如您在下面提供的小提琴链接中看到的那样

    .navigation {
  height: 35px;
  background: #333;
}
.navigation ul {
  margin: 0;
  padding: 0;
}
.navigation ul li {
  position: relative;
  display: inline;
}
.navigation ul li a {
  text-transform: uppercase;
  color: #fff;
  font-weight: 700;
  line-height: 35px;
  padding: 6px 8px;
  text-shadow: 0px 0px 1px #ff170f;
}
.navigation ul li a:hover {
  text-decoration: none;
  color: #FF3E36;
  border-bottom: 2px solid #FF3E36;
}
.navigation ul li:hover ul {
  left: 0;
}
.navigation ul .sub {
  position: absolute;
  z-index: 9999;
  left: -9999px;
  font-size: 13px;
}
.navigation ul .sub li {
  padding-top: -4px;
  float: none;
  background: #fff;
}
.navigation ul .sub li a {
  text-shadow: none;
  color: #333;
}
.navigation ul .sub li a:hover {
  color: #ff3e36;
  border-bottom: none;
  text-shadow: none;
}
.navigation ul .sub li:hover {
  background: #333;
}

【问题讨论】：

标签： css submenu

【解决方案1】：

有一个灵活的菜单.sub class http://jsfiddle.net/wR5L5/12/

.navigation {
  height: 35px;
  background: #333;
}

.navigation ul {
  margin: 0;
  position: relative;
  padding: 0;
}

.navigation ul li {
  display: inline;
  position: relative;
}

.navigation ul li a {
  text-transform: uppercase;
  color: #fff;
  font-weight: 700;
  line-height: 35px;
  padding: 6px 8px;
  text-shadow: 0px 0px 1px #ff170f;
}

.navigation ul li a:hover {
  text-decoration: none;
  color: #FF3E36;
  border-bottom: 2px solid #FF3E36;
}

.navigation ul li:hover ul {
  left: 0;
}

.navigation ul .sub {
  position: absolute;
  z-index: 9999;
  left: -9999px;
  float: left;
  width: auto;
  min-width: 100%;
  background: #999;
  font-size: 13px;
}

.navigation ul .sub li {
  padding-top: -4px;
  float: none;
  white-space: nowrap;
  clear: both;
  background: #fff;
}

.navigation ul .sub li a {
  text-shadow: none;
  color: #333;
  display: block;
  float: none;
  width: 100%;
}

.navigation ul .sub li a:hover {
  color: #ff3e36;
  border-bottom: none;
  text-shadow: none;
}

.navigation ul .sub li:hover {
  background: #333;
}

【讨论】：

【解决方案2】：

为子菜单设置宽度，使子菜单比主菜单更宽。

.navigation ul .sub {
  position: absolute;
  z-index: 9999;
  left: -9999px;
  width: 150px;
  font-size: 13px;
}

【讨论】：

谢谢大家，我通过添加空格找到了答案：nowrap; on .navigation ul .sub li