全宽下拉

Question

我上网了，找到了一个漂亮的下拉菜单，并且一直在尝试编辑代码，所以下拉菜单是屏幕宽度的100％，然后在那里生病有一个包裹，将保持我的链接宽度为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

结帐此链接和演示也许您可以更改颜色：

1.Link：http://www.handy-html.com/create-a-simple-css-dropdown-menu/

1. 演示：http://www.handy-html.com/wp-content/uploads/2012/02/create-a-simple-css-dropdown-menu.html

Answer 2

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

Working Demo

我添加了以下（如此简单的）代码

除去

ul li{
   position:relative;
}

并添加到

ul{
   position:relative;
}

如果你想要它的全宽度，只需这样做

删除

ul li{
   position:relative;
}

ADD

ul li .dropDown{
     top: 75px;
}

Working Demo 2

希望这有助于，

祝你好运：）