Наведите указатель мыши на ссылку

Question

При наведении указателя мыши на элемент, как я могу его сделать, чтобы граница не изменилась?

В CSS я ничего границ не делать,

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

Как вы можете видеть в этом JSFiddle, когда вы наведите курсор мыши на границу распространяется в подменю. Как это сделать? (Держать границу, где она)

JSFiddle

Answer 1

Вы делаете #SubMenu видимым, и SubMenu заворачивают в #ALink. Когда вы делаете дочерний элемент видимым, родительский размер изменяется, чтобы показать дочерний элемент.

Одним из решений может быть следующее. Конечно, вы должны очистки вашего CSS и сделать его красивым снова:

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

Проверьте это: http://jsfiddle.net/Zuct2/1/