在我的网站上，我使用了一个模板来制作导航栏。我的目标是定制它，使其看起来像英国广播公司的导航栏。（链接：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;
}
}它们为每个li提供了自己的类。
最简单的方法是给每个li一个与背景颜色匹配的边框底部。
然后在悬停时，只需更改特定li的边框颜色属性。
像这样：
<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;}
http://codepen.io/LukeD1uk/pen/EVRvjY
您是否想过将属性border-bottom : Xpx solid #yourColor应用于它们？
我真的不明白你的意思，否则做一个屏幕截图：）