我如何使用列表下拉菜单
问题描述：
这是我的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-->代码
答
^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上的一些材料，以创建更复杂的布局。
+0
非常感谢你。它工作得很好。 :) – beginner123
使用当前标记，切换无法使用CSS访问导航。你可以重构你的HTML吗？ – sol
会重组吗？ – beginner123