2016-02-21 87 views
0

所以我做了一個導航欄的項目,有一個子菜單。導航欄子菜單寬度不可能得到正確

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

+0

但如果你的子菜單中有父母的寬度相同,則文本的一部分可能會去隱藏。 –

+0

預期結果的圖像可能在此處有用。也。 「uli/li」結構對於這些菜單非常適用。 –

+0

@Paulie_D我只想讓子菜單具有與它所源自的父寬度相同的寬度。 –

回答

1

需要設置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>