Hovering over link

Question

When hovering over an item how do I make it so the border wont change?

In the css I don't do anything to the borders,

#ALink:hover #SubMenu {
    display: block;
    position: relative;
    top: 20px;
    left: -18px;
    }

As you can see in this JSFiddle, when you hover over A the border extends to the submenu. How do I make it not happen? (keep the border where it is)

JSFiddle

Answer 1

You are making #SubMenu visible, and SubMenu is wrapped in #ALink. When you make a child visible, parent re-sizes to show child element.

One solution can be as following. Of course you need to cleanup your css and make it beautiful again:

<a id="ALink" href="#">
  <label>A</label>
  <ul id="SubMenu">
    <li class="items-2">Item 1</li>
    <li class="items-2">Item 2</li>
    <li class="items-2">Item 3</li>
  </ul>
</a>

a > label {
  display: block;
  padding-left: 17px;
  margin-top: 5px;
  line-height: 40px;
  font-size: 20px;
  border: 1px solid #4f5058;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
  color: #f3f3f3;
}

Check it out: http://jsfiddle.net/Zuct2/1/