绝对位置元素继承父元素的所有样式

Question

我知道为什么继承不起作用，假设父容器宽度是主体的 20%，如果我说继承该宽度，这意味着子容器将占 20% 的 20%，所以我知道为什么它没有工作，现在我的问题是我可以强制我的绝对定位元素从父级继承所有样式。

我正在尝试创建两级下拉菜单，但与往常相比，我感到困惑，因为一旦我对下拉菜单进行绝对定位，它们就没有从父容器继承样式。 在这一点上我有点困惑，所以我使用继承值作为宽度和背景；对于背景，它可以工作，但不适用于它没有的宽度；比我更困惑，所以我决定在这里发布。

我的问题是为什么宽度 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

试试这个，

背景颜色：继承！重要；

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>