как сделать выпадающее меню чтобы открывалось на всю ширину контейнера? Спасибо!

167

17 сентября 2021, 16:50

Есть меню

ЛОГО      home, about, blog, service, contact = ширина этого контейнера 977 px;

как сделать чтобы подменю раскрывалось от начала контейнера т.е от лого, то конца т.е contact ? когда наводим на Service

<li class="down_menu"><a href="">Service</a> 
  <ul class="service"> 
    <li ><a href="">Shared Office Space</a></li> 
    <li><a href="">Shared Office Space</a></li> 
    <li><a href="">Shared Office Space</a></li> 
  </ul> 
</li>

Answer 1

Скорее всего подойдет решение с комбинацией position absolute/relative. Вот пример( если я правильно понял вопрос)

.container { 
  width: 600px; 
  margin: 0 auto; 
} 
 
.parent { 
  position: relative; 
  display:block; 
} 
 
.service { 
  display: none; 
  position: absolute; 
  left: 0; 
  right: 0; 
  top: 100%; 
  background: red; 
} 
 
.down_menu:hover .service { 
  display: block; 
} 
 
.parent>li { 
  display: inline-block; 
}

<div class="container"> 
  <ul class="parent"> 
    <li><a href="">First level</a></li> 
    <li><a href="">First level</a></li> 
    <li><a href="">First level</a></li> 
    <li class="down_menu"> 
    <a href="">Service</a> 
      <ul class="service"> 
        <li><a href="">Shared Office Space</a></li> 
        <li><a href="">Shared Office Space</a></li> 
        <li><a href="">Shared Office Space</a></li> 
      </ul> 
    </li> 
  </ul> 
</div>