如何對齊列表中的項目CSS/jquery

我想用jquery（實際上，CSS內置到jquery，onload）做一個簡單的下拉菜單。除了第二個列表中的項目顯示在第一個列表中的項目之外，一切看起來都不錯。如何對齊列表中的項目CSS/jquery

DEMO：http://getyourbots.com/stackoverflow/jquery/

這裏是我的代碼：

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Jquery</title> 
     <script src="jquery-2.0.3.js"></script> 
     <script> 
         window.onload = function() { 
       $('ul').css({ 
        'list-style' : 'none', 
             'margin':'0', 
             'padding':'0' 

       }); 
           $('ul li').css({ 
        'float' : 'left', 
        'width' : '150px', 
             'height' : '30px', 
             'text-align' : 'center', 
             'background' : '#003399', 
             'font-size' : '20px', 
             'padding':'9px', 
             // 'margin':'10px' 
       }); 
           $('ul li li').css({ 

             'margin':'0 auto' 

             //'top':'50px', 

             //'padding':'5px' 

             //'margin':'10px' 
       }); 
           $('ul li a').css({ 
        'text-decoration' : 'none', 
             'color':'white' 
       }); 


      }; 
      $(document).ready(function(){ 
       $('li').hover(function(){ 
        $(this).find('ul>li').fadeToggle(600); 
      }); 
      $('li').mouseenter(function(){ 
        $(this).css({ 
      'background' : 'green' 
        }); 
      }); 
      $('li').mouseleave(function(){ 
        $(this).css({ 
      'background' : '#003399' 
        }); 
      }); 
     }); 
     </script> 
     <style> 



     </style> 
    </head> 
    <body> 
     <ul> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">About Us</a>    
       <ul> 
        <li><a href="#">How it started</a></li> 
        <li><a href="#">Our team</a></li> 
        <li><a href="#">Sponsors</a></li> 
       </ul></li> 
      <li><a href="#">Services</a> 
      <ul> 
        <li><a href="#">Programming</a></li> 
        <li><a href="#">Design</a></li> 
        <li><a href="#">Testing</a></li> 
       </ul> 
      </li> 
      <li><a href="#">FAQ</a></li> 
      <li><a href="#">Contact Us</a></li> 
     </ul> 
    </body> 
</html>

任何幫助，將不勝感激。我知道這只是一行代碼，但我已經嘗試了所有與定位。

來源

2014-01-07 icebox19

設置一些邊距？ – Aston

嘗試僅使用CSS進行設計，然後使用jQuery，它可能會快很多。 – Danny

試試這個：

ul > li {position: relative;} 
ul ul {position: absolute; top: 100%; left: 0;}

來源

2014-01-07 14:09:54

謝謝你：D it works – icebox19

您可以通過添加position: relative;您頂級<li>元素並加入position: absolute; top: 100%;您<ul>元素是下拉菜單解決此問題。。

其他JQuery的

$('ul li').css({ 
    'position' : 'relative' 
}); 
$('ul li ul').css({ 
    'position' : 'absolute', 
    'top' : '100%' 
});

來源

2014-01-07 14:07:33 AfromanJ

你可以一個邊距添加到您的$（ 'UL禮'），CSS（）

$('ul li').css({ 
    'float' : 'left', 
    'width' : '150px', 
    'height' : '30px', 
    'text-align' : 'center', 
    'background' : '#003399', 
    'font-size' : '20px', 
    'padding':'9px', 
    'margin-top':'15px' //added this, tested your site w/ chrome and it works for me 
});

來源

2014-01-07 14:09:25

嘗試過但不能正常工作... – icebox19

它們出現在< a>標記下，而不是在<裏>塊，因爲< li>塊設置爲浮動。

你需要做的是使用CSS樣式：明確：既要使< LI>元素佔用其所需的空間

來源

2014-01-07 14:11:12 user2076496

如何對齊列表中的項目CSS/jquery

回答

相關問題