How do I just have the Dropdown on hover not effect the border bottom and not be indented?

Question

http://pvpers.net/new/ Is my test site for the base style.

I am trying to have the drop-down (example: Hover over "Games") appear BELOW the border-bottom I have for the navigation and not move the current border bottom. Also, I do not want the hover to effect the auto width of the Games li in the list nav.

And I know the indentation is due to the list being inside the other UL. Can I get rid of that without messing with margins, paddings, and etc?

You can see what I have done on the test site.

Thanks!!

Answer 1

You have to use absolute position for the second-level menu.

Try adding these.

nav ul#navul li {
  transition: all .15s ease-in-out;
  display: inline;
  float: left;
  border-bottom: 2px solid #8d0000;
  position: relative;
}
.secondlvl {
  position: absolute;
  top: 38px;
  left: -40px;
  width: 145px;
}