html - 下拉菜单的子菜单推送 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 上添加一个宽度，这样 children 就不能从 parent 那里推高宽度

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