我正在制作一个导航,孩子们将显示在不同的框中,就像http://www.boffi.com/EN/Collections/bathrooms/b14.aspx一样。我设法使用绝对定位将子元素分开,但无法让子元素背景具有 100% 的高度。这是一个列表元素,所以如果我放 height: 100% ,底部的两个主要导航元素就会消失。请帮忙!这是我的html:
<ul id="mainmenu">
<li id="liHome" class="active">
<a href="#item-x1y1" class="panel" rel="none" id="Home">Home</a>
</li>
<li id="liServices" class=" ">
<a href="#item-x1y2" class="panel" rel="SubMenuY2" id="Services">Services</a>
<div class="child">
<ul style="" id="SubMenuY2" class="submenu">
<li><a href="#">Sub-item 1</a></li>
<li><a href="#">Sub-item 2</a></li>
</ul>
</div>
</li>
<li id="liEnvironment">
<a href="#item-x1y3" class="panel" rel="none" id="Environment">Environment</a>
</li>
<li id="liCareer">
<a href="#item-x1y4" class="panel" rel="none" id="Career">Career</a>
</li>
<li id="liContact">
<a href="#item-x1y5" class="panel" rel="none" id="Contact">Contact</a>
</li>
</ul>
和CSS
body, html{
height:100%;
}
#mainmenu{
background:black;
color: white;
width:130px;
position:relative;
top:0;
height:100%
}
#mainmenu li a {
color:white;
}
ul.submenu{
position:absolute;
background:blue;
width:130px;
}
div.child{
position:relative;
margin-left:130px;
}
非常感谢您的帮助。