导航栏子菜单宽度不可能得到正确

所以我做了一个导航栏的项目，有一个子菜单。导航栏子菜单宽度不可能得到正确

<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>

导航栏作品和它的罚款，但是我不能让子菜单项有适当的宽度。

子菜单嵌套在头部，它已经具有动态大小。由于我必须使用绝对位置，因此几乎不可能计算正确的宽度。有没有办法让子菜单自动具有与父级相同的宽度？

这是一个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

导航栏子菜单宽度不可能得到正确

回答

相关问题