Question

我弄清楚为什么继承不起作用，让我们说父容器宽度是身体的20％，如果我说继承那个宽度，那么这意味着孩子将20％的20％，所以我知道为什么它没有工作，现在我的问题是我可以强制我的绝对定位元素继承父母的所有风格。

我正在尝试创建两个级别的下拉菜单，比平常我感到困惑，因为一旦我给了我的下拉绝对定位，他们没有从父容器继承样式。到目前为止，我有点迷惑，所以我使用了继承值作为宽度和背景;对于背景它工作但不是宽度它没有;我比较困惑，所以我决定将它发布在这里。

我的问题是为什么宽度100％工作而不是继承，而另一个问题是我如何强迫我的绝对定位div继承父母的所有风格，

总之，我很好，它正在摆脱正常的流程，但我不希望它像一个孤儿。

请阅读css代码中的评论

HTML CODE

<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％添加到你的父菜单2类以使其工作

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

绝对位置元素，用于继承父

2 个答案: