在Article的anchor元素上,我想创建一个下拉菜单样式,但是当我尝试使用W3School的下拉教程修改代码时,它将无法与现有的HTML和CSS代码一起使用。我已将div类添加到我的班级中,希望可以与“文章”部分一起使用。
这是我在HTML中使用的内容:
<div class="mainNav">
<ul>
<li><a title="Home page" class="current">Home</a></li>
<div class="dropdown">
<button class="dropbtn">
<li><a href="article.html" title="Read articles">Articles <i class="fa fa-caret-down"></i></a></li>
</button>
<div class="dropdown-content">
<li><a href="#movieReview1">Movie Review 1</a> </li>
<li><a href="#movieReview2">Movie Review 2</a> </li>
</div>
</div>
</ul>
</div>
这是我仅用于水平菜单的CSS,不确定如何开始创建下拉菜单。
CSS:
/*Horizontal menu styles*/
.mainNav {
background: #F2B279;
height: 2.3em;
}
ul, li {
margin: 0;
padding: 0;
list-style: none;
display: inline-block;
}
ul {
background: #0B8CBF;
height: 2em;
width: 100%;
text-align: center;
}
li a {
display: block;
line-height: 2em;
padding: 0 2em;
color: white;
text-decoration: none;
}
li a:hover {
background: #F2B279;
height: 2em;
position: relative;
border-radius: .5em .5em 0 0;
}
.current, a:hover.current {
background: #F2B279;
color: #eee;
padding-top: .3em;
position: relative;
top: -.3em;
border-radius: .5em .5em 0 0;
position: relative;
top: -.3em;
border-bottom: .3em solid #F2B279;
cursor: default;
}
答案 0 :(得分:0)
我对您的html进行了一些更改,以使其更加标准和清晰,因为div
不能用作<ul>
标记的直接子代,也不能用作您主要的<ul>
缺少结束标记,对css所做的更改很少,也可以使鼠标悬停时显示下拉列表。
尝试以下代码:
HTML
<div class="mainNav">
<ul>
<li><a title="Home page" class="current">Home</a></li>
<li class="dropdown">
<a href="article.html" title="Read articles">Articles <i class="fa fa-caret-down"></i></a>
<ul class="dropdown-content">
<li><a href="#movieReview1">Movie Review 1</a> </li>
<li><a href="#movieReview2">Movie Review 2</a> </li>
</ul>
</li>
</ul>
</div>
CSS
.mainNav {
background: #F2B279;
height: 2.3em;
}
ul, li {
margin: 0;
padding: 0;
list-style: none;
display: inline-block;
}
ul {
background: #0B8CBF;
width: 100%;
text-align: center;
}
li{
position:relative;
}
.mainNav > ul{
display:flex;
height: 2em;
justify-content:center;
}
.mainNav > ul > li:hover .dropdown-content{
visibility:visible;
opacity:1;
}
ul li a {
display: block;
line-height: 2em;
padding: 0 2em;
color: white;
text-decoration: none;
}
li a:hover {
background: #F2B279;
height: 2em;
position: relative;
border-radius: .5em .5em 0 0;
}
.current, a:hover.current {
background: #F2B279;
color: #eee;
padding-top: .3em;
position: relative;
top: -.3em;
border-radius: .5em .5em 0 0;
position: relative;
top: -.3em;
border-bottom: .3em solid #F2B279;
cursor: default;
}
.dropdown-content{
position:absolute;
top:100%;
left:0;
min-width:200px;
visibility:hidden;
opacity:0;
}
.dropdown-content li{
display:block;
}
希望有帮助。