navbar с подменю ширина невозможно получить

поэтому я сделал navbar с элементом, который имеет подменю.navbar с подменю ширина невозможно получить

<div id=menu> 
    <a href="#"><div class=optie>Nieuws</div></a> 
    <a href="#"><div class=optie>Acties</div></a> 
    <a href="#"><div class=optie>Over ons</div></a> 
    <a href="#"><div class=optie>Webshop</div></a> 
    <div class=optie> 
    Webshop 
    <span class=submenu> 
     <a class=suboptie href="#">Producten</a> 
     <a class=suboptie href="#">Winkelwagen</a> 
     <a class=suboptie href="#">Afrekenen</a> 
    </span> 
    </div> 
</div>

В NavBar работает и это хорошо, однако я не могу получить пункты подменю, чтобы иметь надлежащую ширину.

Подменю вложено внутри головки, у которой hasready имеет динамический размер. Поскольку я должен использовать абсолютную позицию, почти невозможно вычислить правильную ширину. Есть ли способ, чтобы подменю автоматически имело ту же ширину, что и родительский?

Это jsfiddle.

любая помощь ценится

https://jsfiddle.net/eb8k0tbo/3/

источник

2016-02-21 John Smith

Но если ваше подменю имеет одинаковую ширину родителя, то часть текста может идти скрыта. –

Здесь может быть полезно изображение предполагаемого результата. Также. есть причина, по которой структура 'uli/li' работает так хорошо для этих видов меню. –

@Paulie_D Я просто хочу, чтобы подменю имело ту же ширину, что и родительский источник. –

Необходимость установить position:relative на родителя, а затем width:100% на ребенка.

#menu { 
 
    font-size: 0px; 
 
    width: 80%; 
 
    text-align: center; 
 
} 
 

 
.optie { 
 
    display: inline-block; 
 
    font-size: 18px; 
 
    width: calc(20% - 2px); 
 
    height: 1.5em; 
 
    line-height: 1.5em; 
 
    background: linear-gradient(to bottom, #919191 0%,#303030 41%,#000000 75%,#000000 100%); 
 
    border: 1px solid grey; 
 
    color: white; 
 
    font-weight: bold; 
 
    position: relative; 
 
} 
 

 
.optie a { 
 
    color: white; 
 
    text-decoration: none; 
 
} 
 
.optie:hover a { 
 
    //color: rgb(56,56,56); 
 
} 
 

 
.optie:hover { 
 
    color: rgb(56,56,56); 
 
    background: linear-gradient(to bottom, #fac695 0%,#f4913a 58%,#f4913a 79%,#ed790e 100%); 
 
} 
 

 
.submenu { 
 
    display: none; 
 
} 
 

 
.optie:hover .submenu { 
 
    display: block; 
 
    position: absolute; 
 
    border: 1px solid grey; 
 
    width: 100%;; 
 
} 
 

 
.suboptie { 
 
    display: block; 
 
    background: linear-gradient(to bottom, #919191 0%,#303030 41%,#000000 75%,#000000 100%); 
 
} 
 
.submenu a:hover { 
 
    background: linear-gradient(to bottom, #fac695 0%,#f4913a 58%,#f4913a 79%,#ed790e 100%); 
 
} 
 

 
.submenu a { 
 
    color: white; 
 
    text-decoration: none; 
 
} 
 
.suboptie:hover { 
 
    color: rgb(56,56,56); 
 
}

<div id=menu> 
 
     <a href="#"><div class=optie>Nieuws</div></a> 
 
     <a href="#"><div class=optie>Acties</div></a> 
 
     <a href="#"><div class=optie>Over ons</div></a> 
 
     <div class=optie> 
 
     Webshop 
 
     <span class=submenu> 
 
      <a class=suboptie href="#">Producten</a> 
 
      <a class=suboptie href="#">Winkelwagen</a> 
 
      <a class=suboptie href="#">Afrekenen</a> 
 
     </span> 
 
     </div> 
 
    </div>

источник

2016-02-21 14:01:58

navbar с подменю ширина невозможно получить

ответ

Смежные вопросы