絕對位置元素繼承所有父母的樣式

Question

我想通了爲什麼繼承沒有工作，可以說父容器的寬度是20％的身體，如果我說繼承那個寬度，那麼這意味着孩子將20 20％的％，所以我知道爲什麼它不工作，現在我的問題是我可以強制我的絕對positing元素繼承父母的所有風格。

我想創建下拉菜單兩個級別，比平常我感到困惑，因爲我給絕對positing我的下拉，他們沒有從父容器繼承樣式。 由於這一點，我有點混淆，所以我使用寬度和背景的繼承值;爲它的背景工作，但不是它沒有的寬度;比我更困惑，所以我決定把它發佈在這裏。

我的問題是，爲什麼寬度100％的工作，而不是繼承， 和我的另一個問題是我怎麼能強迫我絕對：放置div來從父繼承所有樣式，

總之我很好，與它的擺脫正常的流程，但我不希望它像一個孤兒行事。

請在CSS代碼閱讀評論

HTML代碼

<ul class="menu"> 
      <li><a href="#">Home</a></li> 

      <li class="menu2 has-drop-down"><a href="#">Services</a> 
       <ul class="drop-down-1"> 
        <li><a href="#">Plumbing</a></li> 
        <li class="has-drop-down"><a href="#">Heating</a> 
         <ul class="drop-down-2"> 
          <li><a href="#">Residential</a></li> 
         </ul> 
        </li> 
        <li><a href="#">Electrical</a></li> 
       </ul> 
      </li> 
      <li><a href="#">Electrical</a></li> 

     </ul> 

CSS代碼

/*basic style no need to pay attention*/ 
*{ 
    font-family:helvetica; 
    margin:0; 
    padding:0; 
    list-style-type:none; 
    font-size:20px; 
} 
a{ 
    text-decoration:none; 

} 

.menu{ 
    display:flex; 
} 
.menu >li{ 
    flex:1; 
    background:red; 
    margin-left:1px; 
} 
.menu2{ 
    position:relative; 
} 

/*This style is confusing as, as soon as i give this position 
absolute, my drop down width is not equal to its container, 
it is not inheriting background color and no width either, 
### I think it's all come to down to absolute positioning 
will take your element out of normal flow### 
*/ 
.drop-down-1{ 
    position:absolute; 
    width:inherit;/*width:100% will work why?*/ 
    background:inherit; 
} 
.drop-down-2{ 
    position:absolute; 
    width:inherit;/*width:100% will work why?*/ 
    background:inherit; 
} 

Answer 1

試試這個，

background-color：inherit！important;

Answer 2

您使用繼承財產，但沒有在父元素沒有寬度屬性添加寬度100％至父MENU2類，使其工作

/*basic style no need to pay attention*/ 
 
*{ 
 
    font-family:helvetica; 
 
    margin:0; 
 
    padding:0; 
 
    list-style-type:none; 
 
    font-size:20px; 
 
} 
 
a{ 
 
    text-decoration:none; 
 

 
} 
 

 
.menu{ 
 
    display:flex; 
 
} 
 
.menu >li{ 
 
    flex:1; 
 
    background:red; 
 
    margin-left:1px; 
 
} 
 
.menu2{ 
 
    position:relative; 
 
width:100%; 
 
} 
 

 
/*This style is confusing as, as soon as i give this position 
 
absolute, my drop down width is not equal to its container, 
 
it is not inheriting background color and no width either, 
 
### I think it's all come to down to absolute positioning 
 
will take your element out of normal flow### 
 
*/ 
 
.drop-down-1{ 
 
    position:absolute; 
 
    width:inherit;/*width:100% will work why?*/ 
 
    background:inherit; 
 
} 
 
.drop-down-2{ 
 
    position:absolute; 
 
    width:100%;/*width:100% will work why?*/ 
 
    background:inherit; 
 
}

<ul class="menu"> 
 
      <li><a href="#">Home</a></li> 
 

 
      <li class="menu2 has-drop-down"><a href="#">Services</a> 
 
       <ul class="drop-down-1"> 
 
        <li><a href="#">Plumbing</a></li> 
 
        <li class="has-drop-down"><a href="#">Heating</a> 
 
         <ul class="drop-down-2"> 
 
          <li><a href="#">Residential</a></li> 
 
         </ul> 
 
        </li> 
 
        <li><a href="#">Electrical</a></li> 
 
       </ul> 
 
      </li> 
 
      <li><a href="#">Electrical</a></li> 
 

 
     </ul>