Discussion :

[rocketter]

Bonjour,

voilà j'ai des liens <a> contenus dans des <li> ; pour les <li> j'ai un border solid de 2px ; les <a> sont en display:block afin qu'ils prennent toute la place de leur conteneur.
J'attribue un hover aux <a> avec comme propriété un border de 2px mais d'une couleur différente aux <li> ; le souci est que lorsque je suis sur un lien, tout s'applique comme il faut mais cela entraine un décalage avec les liens situés à côté. Pour être plus clair j'ai préparé 2 screens :

au repos :


Ici avec le hover sur le lien A, les liens B, C et D vont se rapprocher du lien A et se remettre ensuite à leurs positions initiales une fois le lien A au repos :


Mon code html :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<nav class="menu-top">
    <ul>
        <li class="items">
            <a href="#">A</a>
        </li>
        <li class="items">
            <a href="#">B</a>
                 <ul>
                    <li>
                        <a href="#">Sous-lien 1</a>
                    </li>
                    <li>
                        <a href="#">Sous-lien 2</a>
                    </li>
                </ul>
        </li>
        <li class="items">
            <a href="#">C</a>
        </li>
        <li class="items">
            <a href="#">D</a>
        </li>
    </ul>
</nav>

et le CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
nav li a{
    display: block; /*Afin que le a prenne toute la place dispo*/
}
nav li a:hover {   
 
    background: linear-gradient(to bottom, #3a3a3c 0%,#68696d 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3a3a3c', endColorstr='#68696d',GradientType=0 ); /* IE6-9 */
    border: 2px solid #56565b;
    color: white;
    border-radius: 10px;
}
nav li:hover {
    border:none;
}
.items{
    display: inline-block;  
    position: relative;
}
.items ul{
    display: none;
}
.menu-top li:hover ul{
    display: block;
}
.items ul {
    position: absolute;
    top: 48px;
}

Merci par avance de m'aider