CODEWITHSUNDEEP
htmlcssdrop-down-menu
JBrookes
JBrookes

Reputation: 135

Full width drop down

I have gone online and found a good looking drop down menu and have been trying to edit the code so the drop down menu is 100% of the width of the screen and then inside that ill have a wrap which will hold my links at a width of 960px. But im unable to get the drop down to be 100%.

http://jsfiddle.net/jWSPz/

I think the problem is in here somewhere... 

 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;
  }

That is the drop down I've been trying to edit. I want it similar to this drop down

http://au.beatsbydre.com/

Upvotes: 1

Views: 3021

Answers (1)

iConnor
iConnor

Reputation: 20189

I have managed to get it the width of the menu witch i think is what you want,

Working Demo

i added the following (so simple) code

removed

ul li{
   position:relative;
}

and added to 

ul{
   position:relative;
}

if you want it the full width of the screen just do this

REMOVE 

ul li{
   position:relative;
}

ADD

ul li .dropDown{
     top: 75px;
}

Working Demo 2

Hope This Helps,

Good Luck :)

Upvotes: 1

Related Questions