是否可能有一个部分的边界改变颜色，而其余部分保持相同的颜色

我想让下面的菜单在整个菜单下面有一个黑色的边框，边框的部分悬停在#19A3FF上。现在它在about和contact之间有一个间隙我想让这个特定的部分有一个黑色的边框但是当这个特定的部分悬停在上面时不改变颜色。谢谢你的回复。

@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;
}

小提琴

首先，您的代码不完整。错过了文件的第一个块，我希望我没有错过任何CSS。

在无序列表元素中添加以下行:

  border-bottom: solid black;

在第一级列表项目中添加以下行:

#cssmenu ul .menu1 {
  margin-bottom: -3px;
}

这也可以将菜单向下推，以便在菜单显示时看到高亮边框。

相关内容

最新更新

热门标签：