gpt4 book ai didi

html - 我怎样才能使用列表制作下拉菜单

转载 作者:行者123 更新时间:2023-11-28 02:47:21 26 4
gpt4 key购买 nike

这是我的 html 和 css。我想在悬停时制作一个下拉菜单,但我无法调用相应的类(class)。如果有人可以帮助我。我真的很感激。而且我不想使用 javascript。我只想要 css 中的解决方案。 PS:我正在使用我的网站模板。我只需要帮助调用 header 类。

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

代码

最佳答案

哼!使用您的初始设置,可以通过将带有选项的嵌套 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;
}

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

所以,我希望你明白了,现在你可以尝试实现你想要的。您可以在positioning上查看一些资料需要创建更复杂的布局。

关于html - 我怎样才能使用列表制作下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46852605/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com