CODEWITHSUNDEEP
htmlcss
Devon Helsdon
Devon Helsdon

Reputation: 13

CSS Dropdown Menu Sizing Issues

I am having a simple problem with my CSS dropdown menu, I want to make it so the dropdowns are equal length to the button above them. See example below, I just want to stretch the block to the length of the above block.

New user, can't upload image

If you use my jsFiddle link you can see my code, and edit it live. I'll post the code anyway just in case.. Note I am only posting the CSS stylesheet in here as the HTML is not part of the problem.

/* Dropdown Menu */

#nav {
float: right;
width: 600px;
height: 90px;
margin: 0 auto;
padding-top: 65px;
}

#nav ul {
  font-family: Arial, Verdana;
  font-size: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  float: right;
}
#nav ul li {
  display: block;
  position: relative;
  float: left;
}
#nav li ul { display: none; }
#nav ul li a {
  display: block;
  text-decoration: none;
  color: #ffffff;
  border-top: 1px solid #ffffff;
  padding: 5px 15px 5px 15px;
  background:  #3636FE;
  margin-left: 1px;
  white-space: nowrap;
}
#nav ul li a:hover { background: #3636FE; }
#nav li:hover ul {
  display: block;
  position: absolute;
}
#nav li:hover li {
  float: none;
  font-size: 11px;
}
#nav li:hover a { background: #3636FE; }
#nav li:hover li a:hover { background: #6868FE; }

Upvotes: 1

Views: 95

Answers (1)

Smuuf
Smuuf

Reputation: 6524

Fixed. (at least for Chrome+Firefox+IE9)

http://jsfiddle.net/QZWj3/4/

You had to add width: 100% to #nav li:hover ul and to #nav li:hover li

Upvotes: 3

Related Questions