Nicole B. Nicole B. - 3 months ago 11
CSS Question

Dropdown menu- parent link jumps, child links off center

I have created a dropdown menu that I'm having trouble with a couple of things.

1) The first parent item jumps on hover.

2) The child items are not in line with the parent items and half of the dropdown box is transparent instead of the white background.

Any help is appreciated!



#dropdownmenu {
background-color: #ffffff;
width: 100%;
color: #009999;
letter-spacing: 2px;
font-size: 14px;
margin: 0px;
padding: 10px 0 0 0;
position: relative;
height: 45px;
border-top: 1px solid #009999;
border-bottom: 1px solid #009999;
}
#dropdown {
display: inline-block;
text-align: center;
margin: 0px;
padding: 0px;
}
#dropdown ul {
overflow: hidden;
float: left;
list-style: none;
margin: 0px;
padding: 0px;
border: 1px solid #f3f2ee;
}
#dropdown li {
list-style: none;
margin: 0px;
padding: 0px;
border-left: 0px solid #009999;
border-right: 0px solid #009999;
height: auto;
}
#dropdown li a,
#dropdown li a:link,
#dropdown li a:visited {
color: #009999;
display: inline-block;
font: normal 14px'Quicksand', Arial, Tahoma, Helvetica, FreeSans, sans-serif;
margin: 0px 0px 0px 0px;
padding: 9px 5px 10px 0px;
text-decoration: none;
}
#dropdown li a:hover,
#dropdown li a:active {
background: #ffffff;
color: #c6c1ae;
display: block;
text-decoration: none;
padding: 9px 5px 10px 0px;
}
#dropdown li {
float: left;
padding: 0px 66px;
}
#dropdown li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 220px;
margin: 0;
padding: 0px;
}
#dropdown li ul a {
width: 220px;
}
#dropdown li ul ul {
margin: 0px 0 0 0px;
}
#dropdown li:hover ul ul,
#dropdown li:hover ul ul ul,
#dropdown li.sfhover ul ul,
#dropdown li.sfhover ul ul ul {
left: -999em;
}
#dropdown li:hover ul,
#dropdown li li:hover ul,
#dropdown li li li:hover ul,
#dropdown li.sfhover ul,
#dropdown li li.sfhover ul,
#dropdown li li li.sfhover ul {
left: auto;
}
#dropdown li:hover,
#dropdown li.sfhover {
position: static;
}
#dropdown li li a,
#dropdown li li a:link,
#dropdown li li a:visited {
background: #ffffff;
width: 130px;
text-align: left;
color: #009999;
display: block;
font: normal 14px'Quicksand', Arial, Tahoma, Helvetica, FreeSans, sans-serif;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index: 9999;
border-bottom: 0px solid #009999;
}
#dropdown li li a:hover,
#dropdown li li a:active {
background: #ffffff;
color: #c6c1ae;
display: block;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}

<div id="dropdownmenu">
<ul id="dropdown">
<a class="menuDrop">
<li><a href="/">Item 1</a>
</li>
<li><a href="#">
Item 2</a>
<ul>
<li><a href="#">page 1</a>
</li>
<li><a href="#">page 2</a>
</li>
<li><a href="#">page 3</a>
</li>
<li><a href="#">page 4</a>
</li>
</ul>
</li>
<li><a href="#">Item 3</a>
</li>
<li><a href="#">
Item 4</a>
<ul>
<li><a href="#">page 1</a>
</li>
<li><a href="#">page 2</a>
</li>
<li><a href="#">page 3</a>
</li>
</ul>
</li>
<li><a href="#">Item 5</a>
</li>
</a>
</ul>
</div>




San San
Answer

Try this

#dropdownmenu {
  background-color: #ffffff;
  width: 100%;
  color: #009999;
  letter-spacing: 2px;
  font-size: 14px;
  margin: 0px;
  padding: 10px 0 0 0;
  position: relative;
  height: 45px;
  border-top: 1px solid #009999;
  border-bottom: 1px solid #009999;
}
#dropdown {
  display: inline-block;
  text-align: center;
  margin: 0px;
  padding: 0px;
}
#dropdown ul {
  overflow: hidden;
  float: left;
  list-style: none;
  margin: 0px;
  padding: 0px;
  border: 1px solid #f3f2ee;
}
#dropdown li {
  list-style: none;
  margin: 0px;
  padding: 0px;
  border-left: 0px solid #009999;
  border-right: 0px solid #009999;
  height: auto;
}
#dropdown li a,
#dropdown li a:link,
#dropdown li a:visited {
  color: #009999;
  display: inline-block;
  font: normal 14px'Quicksand', Arial, Tahoma, Helvetica, FreeSans, sans-serif;
  margin: 0px 0px 0px 0px;
  padding: 9px 5px 10px 0px;
  text-decoration: none;
}
#dropdown li a:hover,
#dropdown li a:active {
  background: #ffffff;
  color: #c6c1ae;
  }
#dropdown li {
  float: left;
  padding: 0px 66px;
}
#dropdown li ul {
  z-index: 9999;  
  position: absolute;
  left: -999em;
  height: auto;
  width: 220px;
  margin: 0;
  padding: 0px;
}
#dropdown li ul li {
  padding: 0 0;
}
#dropdown li ul a, #dropdown li ul a:link {
  width: 220px;  
  display:block;
}
#dropdown li ul ul {
  margin: 0px 0 0 0px;
}
#dropdown li:hover ul ul,
#dropdown li:hover ul ul ul,
#dropdown li.sfhover ul ul,
#dropdown li.sfhover ul ul ul {
  left: -999em;
}
#dropdown li:hover ul,
#dropdown li li:hover ul,
#dropdown li li li:hover ul,
#dropdown li.sfhover ul,
#dropdown li li.sfhover ul,
#dropdown li li li.sfhover ul {
  left: auto;
}
#dropdown li:hover,
#dropdown li.sfhover {
  position: static;
}
#dropdown li li a,
#dropdown li li a:link,
#dropdown li li a:visited {
  background: #ffffff;
  width: 230px;
  text-align: left;
  color: #009999;
  display: block;
  font: normal 14px'Quicksand', Arial, Tahoma, Helvetica, FreeSans, sans-serif;
  margin: 0;
  padding: 9px 12px 10px 12px;
  text-decoration: none;
  z-index: 9999;
  border-bottom: 0px solid #009999;
}
#dropdown li li a:hover,
#dropdown li li a:active {
  background: #ffffff;
  color: #c6c1ae;
  display: block;
  margin: 0;
  padding: 9px 12px 10px 12px;
  text-decoration: none;
}
<div id="dropdownmenu">
  <ul id="dropdown">
    <a class="menuDrop">
      <li><a href="/">Item 1</a>
      </li>
      <li><a href="#">
    Item 2</a>
        <ul>
          <li><a href="#">page 1</a>
          </li>
          <li><a href="#">page 2</a>
          </li>
          <li><a href="#">page 3</a>
          </li>
          <li><a href="#">page 4</a>
          </li>
        </ul>
      </li>
      <li><a href="#">Item 3</a>
      </li>
      <li><a href="#">
    Item 4</a>
        <ul>
          <li><a href="#">page 1</a>
          </li>
          <li><a href="#">page 2</a>
          </li>
          <li><a href="#">page 3</a>
          </li>
        </ul>
      </li>
      <li><a href="#">Item 5</a>
      </li>
    </a>
  </ul>
</div>

Comments