CSS выпадающее меню, что я делаю неправильно?

Goodday,CSS выпадающее меню, что я делаю неправильно?

Я просто скопировать HTML и CSS из этого примера моих собственных документов: https://codepen.io/remilaudanski/pen/gbBGyN

Но проблема мной в том, что я получил следующие проблемы, которые вы не видите по ссылке:

Мой код, как тот же код, на примере:

/* Générales */ 
 

 
body {background-color : #ededed; font-family : "Open Sans", sans-serif;} 
 

 
h1 {padding: 40px; text-align: center; font-size: 1.5em;} 
 

 
li a {text-decoration : none; color : #2d2f31;} 
 

 
/* Nav */ 
 

 
nav { 
 
    width : 300px; 
 
    background: #d9d9d9; /* Couleur de fond des liens */ 
 
    margin : 40px auto; /* Marge à virer */ 
 
} 
 

 
/* Titre */ 
 

 
span { 
 
    padding : 30px; 
 
    background : #2d2f31; /* Couleur de l'en-tête */ 
 
    color : white; 
 
    font-size : 1.2em; 
 
    font-variant : small-caps; 
 
    cursor : pointer; 
 
    display: block; 
 
} 
 

 
span::after { 
 
    float: right; 
 
    right: 10%; 
 
    content: "+"; 
 
} 
 

 
/* Liste */ 
 

 
.slide { 
 
    clear:both; 
 
    width:100%; 
 
    height:0px; 
 
    overflow: hidden; 
 
    text-align: center; 
 
    transition: height .4s ease; 
 
} 
 

 
.slide li {padding : 30px;} 
 

 
/* Checkbox */ 
 

 
#touch {position: absolute; opacity: 0; height: 0px;}  
 

 
#touch:checked + .slide {height: 300px;} /* Hauteur à gérer en fonction du nombre de liens */

<!DOCTYPE html> 
 
<html> 
 

 

 

 
<head> 
 
<link rel="stylesheet" type="text/css" href="style.css"> 
 
</head> 
 

 

 

 
<body> 
 
<h1>CSS Dropdown Menu</h1> 
 

 
<nav> 
 

 
    <label for="touch"><span>titre</span></label>    
 
    <input type="checkbox" id="touch"> 
 

 
    <ul class="slide"> 
 
    <li><a href="#">Lorem Ipsum</a></li> 
 
    <li><a href="#">Lorem Ipsum</a></li> 
 
    <li><a href="#">Lorem Ipsum</a></li> 
 
    <li><a href="#">Lorem Ipsum</a></li> 
 
    </ul> 
 

 
</nav> 
 
</body> 
 

 

 

 
</html>

Где проблема? Что я делаю не так? Кто может мне помочь? Благодарю.

источник

2016-09-16 D. Ester

Вы забыли сбросить margin и padding:

* {margin: 0; padding: 0;}

Добавить это:

/* Générales */ 
 

 
* {margin: 0; padding: 0;} 
 

 
body { 
 
    background-color: #ededed; 
 
    font-family: "Open Sans", sans-serif; 
 
} 
 
h1 { 
 
    padding: 40px; 
 
    text-align: center; 
 
    font-size: 1.5em; 
 
} 
 
li a { 
 
    text-decoration: none; 
 
    color: #2d2f31; 
 
} 
 
/* Nav */ 
 

 
nav { 
 
    width: 300px; 
 
    background: #d9d9d9; 
 
    /* Couleur de fond des liens */ 
 
    margin: 40px auto; 
 
    /* Marge à virer */ 
 
} 
 
/* Titre */ 
 

 
span { 
 
    padding: 30px; 
 
    background: #2d2f31; 
 
    /* Couleur de l'en-tête */ 
 
    color: white; 
 
    font-size: 1.2em; 
 
    font-variant: small-caps; 
 
    cursor: pointer; 
 
    display: block; 
 
} 
 
span::after { 
 
    float: right; 
 
    right: 10%; 
 
    content: "+"; 
 
} 
 
/* Liste */ 
 

 
.slide { 
 
    clear: both; 
 
    width: 100%; 
 
    height: 0px; 
 
    overflow: hidden; 
 
    text-align: center; 
 
    transition: height .4s ease; 
 
} 
 
.slide li { 
 
    padding: 30px; 
 
} 
 
/* Checkbox */ 
 

 
#touch { 
 
    position: absolute; 
 
    opacity: 0; 
 
    height: 0px; 
 
} 
 
#touch:checked + .slide { 
 
    height: 300px; 
 
} 
 
/* Hauteur à gérer en fonction du nombre de liens */

<h1>CSS Dropdown Menu</h1> 
 

 
<nav> 
 
    <label for="touch"><span>titre</span></label> 
 
    <input type="checkbox" id="touch"> 
 

 
    <ul class="slide"> 
 
    <li><a href="#">Lorem Ipsum</a></li> 
 
    <li><a href="#">Lorem Ipsum</a></li> 
 
    <li><a href="#">Lorem Ipsum</a></li> 
 
    <li><a href="#">Lorem Ipsum</a></li> 
 
    </ul> 
 

 
</nav>

источник

2016-09-16 09:24:25

CSS выпадающее меню, что я делаю неправильно?

ответ

Смежные вопросы