在導航菜單中設置縮小的尺寸

我有一個菜單。它有一個下拉菜單。我還希望下拉菜單的父級大小相同。在導航菜單中設置縮小的尺寸

我的HTML

<ul> 
    <li class="noChild"><a href="#" class="" >MY ACCOUNTS</a></li> 
    <li class="noChild "><a href="#" >LIBRARY</a></li> 
    <li class=""><a href="#">OUR DEPOSIT OFFERS </a> 
    <ul> 
     <li class="dropdownSizeDn"><a href="#">OFFERS 1 </a></li> 
     <li class="dropdownSizeDn"><a href="#">OFFERS 2</a></li> 
     <li class="dropdownSizeDn"><a href="#">OFFERS 3</a></li> 
    </ul> 
    <li class="noChild"><a href="#">LOGOUT</a></li> 
</ul>

jQuery的

jQuery("#menu1 li").hover(function(){ 
    jQuery(this).find('ul:first') 
     .css({ 
      visibility: "visible", 
      display: "none", 
      marginLeft:"0px", 
      paddingLeft:"0px"}) 
     .show(200); 
},function(){ 
    jQuery(this).find('ul:first').css({visibility: "hidden"}); 
});

從上面的代碼，我需要設置的「OUR敷金屬具有」以其所有子女相同的寬度（「優惠1 「，」優惠2「，」優惠3「）。在這裏我可以用Jquery來完成。 Like

jQuery('.dropdownSizeDn').css('width',widthLi + "px");

將鼠標懸停在相應的父級上。但我想用CSS來設置它。有沒有辦法呢？我不喜歡任何css3修復。它必須與舊版瀏覽器兼容。

編輯我不能硬編碼每個孩子的寬度。這是我的CSS jsfiddle

來源

2013-03-02 arjuncc

你可以創建一個http://jsfiddle.net/證明這個問題？ – cimmanon 2013-03-02 18:50:41

新增jsfiddle :) – arjuncc 2013-03-03 05:46:48

您可以設定每個孩子的寬度在下拉是父母的同一固定寬度即寬度：120px。

來源

2013-03-02 18:26:16 underflow

否它會動態改變其大小。像CMS一樣。 – arjuncc 2013-03-02 18:29:45

涵蓋所有的基礎，因爲我不知道你的CSS：

ul li ul, ul li ul li, ul li ul li a { 
    width: 100%; 
}

來源

2013-03-02 18:43:14

http://jsfiddle.net/arjuncc/M5EWW/，My css – arjuncc 2013-03-03 05:47:05

在導航菜單中設置縮小的尺寸

回答

相關問題