Question

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

Answer 1

我对您的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;
}

希望有帮助。

有没有一种方法可以使用CSS创建下拉菜单到我拥有的此水平菜单？我正在尝试在“文章”部分创建下拉菜单

1 个答案: