Ostatnio się bawiłem w coś podobnego, z tą różnicą, że po najechaniu tekst zmienia wielkość. Mój fragment css, choć jeszcze jest do drobnej poprawki, poniżej:
#menu ul {
display: block;
list-style: none;
width: 380px;
margin-top: 26px;
margin-left: auto;
margin-right: auto;
margin-bottom: 5px;
padding: 0;
font-size: 20px;
}
#menu ul:hover {
margin-top: 20px;
margin-bottom: 3px;
width: 395px;
}
#menu ul li {
display: inline;
list-style: none;
margin: 0;
padding: 25px 30px;
white-space: nowrap;
}
#menu ul li:hover {
font-size: 26px;
padding: 25px 18px 25px 23px;
margin-bottom: 0;
}
Dopasuj u siebie marginesy. Działa to tak, że element który przed powiększeniem ma margines tak by odległość od pozostałych elementów była taka jak po jego powiększeniu. A gdy na niego najedziesz i się powiększa, to jednocześnie margines maleje, lub całkowicie go nie ma. Musisz przetestować.
U mnie menu jest poziome i ma stałą szerokość, dlatego, że <ul>, też mam :hover i margines znikał po najechaniu nawet obok linku.
BTW. Sposób który przedstawiłem jest trochę na około. Początkowo szukałem rozwiązania, jak zmieniać parametry innego elementu, najeżdżając na całkiem inny. Znalazłem coś takiego:
a:hover div {
tu styl diva po najechaniu na link
}
Ale niestety nie chciało mi zadziałać. Może ktoś mi wyjaśnić w czym błąd?