comment puis-je faire un menu déroulant en utilisant les listes

Question

Ceci est mon html et css. Je veux faire un menu déroulant sur le vol stationnaire mais je ne peux pas appeler la classe respective. Si quelqu'un peut m'aider avec ça. J'apprécierai vraiment cela. et je ne veux pas utiliser javascript. Je veux seulement la solution en CSS. P.S: J'utilise un modèle pour mon site web. J'ai juste besoin d'aide pour appeler la classe d'en-tête.

#navigation .navbar { 
 
    background: rgba(255, 255, 255, 0.952941); 
 
    border-radius: 0; 
 
    border-bottom: 0; 
 
    box-shadow: rgba(0, 0, 0, 0.298039) 0px 0px 3px; 
 
    padding-bottom: 8px; 
 
} 
 

 
#navigation .navbar-toggle { 
 
    margin-top: 20px; 
 
    background-color: #333; 
 
} 
 

 
#navigation .navbar-brand h1 { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
#navigation .navbar-nav.navbar-right li { 
 
    padding: 0 1px; 
 
} 
 

 
#navigation .navbar-nav.navbar-right { 
 
    margin-top: 28px 
 
} 
 

 
#navigation .navbar-nav.navbar-right li a { 
 
    color: #43484E; 
 
    font-family: 'Roboto', sans-serif; 
 
    font-size: 14px; 
 
    padding: 0; 
 
    text-transform: uppercase; 
 
    -webkit-transition: all .9s ease 0s; 
 
    -moz-transition: all .9s ease 0s; 
 
    -o-transition: all .9s ease 0s; 
 
    transition: all .9s ease 0s; 
 
    padding: 6px 15px; 
 
} 
 

 
#navigation .navbar-inverse .navbar-nav .active a, 
 
#navigation .navbar-inverse .navbar-nav .active a:focus, 
 
#navigation .navbar-nav.navbar-right li a:hover { 
 
    color: #fff; 
 
    background-color: #ce181e; 
 
}

<header id="navigation"> 
 
    <div class="navbar navbar-inverse navbar-fixed-top" role="banner"> 
 
    <div class="container"> 
 
     <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
      <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand" href="index.html"> 
 
      <h1><img src="images/logo.png" alt="logo"></h1> 
 
     </a> 
 
     </div> 
 
     <div class="collapse navbar-collapse"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
      <li class="scroll active"><a href="#navigation">About Us</a></li> 
 
      <li class="scroll"><a href="#about-us">Academics</a></li> 
 
      <li class="scroll"><a href="#services">Admissions</a></li> 
 
      <li class="scroll"><a href="#our-team">Campuses</a></li> 
 
      <li class="scroll"><a href="#portfolio">Student Life</a></li> 
 
      <li class="scroll"><a href="#clients">News & events</a></li> 
 
      <li class="scroll"><a href="#blog">Careers</a></li> 
 
      <li class="scroll"><a href="#contact">Contact</a></li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <!--/navbar--> 
 
</header> 
 
<!--/#navigation-->

Code

Answer 1

H! Utilisation de votre configuration initiale d'un simple menu déroulant CSS ne peut être faite en plaçant un ul imbriquée avec des options dans un li et l'ajout de ces styles:

#navigation .navbar-nav.navbar-right li ul { 
    padding: 0; 
    display: inline-block; 
} 
#navigation .navbar-nav.navbar-right li { 
    list-style: none; 
} 
#navigation .navbar-nav.navbar-right li ul li:not(:first-of-type) { 
    display: none; 
} 
#navigation .navbar-nav.navbar-right li ul:hover li { 
    display: block; 
} 
#navigation .navbar-nav.navbar-right li { 
    padding: 5px; 
} 

#navigation .navbar { 
 
    background:rgba(255, 255, 255, 0.952941); 
 
    border-radius: 0; 
 
    border-bottom: 0; 
 
    box-shadow: rgba(0, 0, 0, 0.298039) 0px 0px 3px; 
 
    padding-bottom: 8px; 
 
} 
 

 
#navigation .navbar-toggle{ 
 
    margin-top: 20px; 
 
    background-color: #333; 
 
} 
 

 
#navigation .navbar-brand h1{ 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
#navigation .navbar-nav.navbar-right { 
 
\t margin-top:28px 
 
} 
 
/* added styles start */ 
 
#navigation .navbar-nav.navbar-right li ul { 
 
    padding: 0; 
 
    display: inline-block; 
 
} 
 
#navigation .navbar-nav.navbar-right li { 
 
    list-style: none; 
 
} 
 
#navigation .navbar-nav.navbar-right li ul li:not(:first-of-type) { 
 
    display: none; 
 
} 
 
#navigation .navbar-nav.navbar-right li ul:hover li { 
 
    display: block; 
 
} 
 
#navigation .navbar-nav.navbar-right li { 
 
\t padding: 5px; 
 
} 
 
/* added styles end */ 
 
#navigation .navbar-nav.navbar-right li a { 
 
\t color: #43484E; 
 
\t font-family: 'Roboto',sans-serif; 
 
\t font-size: 14px; 
 
\t padding: 0; 
 
\t text-transform: uppercase; 
 
\t -webkit-transition: all .9s ease 0s; 
 
\t -moz-transition: all .9s ease 0s; 
 
\t -o-transition: all .9s ease 0s; 
 
\t transition: all .9s ease 0s; 
 
\t padding: 6px 15px; 
 
} 
 

 
#navigation .navbar-inverse .navbar-nav .active a, 
 
#navigation .navbar-inverse .navbar-nav .active a:focus, 
 
#navigation .navbar-nav.navbar-right li a:hover { 
 
\t color: #fff; 
 
\t background-color: #ce181e; 
 
}

<header id="navigation"> 
 
\t \t <div class="navbar navbar-inverse navbar-fixed-top" role="banner"> 
 
\t \t \t <div class="container"> 
 
\t \t \t \t <div class="navbar-header"> 
 
\t \t \t \t \t <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
\t \t \t \t \t \t <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> 
 
\t \t \t \t \t </button> 
 
\t \t \t \t \t <a class="navbar-brand" href="index.html"><h1><img src="images/logo.png" alt="logo"></h1></a> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="collapse navbar-collapse"> 
 
\t \t <ul class="nav navbar-nav navbar-right"> 
 
      <li class="scroll"><a href="#about-us">Academics</a></li> 
 
\t \t <li class="scroll active"> 
 
      <ul> 
 
       <li><a href="#navigation">About Us0</a></li> 
 
       <li><a href="#navigation">About Us1</a></li> 
 
       <li><a href="#navigation">About Us2</a></li> 
 
       <li><a href="#navigation">About Us3</a></li> 
 
      </ul> 
 
      </li> 
 
\t \t <li class="scroll"><a href="#services">Admissions</a></li> 
 
\t \t <li class="scroll"><a href="#our-team">Campuses</a></li> 
 
\t \t <li class="scroll"><a href="#portfolio">Student Life</a></li> 
 
\t \t <li class="scroll"><a href="#clients">News & events</a></li> 
 
\t \t <li class="scroll"><a href="#blog">Careers</a></li> 
 
\t \t <li class="scroll"><a href="#contact">Contact</a></li> 
 
\t </ul> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div><!--/navbar--> 
 
\t </header> <!--/#navigation-->

Alors, je vous souhaite J'ai eu l'idée et maintenant vous pouvez jouer pour réaliser ce que vous voulez. Vous pouvez vérifier du matériel sur positioning nécessaire pour créer des mises en page plus complexes.