Question

我有这种情况，你可以在图片中看到： enter image description here

我想避免使用css用红色圆圈突出显示的边框。这是可能的，样本会很棒：）

CSS

  .home_menu li a {
   padding: 6px 0px 6px 12px;
  }

.home_menu li a:hover {
  background-color: white;
  border-top: 1px solid #c1c1c1;
  border-left: 1px solid #c1c1c1;
  border-bottom: 1px solid #c1c1c1;
}
.home_menu li .subMenu{
  position: absolute;
  left: 164px;
  top: 0px;
  background-color: white;
  border: 1px solid #c1c1c1;
  height: 100px;
  width: 300px;
  z-index: 20;
}

HTML

<ul class="nav nav-list home_menu">
                <li><a href="#">Automotiv</a>
                    <div class="subMenu">
                        Test
                    </div>
                </li>
                <li><a href="#">Electronic & Technology</a></li>
  ...
 </ul>

Answer 1

实现此目的的最佳方法是使用a将“Automotiv”z-index元素置于“Test”div之上。然后向左移动它的边界将被“Automotiv”的背景颜色隐藏。还使用CSS抑制“Automotiv”的右边界。

Answer 2

将div子菜单向左移动一点。并使链接automotiv 12或更高的z-index位于顶部。并为链接automotiv添加一些css样式，它将取消右边界。

希望这种技术能够解决你想要的界面。

Answer 3

这是我为此创建的http://www.bootply.com/m1w9kzfNfw示例（纯HTML和JS）。

HTML

<div class="col-md-2">
            <ul class="nav nav-list home_menu">
                <li><a href="#">Automotiv</a>
                    <div class="subMenu">
                        Test
                    </div>
                    <span class="hidder"></span>
                </li>
                <li>
                    <a href="#">Electronic &amp; Technology</a>
                    <div class="subMenu">
                        Test
                    </div>
                    <span class="hidder"></span>
                </li>

            </ul>
        </div>

CSS

 .home_menu li a {
  padding: 6px 0px 6px 12px;
}

.home_menu li .subMenu {
 display: none;
 position: absolute;
 left: 100%;
 top: 0px;
 background-color: white;
 border: 1px solid #c1c1c1;
 min-height: 100px;
 min-width: 300px;
 padding: 5px;
 z-index: 20;
 border-top-right-radius:5px;
 border-bottom-right-radius:5px;
 border-bottom-left-radius:5px; 
}
.home_menu li .hidder {
 display: none;
 width: 2px;
 height: 95.5%;
 position: absolute;
 top: 1px;
 right: -1px;
 background-color: white;
 z-index: 100;
}

.home_menu li:hover a {
 background-color: white;
 border-top: 1px solid #c1c1c1;
 border-left: 3px solid #c1c1c1;
 border-bottom: 1px solid #c1c1c1;
 border-top-left-radius:5px;
 border-bottom-left-radius:5px;
}
.home_menu li a:hover {background-color: #fff}
.home_menu li:hover .hidder{display:inline-block;}
.home_menu li:hover .subMenu{display:inline-block;}

避免在2个div的中间边界

3 个答案: