我如何使用列表下拉菜單

Question

這是我的HTML和CSS。我想在懸停上做一個下拉菜單，但我不能打電話給相應的班級。如果有人能幫助我。我真的很感激。我不想使用JavaScript。我只想要在CSS中的解決方案。 P.S：我正在爲我的網站使用 模板。我只需要幫助調用頭文件類。

#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-->

代碼

Answer 1

^h！使用您的初始設置一個簡單的只CSS的下拉菜單，可以通過將嵌套ul與選擇到li並添加這些樣式進行：

#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-->

所以，我希望你有了這個想法，現在你可以玩耍，達到你想要的。您可以查看positioning上的一些材料，以創建更復雜的佈局。