推送ul li的下拉菜单的子菜单

Question

这是正在发生的事情。

根据需要！

http://jsfiddle.net/U99Br/

所以我用这个下拉菜单制作这个网站，直到现在一切都很好，但在做我的下拉菜单时（我想做一些Netflix的菜单），我注意到了我的子-menu正在推送“联系人”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;
}