2014-02-19 69 views
0

我正在嘗試使用HTML5和CSS3構建一個集中對齊的下拉菜單。如果必須的話,我可以使用jQuery來協助。這必須在IE8 +中工作。目前,我的菜單集中對齊,下拉菜單工作,但下拉菜單的寬度(div)與上面的li的寬度相同。CSS下拉菜單,超過父寬度的兒童

<div class="menu"> 
    <ul class="level0"> 
     <li class="level0"> 
      <a href=" http://domain.com/"> 
       <span>home</span> 
      </a> 
      <div class="sub"> 
       <div class="sub-column"> 
        <a href="http://domain.com/customer-service"> 
         <span>Customer Service</span> 
        </a> 
       </div> 
       <div class="sub-column"> 
        <a href="http://domain.com/privacy-policy"> 
         <span>Privacy Policy</span> 
        </a> 
       </div> 
      </div> 
     </li> 
     <li class="level0"> 
      <a href=" http://domain.com/about"> 
       <span>About Us</span> 
      </a> 
      <div class="sub"> 
       <div class="sub-column"> 
        <div> 
         <p>Blah blah blah, some random text goes here.</p> 
        </div> 
       </div> 
      </div> 
     </li> 
    </ul> 
</div> 

而CSS(試圖壓縮它便於查看)。

.menu { 
    clear:both; display:block; max-width:100%; margin:0 auto; padding:0; 
    border:1px solid #ddd; border-bottom:7px solid #323131; text-align:center; 
} 
.menu ul { 
    display:block; max-width:100%; height:3.2em; margin:0 auto; 
    padding:0; list-style-type:none; text-align:center; 
} 
.menu ul li {display:inline-block; margin:0; padding:0; height:3.2em; 
    line-height:3.2em; position:relative; 
} 
.menu ul li > div {display:none; visibility:hidden; position:absolute; 
    background:#f60; z-index:999; transition:display 0.25s ease; 
} 
.menu ul li:hover > div {display:inline-block; visibility:visible; 
    max-width:100%; 
} 
.menu ul li a {display:block; margin:0; padding:0 2em; font-size:90%; 
    font-weight:700; text-transform:uppercase; transition:background-color 0.25s ease; 
} 
.menu ul li a:hover {background-color:#e4e4e4; color:#323131;} 

.menu ul li.switcher {display:none;} 

我怎樣才能得到第一線的div(.menu ul li > div)採用祖父母元素(.menu)的寬度的寬度是多少?或者至少延長以適應使用max-width的內容?

任何幫助表示讚賞。謝謝。

〜編輯〜

這裏的小提琴:http://jsfiddle.net/Xp6yG/

+0

使'.menu''位置:相對'。在這裏,看看這個問題:(http://stackoverflow.com/questions/17568374/css-make-the-absolute-child-width-independent-from-the-relative-parent-width) – James

回答

1

除了使用使得.menuposition: relative的詹姆斯建議我想你也將需要刪除position: relative.menu ul li

0

由於一些有益的建議,這是儘可能接近工作,我知道了:http://jsfiddle.net/Xp6yG/3/

我改變在所述顯示器上向.menu ul li:hover > divdisplay:table;加入whitespace:nowrap;right:50%;.menu ul li > div元件。

下拉菜單顯示在我想要的位置,並拉伸以適應包含的元素。非常感謝!