Création d'un menu déroulant dans une barre de navigation existante

Question

Je travaille actuellement sur mon site Web et j'ai une barre de navigation existante. Le problème est que j'ai trop d'informations à partager sur une page. C'est pourquoi je voudrais mettre en place un menu déroulant dans la barre de navigation existante. J'ai essayé beaucoup de choses mais tout semble bousiller mon lay-out du css ou il supprime complètement la barre de navigation.

J'ai obtenu un code existant pour un menu déroulant mais je ne suis tout simplement pas capable de le mélanger avec le code CSS existant. J'ai eu ce code sur internet, ce n'est pas ma propriété.

Mon HTML:

 <div id="menu"> 
     <ul> 
      <li class="current_page_item"><a href="index.php" accesskey="1" title="">Home</a></li> 
      <li><a href="service.html" accesskey="2" title="">Onze service</a></li> 
      <li><a href="team.html" accesskey="3" title="">Ons team</a></li> 
      <li><a href="prijzen.html" accesskey="4" title="">Prijzen</a></li> 
      <li><a href="contact.php" accesskey="5" title="">Contact</a></li> 
     </ul> 
    </div> 

Mon CSS:

#menu 
{ 
    position: absolute; 
    right: 0; 
    top: 1em; 
} 

#menu ul 
{ 
    display: inline-block; 
} 

#menu li 
{ 
    display: block; 
    float: left; 
    text-align: center; 
    line-height: 60px; 
} 

#menu li a, #menu li span 
{ 
    display: inline-block; 
    margin-left: 1px; 
    padding: 0em 1.5em; 
    letter-spacing: 0.10em; 
    text-decoration: none; 
    font-size: 1.0em; 
    text-transform: uppercase; 
    outline: 0; 
    color: #212121; 
    background: #ECECEC; 
} 

#menu li:hover a, #menu li.active a, #menu li.active span 
{ 
} 

#menu .current_page_item a 
{ 
    background: #E24E2A; 
    color: #FFF; 
} 

#menu .icon 
{ 
} 

Menu déroulant:

#primary_nav_wrap 
{ 
    margin-top:15px 
} 

#primary_nav_wrap ul 
{ 
    list-style:none; 
    position:relative; 
    float:left; 
    margin:0; 
    padding:0 
} 

#primary_nav_wrap ul a 
{ 
    display:block; 
    color:#333; 
    text-decoration:none; 
    font-weight:700; 
    font-size:12px; 
    line-height:32px; 
    padding:0 15px; 
    font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif 
} 

#primary_nav_wrap ul li 
{ 
    position:relative; 
    float:left; 
    margin:0; 
    padding:0 
} 

#primary_nav_wrap ul li.current-menu-item 
{ 
    background:#ddd 
} 

#primary_nav_wrap ul li:hover 
{ 
    background:#f6f6f6 
} 

#primary_nav_wrap ul ul 
{ 
    display:none; 
    position:absolute; 
    top:100%; 
    left:0; 
    background:#fff; 
    padding:0 
} 

#primary_nav_wrap ul ul li 
{ 
    float:none; 
    width:200px 
} 

#primary_nav_wrap ul ul a 
{ 
    line-height:120%; 
    padding:10px 15px 
} 

#primary_nav_wrap ul ul ul 
{ 
    top:0; 
    left:100% 
} 

#primary_nav_wrap ul li:hover > ul 
{ 
    display:block 
} 

Merci à l'avance!

Answer 1

Votre emballage de navigation est le menu alors que dans le CSS en ligne, il est primary_nav_wrap, donc des cas d'échange de ceux-ci au menu.

Dans le html lui-même, des éléments de liste non ordonnés imbriqués sont utilisés pour les listes déroulantes, donc ajoutez-les sous l'élément de liste où vous avez besoin d'une liste déroulante.

Html:

<div id="menu"> 
    <ul> 
     <li class="current_page_item"><a href="index.php" accesskey="1" title="">Home</a><ul> 
     <li>sub1</li> 
     <li>sub2</li> 
     <li>sub3</li> 
     </ul> 
     <li><a href="service.html" accesskey="2" title="">Onze service</a></li> 
     <li><a href="team.html" accesskey="3" title="">Ons team</a></li> 
     <li><a href="prijzen.html" accesskey="4" title="">Prijzen</a></li> 
     <li><a href="contact.php" accesskey="5" title="">Contact</a></li> 
    </ul> 
</div> 

CSS:

#menu ul { 
display:inline-block; 
list-style:none; 
position:relative; 
float:left; 
margin:0; 
padding:0 
} 

#menu li { 
display:block; 
float:left; 
text-align:center; 
line-height:60px 
} 

#menu li a,#menu li span { 
display:inline-block; 
margin-left:1px; 
padding:0 1.5em; 
letter-spacing:.1em; 
text-decoration:none; 
font-size:1em; 
text-transform:uppercase; 
outline:0; 
color:#212121; 
background:#ECECEC 
} 

#menu .current_page_item a { 
background:#E24E2A; 
color:#FFF 
} 

#menu { 
margin-top:15px 
} 

#menu ul a { 
display:block; 
color:#333; 
text-decoration:none; 
font-weight:700; 
font-size:12px; 
line-height:32px; 
padding:0 15px; 
font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif 
} 

#menu ul li { 
position:relative; 
float:left; 
margin:0; 
padding:0 
} 

#menu ul li.current-menu-item { 
background:#ddd 
} 

#menu ul li:hover { 
background:#f6f6f6 
} 

#menu ul ul { 
display:none; 
position:absolute; 
top:100%; 
left:0; 
background:#fff; 
padding:0 
} 

#menu ul ul li { 
float:none; 
width:200px 
} 

#menu ul ul a { 
line-height:120%; 
padding:10px 15px 
} 

#menu ul ul ul { 
top:0; 
left:100% 
} 

#menu ul li:hover > ul { 
display:block 
} 

Voici un jsFiddle du code fusionné:

https://jsfiddle.net/o51pp5s6/