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

ħ！使用初始设置，可以通过将带有选项的嵌套ul放入li并添加以下样式来制作简单的仅限css的下拉菜单：

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

＆＃13;

#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 {
	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 {
	padding: 5px;
}
/* added styles end */
#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;
}

＆＃13;

<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"><a href="#about-us">Academics</a></li> 
		  <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> 
		   <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-->

＆＃13;

所以，我希望你有了这个想法，现在你可以玩，实现你想要的。您可以查看创建更复杂布局所需的positioning上的一些材料。

如何使用列表

1 个答案: