CSS：独立于父母的位置，不使用位置：绝对

我创建了只有一个级别的CSS悬停菜单。CSS：独立于父母的位置，不使用位置：绝对

HTML

<div id="menu"> 
    <ul> 
    <li id="item1">item1 
     <div id="content1"> </div> 
    </li> 
    <li id="item2">item2 
     <div id="content2"> </div> 
    </li> 
    <li id="item3">item3 
     <div id="content3"> </div> 
    </li> 
    </ul> 
</div>

CSS

html, body { 
    margin: 0; 
    height: 100%; 
    width: 100%; 
} 
#menu { 
    width: 0%; 
    padding-left: 16px; 
    height: 100%; 
    background-color: red; 
} 
#menu:hover { 
    width: 20%; 
} 
#content1, #content2, #content3 { 
    width: 300%; 
    height: 1000%; 
    margin-left: 100%; 
    background-color: green; 
    visibility: hidden; 
    left:16px; 
} 
#item1:hover #content1, #item2:hover #content2, #item3:hover #content3 { 
    visibility: visible; 
} 
ul { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    height: 100%; 
    width: 100%; 
} 
#item1, #item2, #item3 { 
    width: 100%; 
    height: 10%; 
    display:none; 
} 
#menu:hover #item1, #menu:hover #item2, #menu:hover #item3 { 
    display:block; 
}

http://jsfiddle.net/6Bv6C/12/

菜单在第一隐藏，但是当你将鼠标悬停在它会显示。内容框会显示，当您将鼠标悬停在菜单项上时。我的问题是：我想所有的内容框（绿色背景）显示在相同的位置（顶部：0相对于身体;左：/ 宽度#menu /），而不是相对于他们的父母（＃item1， 2,3）。所有元素应该保持动态宽度和高度。

这是可能的与CSS？如果不能，我可以使用jquery或js？

干杯！

来源

2014-06-27 user3779564

为什么你不想使用绝对位置？ –

[父和子div彼此相邻而不使用position：absolute]的可能重复（http://stackoverflow.com/questions/24432773/parent-and-child-div-next-to-each-other-without-使用positionabsolute） –

@Paulie_D：它不是真的重复。它更多的是后续问题。我不知道该怎么做，所以我开始了一个新的问题。 – user3779564

我用position:absolute来解决你的问题。一个绝对定位的项目计算其'参考点作为position:relative风格最接近的父项。我更新你的小提琴的变化，所以你可以看到我的意思：http://jsfiddle.net/6Bv6C/13/

来源

2014-06-27 15:28:00 chloelonan

CSS：独立于父母的位置，不使用位置：绝对

回答

相关问题