我希望下面的菜单在整个菜单下面有一个黑色边框，并且让悬停在上面的边框部分变成#19A3FF。现在它在它所说的地方和联系方式之间有一个差距，我希望那个特定的部分有一个黑色的边框，但当那个特定的部分悬停在上面时不要改变颜色。感谢您的回复。
@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
}
#cssmenu ul .has-sub {
z-index: 1;
}
#cssmenu ul .menu1 {
border-bottom: solid black;
}
#cssmenu ul .menu1:hover {
border-bottom: solid #19A3FF;
padding: 0;
-webkit-transition: border-color .3s linear; /* Saf3.2+, Chrome */
-moz-transition: border-color .3s linear; /* FF3.7+ */
-o-transition: border-color .3s linear; /* Opera 10.5 */
transition: border-color .3s linear;
}
#cssmenu ul .right {
float: right;
}
#cssmenu ul li ul li {
color: white;
}
#cssmenu:after,
#cssmenu > ul:after {
content: '';
display: block;
clear: both;
visibility: hidden;
}
#cssmenu {
font-family: 'Montserrat', sans-serif;
background: #F5F5F5;
}
#cssmenu > ul > li {
float: left;
}
#cssmenu > ul > li > a {
padding: 17px;
font-size: 12px;
text-decoration: none;
color: black;
text-transform: uppercase;
}
#cssmenu > ul > li.has-sub > a:before {
position: absolute;
top: 19px;
right: 14px;
display: block;
width: 2px;
height: 8px;
background: #dddddd;
}
#cssmenu ul ul {
position: absolute;
left: -9999px;
}
#cssmenu li:hover > ul {
left: auto;
}
#cssmenu li:hover > ul > li {
height: 35px;
}
#cssmenu ul ul ul {
margin-left: 100%;
top: 0;
}
#cssmenu ul ul li a {
border-bottom: 1px solid rgba(150, 150, 150, 0.15);
padding: 11px 15px;
width: 170px;
font-size: 12px;
text-decoration: none;
color: white;
background: #333333;
}
</style>
</head>
<body>
<div id='cssmenu'>
<ul>
<li class='menu1'><a href='#'>Home</a></li>
<li class='menu1 has-sub'><a href='#'>Products</a>
<ul>
<li class='sub-in-sub'><a href='#'>Product 1</a>
<ul>
<li><a href='#'>Sub Product</a></li>
<li><a href='#'>Sub Product</a></li>
</ul>
</li>
<li class='sub-in-sub'><a href='#'>Product 2</a>
<ul>
<li><a href='#'>Sub Product</a></li>
<li><a href='#'>Sub Product</a></li>
</ul>
</li>
</ul>
</li>
<li class='menu1'><a href='#'>About</a></li>
<li class='menu1 right'><a href='#'>Contact</a></li>
</ul>
</div>
</body>
</html>
最佳答案
您可以尝试使用 box-shadow 属性和 inset 阴影来创建不会干扰盒模型的一侧内边框。例如，删除 border-bottom 属性并添加:
#cssmenu > ul {
box-shadow: 0 -3px 0 0 black inset;
}
#cssmenu ul .menu1:hover {
box-shadow: 0 -3px 0 0 #19a3ff inset;
padding: 0;
transition: box-shadow .3s linear;
}
关于html - 是否可以让边框的一部分改变颜色而其余部分保持相同颜色？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30495088/