1

http://www.boffi.com/EN/Collections/bathrooms/b14.aspxのように、子供たちが別のボックスに表示されるナビゲーションを作成しています。絶対位置を使用して子を分離することができましたが、子要素の背景の高さを100％にすることができません。これはリスト要素なので、height：100％とすると、下の2つの主要なナビゲーション要素が消えます。助けてください！これが私の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;
}

助けてくれてありがとう。

4

1 に答える 1

3

私はあなたのコードを少し単純化しました..まあ、あなたが本当に必要としないので、実際にはdivwith を削除しました。class="child"

それから、私がしたのはこれだけでした：

ul.submenu{
  position:absolute;
  left: 130px; top: 0;
  background:blue;
  width:130px;
  height: 100%;
}

フィドルを見てみましょう: http://jsfiddle.net/joplomacedo/rqqju/

これはあなたが探していたものでしたか？

于 2012-07-08T18:01:27.557 に答える