我试图做一个特定的风格导航菜单中挣扎,它需要一堆方形按钮/列表项,那么当你将鼠标悬停在某个项目时,该项目背后的背景更改颜色,在项目上方和下拉列表后面的体面高度,如下图所示。与特定的导航菜单设计
我的问题是,我很好奇,如果我这样做是最有效的方式,而且当我把鼠标悬停在最初的项目,它正在工作,但然后你去下拉项目和主/父项目之一消失在背景中。
代码:
body {
background-color: #00aeef;
}
.navBG {
background-color: #fff;
}
nav {
padding-top: 100px;
padding-left: 100px;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
display: inline-block;
text-align: center;
}
li {
display: inline-block;
display: inline;
float: left;
background-color: #00aeef;
border: solid 4px #fff;
width: 150px;
}
li a {
display: block;
padding: 10px 5px;
color: #fff;
text-align: center;
}
li a:hover {
color: #fff;
border: solid 4px #00ee98;
border-top: solid 100px #00ee98;
margin-top: -100px;
}
.droplinks {
position: absolute;
background-color: #00aeef;
min-width: 150px;
display: none;
margin-left: -2px;
}
.droplinks a {
padding: 10px;
display: block;
border: solid 2px #00ee98;
}
.droplinks a:hover {
color: #fff;
}
.dropbutton:hover .droplinks {
display: block;
}
<div class="container-fluid navBG">
<nav>
<ul>
<li><a href="">Home</a>
</li>
<li class="dropbutton"><a href="">Products</a>
<div class="droplinks">
<a href="">Widgets</a>
<a href="">Cogs</a>
<a href="">Gears</a>
</div>
</li>
<li class="dropbutton">
<a href="">Services</a>
<div class="droplinks">
<a href="">Handshakes</a>
<a href="">Winks</a>
<a href="">Smiles</a>
</div>
</li>
<li><a href="">Shop</a>
</li>
<li><a href="">Contact</a>
</li>
</ul>
</nav>
</div>
然后在悬停的菜单项,它改变这一点;
然而,当我然后去顶层项目弄乱了在上面的例子中的子菜单项。可以解决这个问题吗?
Codepen或小提琴? – Aslam
Theres a'Run Code Snippet'below the code。 – Fazy
我需要他们直接在它的工作:) – Aslam