I am having a simple problem with my CSS dropdown menu, I want to

Question

0

Asked: June 17, 20262026-06-17T14:59:53+00:00 2026-06-17T14:59:53+00:00

I am having a simple problem with my CSS dropdown menu, I want to

0

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