我一直在为我的本地侦察小组制作一个网站,在创建菜单时遇到了问题,因为我无法确定css不适用于前两个元素,但适用于后两个元素。有人能帮忙吗?我想这是因为悬停下降,但正如我所说,我不确定
谢谢,
Roshan
看看JSFiddle:在这里
这是HTML:
<div class="fluid menu" align="right">
<ul>
<li>
<a href="index.php">Home</a>
</li>
<li>
<a href="sections.php">Sections</a>
<ul>
<li>
<a href="Beavers.php">Beavers</a>
</li>
<li>
<a href="cubs.php">Cubs</a>
</li>
<li>
<a href="scouts.php">Scouts</a>
</li>
</ul>
</li>
<li>
USA Trip
</li>
<li>
Forum
</li>
</ul>
</div>
这是CSS:
.menu {
text-align: center;
margin: 2em;
}
ul {
text-align: center;
display: inline;
margin: 25px 0 27px 0;
padding: 0;
list-style: none;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
ul li {
font-family: 'Comfortaa', cursive;
color: #84a40b;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #fff;
cursor: pointer;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-ms-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
}
ul li:hover {
background: #4d2177;
color: #ffffff;
}
ul li ul {
padding: 0;
position: absolute;
top: 27px;
left: 0;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.4s;
-moz-transition: opacity 0.4s;
-ms-transition: opacity 0.4s;
-o-transition: opacity 0.4s;
-transition: opacity 0.4s;
}
ul li ul li {
background: #4d2177;
display: block;
color: #fff;
text-shadow: 0 -1px 0 #000;
}
ul li ul li:hover {
background: #672c9f;
}
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
ul li ul li ul{
padding: 0;
position: absolute;
top: 27px;
left: 0;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.4s;
-moz-transition: opacity 0.4s;
-ms-transition: opacity 0.4s;
-o-transition: opacity 0.4s;
-transition: opacity 0.4s;
}
ul li ul li ul li{
background: #4d2177;
display: block;
color: #fff;
text-shadow: 0 -1px 0 #000;
}
ul li ul li ul li:hover {
background: #672c9f;
}
ul li ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
很简单,因为前两项是链接,后两项不是。
我认为它们应该都是链接。
<li>
<a href="#">USA Trip</a>
</li>
<li>
<a href="#">Forum</a>
</li>
然后将颜色添加到链接中。
.menu ul li a {
color: #84a40b;
}
https://jsfiddle.net/q4p1s8yL/3/
CSS应用得很好。第一个项目和最后一个项目之间的区别在于,第一个项目中有链接。
链接已经有了自己的样式,因此您还需要为列表中的链接设置样式。
将此行添加到CSS:ul li a{ text-decoration:none; color:#84A40B }
中。以下是JSfiddle:https://jsfiddle.net/q4p1s8yL/1/
您需要样式化<a>
而不是<li>
。
这将为列表<ul>
中的所有锚点设置样式
ul a {
color: YOUR_COLOR;
}
问题是您正在为列表项<li>
定义颜色。你预计里面的所有东西都会有这种颜色。然而,默认的蓝色锚点<a>
颜色更具体。所以<li>
中的<a>
不会得到<li>
的颜色,因为它有自己的蓝色。
这是因为最后两个列表项没有锚,只需添加
ul li a{
color: #84a40b;
text-decoration:none;
}
ul li a:hover{
color: #ffffff;
}
此处演示