Changement couleur menu sur passage de la souris

**Pelote2012** · 23/04/2013, 22h20

Bonjour,

Voilà j'ai un menu dans ma master:

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>
 
</title>
    <script type="text/javascript" src="/Scripts/jquery-1.9.1.js"></script>
    <link href="Styles/Site.css" rel="stylesheet" type="text/css" />
    <script>
               
    </script>
</head>
<body>
    <form method="post" action="Accueil.aspx" id="Form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTY1NDU2MTA1MmRkpa3F1cHyXF8jzsb72b10oSkbkEwQ37m4J+UZOP93xvM=" />
</div>
 
    <div>
        <div class="page">
            <div class="header">
                <center>
                    <div id="bandeau" style="position: relative; width: 700px; height: 100px; overflow: hidden;
                        padding-top: 10px;">
                    </div>
                </center>
            </div>
            <div class="main">
                <br />  <br />  
                <ul id="NavigationMenu" class="menu_deroulant">
                    <li><a href="/Accueil.aspx" title="">Accueil</a></li>
                    <li><a href="/Client/Details.aspx" title="">Descriptif détaillé</a></li>
                    <li><a href="/Client/Loisir.aspx" title="">Loisir et activités</a></li>
                    <li><a href="/Client/Reservation.aspx" title="">Tarifs et disponibilités</a></li>
                    <li><a href="/Client/Localisation.aspx" title="">Localisations</a></li>
                </ul>
 
    <br /> <br />
    <center>
 
 
    </center>
    <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />
 
            </div>
            <div class="clear">
            </div>
            <br />
        </div>
 
    </div>
    </form>
</body>
</html>

et mon CSS

Code css :

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
 
/* On place le texte de nos menu centré */
.menu_deroulant li
{
    display: table-cell;
    text-align: center;
    list-style-type: none;
    width: 170px;
    line-height: 19px;
}
 
.menu_deroulant a
{
    line-height: 19px;
    padding: 10px 10px 11px;
    font-family: Candara;
    font-size: medium;
}
 
.menu_deroulant a:visited, a:link
{
    color: #9DECFF;
    text-decoration: none;
}
 
.menu_deroulant li:hover
{
   background-color: #897E7E;
}
 
.menu_deroulant li ul
{
    list-style-type: none;
    display: none;
    position: absolute;
    background-color: #EC8D00;
    margin: 10px 0;
    border-color: rgba(0, 0, 0, 0.2);
    border-radius: 0 0 6px 6px;
    border-style: solid;
    border-width: 0 1px 1px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 2;
}

Le menu s'affiche comme je veux. Le problème est sur le li:hover.
En fait je voudrai que le changement de couleur se fasse sur toute la hauteur du menu. Je tourne en rond depuis un moment...

**Pelote2012** · 24/04/2013, 19h00

Bon j'ai fini par trouver...
Faut enlever la gestion de la taille sur les liens et la mettre sur le "li"
et gérer l'épaisseur du menu toujours dans le "li" et pas sur le "ul"

En code

Code css :

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
.menu_deroulant
{
    padding: 0;
    list-style-type: none;
    text-align: center;
    display: table;
    background-color: #423C3C;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), 0 -1px 0 rgba(0, 0, 0, 0.1) inset;
    border-radius: 4px 4px 0 0;
    z-index: 1;
    padding-right: 2px;
}
 
/* On place le texte de nos menu centré */
.menu_deroulant li
{
    display: table-cell;
    text-align: center;
    list-style-type: none;
    width: 170px;
    padding: 15px 10px 16px;
}
 
.menu_deroulant a
{
    line-height: 19px;
    font-family: Candara;
    font-size: medium;
}
 
.menu_deroulant a:visited, a:link
{
    color: #9DECFF;
    text-decoration: none;
}
 
.menu_deroulant li:hover
{
   background-color: #897E7E;
}
 
.menu_deroulant li ul
{
    list-style-type: none;
    display: none;
    position: absolute;
    background-color: #EC8D00;
    margin: 10px 0;
    border-color: rgba(0, 0, 0, 0.2);
    border-radius: 0 0 6px 6px;
    border-style: solid;
    border-width: 0 1px 1px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 2;
}

Changement couleur menu sur passage de la souris [UI]

jQuery

Vue hybride

Discussions similaires

Partager

Partager