Ma barre de navigation ne tombera pas. Quelqu'un peut-il aider? J'ai créé une barre de navigation, mais maintenant j'essaie d'en faire une partie mais ça ne tombe pas. J'ai inclus à la fois mon code html et CSS.Pourquoi ma barre de navigation ne descendra pas?

Merci à l'avance

Mon code:

Css:

@charset "utf-8"; 
    /* CSS Document */ 

body { 
    margin - top: 0px; 
    margin - bottom: 0px; 
    margin - left: 0px; 
    margin - right: 0px; 
} 

html { 
    background: url(devbackground.jpg) no - repeat center center fixed; 
    - webkit - background - size: cover; 
    - moz - background - size: cover; 
    - o - background - size: cover; 
    background - size: cover; 
    filter: progid: DXImageTransform.Microsoft.AlphaImageLoader(src = 'devbackground.jpg', sizingMethod = 'scale'); 
    - ms - filer: "progid:DXImageTransform.Microsoft.AlphaImageLoader  (src='devbackground.jpg', sizingMethod='scale')"; 
} 

img.bg { 
     /*set rules to fill background */ 
    min - height: 100 %; 
    min - width: 1024px; 
     /*set up proportiante scaling */ 
    width: 100 %; 
    height: auto; 
     /*set up positioning */ 
    position: fixed; 
    top: 0; 
    left: 10; 
} 

    /*nav bar code */ 

ul# list - nav { 
    list - style: none; 
    width: 1200px; 
    margin - bottom: 20px; 
/*height of the nav bar */ 
    margin - left: 450px; 
    /
     margin-right: 450px; 
    margin-top: 20px; 
    padding-bottom: 0; 
    padding-left: 0; 
    padding-right: 0px; 
    padding-top: 0; 
} 

ul#list-nav li { 
    display: inline; 
} 

ul#list-nav li a { 
    /* nav bar boxes */
    text-decoration: none; 
    width: 200px; 
    height: auto; 
    background: #485e49; 
    color: #eee; 
    float: left; 
    text-align: center; 
    border-left: 1px solid #fff; 
    padding-bottom: 5px; 
    padding-left: 0; 
    padding-right: auto; 
    padding-top: 5px; 
} 

ul#list-nav li a:hover { 
    background: #a2b3a1; 
    color: #000; 
} 

#list-nav, #list-nav ul { 
    margin: 0 auto; 
    padding: 0; 
} 

#list-nav li { 
    float: left; 
    position: relative; 
    list-style: none; 
} 

#list-nav > li:hover > ul { 
    display: block; 
} 

#list-nav > li > ul { 
    display: none; 
    position: absolute; 
} 

#list-nav li a { 
    white-space: nowrap; 
}

Html:

<!doctype html> 
<html> 

<head> 

    <link rel="stylesheet" type="text/css" href="css.css"> 
    <meta charset="utf-8"> 
    <title>Welcome to dcoltgaming.co.uk</title> 
</head> 

<body> 

    <ul id="list-nav"> 

     <li><a href="/">Home</a> 
     </li> 
     <li><a href="#">Stuff</a> 

      <ul> 
       <li><a href="navbartest.html">NavBar Test</a> 
       </li> 
      </ul> 

     </li> 

     <li><a href="#">More Stuff</a> 
     </li> 
     <li><a href="#">Guess what? thats right more stuff!!!!!</a> 
     </li> 
     <li><a href="troll.html">Troll Faces</a> 
     </li> 
    </ul> 
</body> 

</html>K

<!doctype html> 
<html> 

<head> 

    <link rel="stylesheet" type="text/css" href="css.css"> 
    <meta charset="utf-8"> 
    <title>Welcome to dcoltgaming.co.uk</title> 
</head> 

<body> 

    <ul id="list-nav"> 

     <li><a href="/">Home</a> 
     </li> 
     <li><a href="#">Stuff</a> 

      <ul> 
       <li><a href="navbartest.html">NavBar Test</a> 
       </li> 
      </ul> 

     </li> 

     <li><a href="#">More Stuff</a> 
     </li> 
     <li><a href="#">Guess what? thats right more stuff!!!!!</a> 
     </li> 
     <li><a href="troll.html">Troll Faces</a> 
     </li> 
    </ul> 
</body> 
</html>

Source

2014-09-02 Daniel Colthart

Ne pas oublier de voter la bonne réponse! –

C'est parce que votre enfant UL a un positionnement absolu, techniquement est "tomber "mais comme l'UL secondaire est positionnée de manière absolue, elle couvre juste la barre de navigation initiale. Ajouter margin-top:29px; à votre UL secondaire et cela fonctionnera.

JSFiddle

Source

2014-09-02 16:44:01 APAD1

Merci pour votre aide –

De rien. – APAD1

Pourquoi ma barre de navigation ne descendra pas?

Répondre

JSFiddle

Questions connexes