html - 全宽下拉

Question

我上网找到了一个好看的下拉菜单，并一直在尝试编辑代码，使下拉菜单占屏幕宽度的 100%，然后在里面有一个 wrapper ，可以容纳我的链接宽度为 960px。但我无法将下拉设置为 100%。

http://jsfiddle.net/jWSPz/

我认为问题出在某处...

 ul li ul {
  padding: 0;
  position: absolute;
  top: 48px;
  left: 0;
  width: 150px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
  }

这是我一直试图编辑的下拉菜单。 我想要它类似于这个下拉菜单

http://au.beatsbydre.com/

Answer 1

我已经设法让它达到菜单的宽度，我认为这是你想要的，

Working Demo

我添加了以下(如此简单)代码

已删除

ul li{
   position:relative;
}

并添加到

ul{
   position:relative;
}

如果你想要整个屏幕的宽度就这样做

删除

ul li{
   position:relative;
}

添加

ul li .dropDown{
     top: 75px;
}

Working Demo 2

希望对您有所帮助，

祝你好运:)