Imprimer la Page

Forum-webmaster

Technique - programmation => HTML / CSS / XHTML => Message commencé par: morava le le 02-05-2014 a 20:42:30

Titre: (resolut) Sous menu qui disparait au passage de la souris
Posté par: morava le le 02-05-2014 a 20:42:30

Bonjour à tous,

Je suis en train de refaire le panneau d'administration de mon site, malheureusement, il se presente un probléme, mon sous-menu disparait quand je descend la souris vers ce sous-menu:
http://www.morava-airlines.com/manager2/index.php (http://www.morava-airlines.com/manager2/index.php)

Pouvez-vous me dire ce qui louche dans mon CSS?

Cordialement !

Code:

.nav   {
float: left;
font-family: Tahoma;
font-size: 13px;
height: 38px;
position: relative;
width: 600px;
min-width: 600px;
z-index: 500;
}

.nav-divider   {
background: url(../images/shared/nav/divider.jpg) top no-repeat;
float: left;
height: 40px;
width: 15px;
}

.nav .table   {
display: table;
}

.nav .select,.nav .current   {
display: table-cell;
float: left;
list-style: none;
margin: 0 0px 0 0;
padding: 0;
white-space: nowrap;
}

.nav li   {
float: left;
height: auto;
margin: 0;
padding: 0;
}

.nav .select a   {
background: url(../images/shared/nav/pro_line_0.gif);
color: #fff;
display: block;
float: left;
height: 37px;
line-height: 35px;
padding: 0 20px 0 20px;
text-decoration: none;
white-space: nowrap;
}

.nav .current a   {
background: url(../images/shared/nav/pro_line_1.gif);
color: #fff;
display: block;
float: left;
height: 37px;
line-height: 35px;
padding: 0 0 0 10px;
text-decoration: none;
white-space: nowrap;
}

.nav .current a b   {
background: url(../images/shared/nav/pro_line_1.gif) right top;
display: block;
padding: 0 20px 0 10px;
}

.nav .select a:hover, .nav .select li:hover a   {
background: url(../images/shared/nav/pro_line_1.gif);
color: #fff;
cursor: pointer;
padding: 0 0 0 10px;
}

.nav .select a:hover b, .nav .select li:hover a b   {
background: url(../images/shared/nav/pro_line_1.gif) right top;
cursor: pointer;
display: block;
float: left;
padding: 0 20px 0 10px;
}

.nav .select_sub   {
display: none;
margin: 0 0 0 10px;
}

/* IE6 only */

.nav table   {
border-collapse: collapse;
font-size: 1em;
height: 0;
margin: -1px;
width: 0;
}

.nav .sub   {
display: table;
list-style: none;

/* margin: 0 auto; */
padding: 0;
}

.nav .sub_active .current_sub a, .nav .sub_active a:hover   {
background: transparent;
color: #fff;
}

.nav .select :hover .select_sub, .nav .current .show   {
   background: url(../images/shared/nav/back_0.gif);
   display: block;
   left: -9px;
   padding: 0;
   position: absolute;
   text-align: left;
   top: 39px;
   width: 853px;
   z-index: 100;
}

.nav .current .show   {
z-index: 10;
}

.nav .select :hover .sub li a, .nav .current .show .sub li a   {
background: transparent;
border: 0;
color: #fff;
font-weight: bold;
font-size: 13px;
display: block;
float: left;
margin: 0;
padding: 0 10px 0 10px;
white-space: nowrap;
}

.nav .current .sub li.sub_show a   {
background: url(../images/shared/nav/menus/back_1.gif);
color: #94b52c;
cursor: default;
}

.nav .select :hover .sub li a:hover, .nav .current .sub li a:hover   {
background: url(../images/shared/nav/menus/back_1.gif);
color: #94b52c;
visibility: visible;
}

Titre: Re:Sous menu qui disparait au passage de la souris
Posté par: morava le le 02-05-2014 a 20:44:54

Un exemple d'un menu avec son sous-menu :

Code:

<div class="nav-divider"> </div>


      <ul class="select"><li><a href=""><b>Admin</b></a>
      
      <div class="select_sub">
         <ul class="sub">
            <li><a href="http://www.morava-airlines.com/manager2/index.php?page=admin">Admin du Staff</a></li>
            <li><a href="http://www.morava-airlines.com/manager2/index.php?page=staff">Tracker du Staff</a></li>
            <li><a href="http://www.morava-airlines.com/manager2/index.php?page=settings">Setting de la VA</a></li>
<li><a href="http://www.morava-airlines.com/manager2/index.php?page=partners">Sponsors</a></li>
            <li><a href="http://www.morava-airlines.com/manager2/index.php?page=liveboard">liveboard</a></li>
            <li><a href="http://www.morava-airlines.com/manager2/index.php?page=downloads">Coins du téléchargement</a></li>
<li><a href="http://www.morava-airlines.com/manager2/index.php?page=website">Web site</a></li><li><a href="http://www.morava-airlines.com/manager/index.php?page=awards">Awards</a></li>

      </ul>
      </div>
      
      </li>
      </ul>

Titre: Re:Sous menu qui disparait au passage de la souris
Posté par: jean-f le le 03-05-2014 a 16:23:47

salut,

chez moi sous firefox ca marche nickel tu as essayé avec quel navigateur ??

version de firefox que j'utilise 28

Titre: Re:Sous menu qui disparait au passage de la souris
Posté par: morava le le 03-05-2014 a 18:22:36

Oui, ca été reglé cette aprés midi

J'ai changé :

top: 39px; -> 37px

Code:

.nav .select :hover .select_sub, .nav .current .show   {
   background: url(../images/shared/nav/back_0.gif);
   display: block;
   left: -20px;
   padding: 0;
   position: absolute;
   text-align: left;
   top: 37px;
   width: 1100px;
   z-index: 100;
}