在我的网站上，我使用了一个模板来制作我的导航栏。我的目标是对其进行自定义，使其看起来像 BBC 导航栏。 (关联: http://www.bbc.co.uk ) 有什么方法可以改变使用中的过渡元素的边框底部/下划线颜色吗？如果是这样，您能否修改代码，使其像 BBC 菜单栏一样工作。
谢谢! :D
代码:
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Open Sans;
}
#cssmenu {
background: #f96e5b;
width: auto;
}
#cssmenu ul {
list-style: none;
margin: 0;
padding: 0;
line-height: 1;
display: block;
zoom: 1;
}
#cssmenu ul:after {
content: " ";
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
#cssmenu ul li {
display: inline-block;
padding: 0;
margin: 0;
}
#cssmenu.align-right ul li {
float: right;
}
#cssmenu.align-center ul {
text-align: center;
}
#cssmenu ul li a {
color: #ffffff;
text-decoration: none;
display: block;
padding: 15px 25px;
font-family: 'Open Sans', sans-serif;
font-weight: 700;
text-transform: uppercase;
font-size: 14px;
position: relative;
-webkit-transition: color .25s;
-moz-transition: color .25s;
-ms-transition: color .25s;
-o-transition: color .25s;
transition: color .25s;
}
#cssmenu ul li a:hover {
color: #00ff00;
}
#cssmenu ul li a:hover:before {
width: 100%;
}
#cssmenu ul li a:after {
content: "";
display: block;
position: absolute;
right: -3px;
top: 19px;
height: 6px;
width: 6px;
background: #ffffff;
opacity: .5;
}
#cssmenu ul li a:before {
content: "";
display: block;
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 0;
background: #333333;
-webkit-transition: width .25s;
-moz-transition: width .25s;
-ms-transition: width .25s;
-o-transition: width .25s;
transition: width .25s;
}
#cssmenu ul li.last > a:after,
#cssmenu ul li:last-child > a:after {
display: none;
}
#cssmenu ul li.active a {
color: #333333;
}
#cssmenu ul li.active a:before {
width: 100%;
}
#cssmenu.align-right li.last > a:after,
#cssmenu.align-right li:last-child > a:after {
display: block;
}
#cssmenu.align-right li:first-child a:after {
display: none;
}
@media screen and (max-width: 768px) {
#cssmenu ul li {
float: none;
display: block;
}
#cssmenu ul li a {
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-bottom: 1px solid #fb998c;
}
#cssmenu ul li.last > a,
#cssmenu ul li:last-child > a {
border: 0;
}
#cssmenu ul li a:after {
display: none;
}
#cssmenu ul li a:before {
display: none;
}
}
.dateOfPost {
font-weight: bold;
text-decoration: underline;
}
</style>
<script>
</script>
<title>Ryan Zhang's Blog</title>
</head>
<body>
<h1>
Ryan Zhang's Blog
</h1>
<div id='cssmenu'>
<ul>
<li class="active">
<a href="home.html"><span>Home</span></a>
</li>
<li>
<a href="aboutMe.html"><span>About Me</span></a>
</li>
<li>
<a href="tipsNTricks.html"><span>Tips 'n' Tricks</span></a>
</li>
<li>
<a href="inspiration.html"><span>Inspirational Quotes and Words</span></a>
</li>
<li>
<a href="timeline.html"><span>Timeline of Me</span></a>
</li>
<li>
<a href="contact.html"><span>Contact</span></a>
</li>
</ul>
</div>
<hr>
<p class="dateOfPost">
Website Goes Live!<br>
Upload Date:<br>
25/10/15
</p>
<p class="posts">
Wooh! The website is live now!<br>
Stick around for:<br>
Kind Words,<br>
Interesting Posts,<br>
Helpful Articles<br>
And Cool Facts!<br>
<br>
-Ryan
</p>
<hr>
</body>
</html>CSS 导航条码:
#cssmenu {
background: #f96e5b;
width: auto;
}
#cssmenu ul {
list-style: none;
margin: 0;
padding: 0;
line-height: 1;
display: block;
zoom: 1;
}
#cssmenu ul:after {
content: " ";
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
#cssmenu ul li {
display: inline-block;
padding: 0;
margin: 0;
}
#cssmenu.align-right ul li {
float: right;
}
#cssmenu.align-center ul {
text-align: center;
}
#cssmenu ul li a {
color: #ffffff;
text-decoration: none;
display: block;
padding: 15px 25px;
font-family: 'Open Sans', sans-serif;
font-weight: 700;
text-transform: uppercase;
font-size: 14px;
position: relative;
-webkit-transition: color .25s;
-moz-transition: color .25s;
-ms-transition: color .25s;
-o-transition: color .25s;
transition: color .25s;
}
#cssmenu ul li a:hover {
color: #00ff00;
}
#cssmenu ul li a:hover:before {
width: 100%;
}
#cssmenu ul li a:after {
content: "";
display: block;
position: absolute;
right: -3px;
top: 19px;
height: 6px;
width: 6px;
background: #ffffff;
opacity: .5;
}
#cssmenu ul li a:before {
content: "";
display: block;
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 0;
background: #333333;
-webkit-transition: width .25s;
-moz-transition: width .25s;
-ms-transition: width .25s;
-o-transition: width .25s;
transition: width .25s;
}
#cssmenu ul li.last > a:after,
#cssmenu ul li:last-child > a:after {
display: none;
}
#cssmenu ul li.active a {
color: #333333;
}
#cssmenu ul li.active a:before {
width: 100%;
}
#cssmenu.align-right li.last > a:after,
#cssmenu.align-right li:last-child > a:after {
display: block;
}
#cssmenu.align-right li:first-child a:after {
display: none;
}
@media screen and (max-width: 768px) {
#cssmenu ul li {
float: none;
display: block;
}
#cssmenu ul li a {
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-bottom: 1px solid #fb998c;
}
#cssmenu ul li.last > a,
#cssmenu ul li:last-child > a {
border: 0;
}
#cssmenu ul li a:after {
display: none;
}
#cssmenu ul li a:before {
display: none;
}
}最佳答案
他们给每个里一个单独的类(class)。
最简单的方法是给每个 li 一个与背景颜色相匹配的 border-bottom。
然后在悬停时，只需更改特定 li 的 border-color 属性即可。
像这样:
<ul>
<li class="one">Lorem</li>
<li class="two">Lorem</li>
<li class="three">Lorem</li>
<li class="four">Lorem</li>
<li class="five">Lorem</li>
<li class="six">Lorem</li>
</ul>
li{
border-bottom: 5px solid transparent;
}
.one:hover{border-color: dodgerblue;}
.two:hover{border-color: seagreen;}
.three:hover{border-color: skyblue;}
.four:hover{border-color: tomato;}
.five:hover{border-color: grey;}
.six:hover{border-color: white;}
关于css - 如何使用正在使用的过渡元素更改下划线颜色？ (CSS)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33438297/