html - 全宽下拉

Question

我已经上网并找到了一个好看的下拉菜单，并一直在尝试编辑代码，以便下拉菜单是屏幕宽度的 100%，然后在里面有一个包装，它将我的链接保持在一个宽度960 像素。但我无法让下降为 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

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

工作演示

我添加了以下（非常简单）代码

移除

ul li{
   position:relative;
}

并添加到

ul{
   position:relative;
}

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

消除

ul li{
   position:relative;
}

添加

ul li .dropDown{
     top: 75px;
}

工作演示 2

希望这可以帮助，

祝你好运 ：）