Блог

У меня такая ситуация, как вы можете видеть на изображении:

И я хочу избежать границы, выделенной красным кругом, используя 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 amp; Technology</a></li>
  ...
 </ul>
  

Лучший способ добиться этого — расположить a элемент «Automotiv» над «Test» div с помощью z-index . Затем переместите его влево достаточно далеко, чтобы его граница была скрыта цветом фона «Automotiv». Также подавляйте правую границу «Automotiv» с помощью CSS.

Переместите подменю div немного влево. и сделайте так, чтобы z-индекс автомотива ссылки 12 или выше был сверху. И добавьте некоторый стиль css к автомотиву ссылки, который удалит правую границу.

Надеюсь, этот метод решит проблему интерфейса, который вы хотите.

Вот пример, который я только что создал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;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;}