html - 下拉菜单的子菜单推 ul li

Question

这就是正在发生的事情。

按要求！

http://jsfiddle.net/U99Br/

所以我正在制作这个带有下拉菜单的网站，到目前为止一切都很好，但是在做我的下拉菜单时（我想做一些类似于 Netflix 的菜单），我注意到我的子菜单是将“联系人”li标签300px推开（这是它的长度）。

这是我的代码：

#menu,
#menu ul,
#menu li {
 margin: 0;
 padding: 0;
 list-style: none;
 }

#menu a {
 text-decoration: none;
  }

#menu {
 height: 60px;
 width: auto;
  }

#menu > ul > li {
 float: left;
 margin-left: 15px;
 position: relative;
  }

#menu > ul > li > a {
 color: #fff;
 text-shadow: 1px 1px 5px #737373;
 font-size: 20px;
 line-height: 60px;
 padding: 15px 20px;
  }

#menu > ul > li > a:hover {
 color: #000;
  }

#menu > ul > li > ul {
 opacity: 0;
 visibility: hidden;
 display: none;
 background-color: #fff;
 text-align: left;
 height: auto;
 box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
 width: 300px;
  }

#menu > ul > li:hover > ul {
 display: block;
 border: none;
 visibility: visible;
 opacity: 1;
  }

#menu > ul > li > ul > li {
 display: block;
 content: '';
  }

#menu > ul > li > ul > li > a {
 font-size: 12px;
 color: #000;
 display: block;
 text-shadow: none;
  }

#menu > ul > li > ul > li > a:hover {
 color: #0AB3FC;
  }

#menu > ul ul > li {
  position: relative;
}

我还没有发现我的编码有什么问题！

Answer 1

将宽度添加到第一个 ul li，这样孩子就不能从父母那里推高宽度

#menu > ul > li {
   width:300px; /* add with here */
   float: left;
   margin-left: 15px;
   position: relative;
}