Connexion | Inscription | FAQ
Anonymous

Problème de menu vertical déroulant

+ Publier une réponse

2 messages Page 1 sur 1


Problème de menu vertical déroulant

par bruno.h.88 » Ven Déc 12, 2014 8:41 pm

Bonjour à tous,

J'ai un petit problème avec mon menu déroulant vertical.

Quand je survole niveau 1 le sous niveau 1 apparait, jusque-là c'est bon et quand je survole le sous niveau 1 et que j'arrive à la hauteur de niveau 2 c'est le sous niveau 2 qui apparait,

Voici le code de ma page html,

Merci de m'apporter votre aide.

Code: Tout sélectionner
<!DOCTYPE html>
      <html lang="fr">
           <head>
                <meta charset="utf-8" />

                <link href="../css/index.css" rel="stylesheet" type="text/css"/>
                <link rel="icon" type="image/png" href="favicon.png" />

                <meta name="robots" content="noindex">
           
            <title>Le footer ou le pied de page</title>
            <meta name="description" content="" />

            <style type="text/css">
           
/* Le menu */
#menu{
width: 80%;
float:right;
}

.navigation, .navigation ul {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0;
}               

.navigation li {
    position: relative;
    font-size: 16px;
}

.navigation a {
    display: block;
    width: 150px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: #50020a;
}

.navigation ul {
    display: none;
    left: -999em;
    position: absolute
}

.navigation li:hover > ul {
    display: block;
    left: 150px;
    top: 0
}

.navigation li li:hover > ul {
    left: 150px;
    top: 0
}

.navigation a:hover {
    color: #50020a;
    background: #ccc
}

a {
text-decoration: none;
color: #63c6ff;
}

/* ---------------------------------- */
           
            </style>
        </head>
    <body>
   
    <div id="menu">

<ul class="navigation">
    <li><a href="#">Acceuil</a></li>
    <li><a href="#">Niveau 1</a>
        <ul>
            <li><a href="#">Sous Niveau 1.1</a></li>
            <li><a href="#">Sous Niveau 1.2</a></li>
            <li><a href="#">Sous Niveau 1.3</a></li>
            <li><a href="#">Sous Niveau 1.4</a></li>
            <li><a href="#">Sous Niveau 1.5</a></li>
        </ul>
    </li>

    <li><a href="#">Niveau 2</a>
        <ul>
            <li><a href="#">Sous Niveau 2.1</a></li>
            <li><a href="#">Sous Niveau 2.2</a>
                <ul>
                    <li><a href="#">Sous-menu 2.2.1</a></li>
                    <li><a href="#">Sous-menu 2.2.2</a></li>
                    <li><a href="#">Sous-menu 2.2.3</a></li>
                    <li><a href="#">Sous-menu 2.2.4</a></li>
                    <li><a href="#">Sous-menu 2.2.5</a></li>
                </ul>
            </li>   
        </ul>
    </li>
   
    <li><a href="#">Niveau 3</a>
        <ul>
            <li><a href="#">Sous Niveau 3.1</a></li>
            <li><a href="#">Sous Niveau 3.2</a></li>
            <li><a href="#">Sous Niveau 3.3</a></li>
        </ul>
    </li>
</ul>
</div>


      </body>
</html>
Avatar de l’utilisateur

bruno.h.88

  • Messages: 1
  • Inscrit le: Ven Déc 12, 2014 8:35 pm

Re: Problème de menu vertical déroulant

par XainPro » Jeu Déc 18, 2014 5:34 am

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />

<link href="../css/index.css" rel="stylesheet" type="text/css"/>
<link rel="icon" type="image/png" href="favicon.png" />

<meta name="robots" content="noindex">

<title>Le footer ou le pied de page</title>
<meta name="description" content="" />

<style type="text/css">

/* Le menu */
#menu{
width: 80%;
float:right;
}

.navigation, .navigation ul {
margin: 0;
padding: 0;
list-style: none;
font-size: 0;
}

.navigation li {
position: relative;
font-size: 16px;
width: 150px;
}

.navigation a {
display: block;
width: 150px;
height: 30px;
line-height: 30px;
text-align: center;
background: #50020a;
}

.navigation ul {
display: none;
left: -999em;
position: absolute
}

.navigation li:hover > ul {
display: block;
left: 150px;
top: 0
}

.navigation li li:hover > ul {
left: 150px;
top: 0
}

.navigation a:hover {
color: #50020a;
background: #ccc
}

a {
text-decoration: none;
color: #63c6ff;
}

/* ---------------------------------- */

</style>
</head>
<body>

<div id="menu">

<ul class="navigation">
<li><a href="#">Acceuil</a></li>
<li><a href="#">Niveau 1</a>
<ul>
<li><a href="#">Sous Niveau 1.1</a></li>
<li><a href="#">Sous Niveau 1.2</a></li>
<li><a href="#">Sous Niveau 1.3</a></li>
<li><a href="#">Sous Niveau 1.4</a></li>
<li><a href="#">Sous Niveau 1.5</a></li>
</ul>
</li>

<li><a href="#">Niveau 2</a>
<ul>
<li><a href="#">Sous Niveau 2.1</a></li>
<li><a href="#">Sous Niveau 2.2</a>
<ul>
<li><a href="#">Sous-menu 2.2.1</a></li>
<li><a href="#">Sous-menu 2.2.2</a></li>
<li><a href="#">Sous-menu 2.2.3</a></li>
<li><a href="#">Sous-menu 2.2.4</a></li>
<li><a href="#">Sous-menu 2.2.5</a></li>
</ul>
</li>
</ul>
</li>

<li><a href="#">Niveau 3</a>
<ul>
<li><a href="#">Sous Niveau 3.1</a></li>
<li><a href="#">Sous Niveau 3.2</a></li>
<li><a href="#">Sous Niveau 3.3</a></li>
</ul>
</li>
</ul>
</div>


</body>
</html>
Avatar de l’utilisateur

XainPro

  • Messages: 3933
  • Inscrit le: Ven Fév 17, 2012 8:10 pm


+ Publier une réponse

Page 1 sur 1