Как выровнять элементы списка 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 это работает – 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

Вы можете добавить маржу верхом к вашим $ ('уль LI') 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 >, потому что для блока < li> установлено значение float.

Что вам нужно сделать, это использовать стиль CSS: ясно: как сделать элемент < li> занять свое желаемое место

источник

2014-01-07 14:11:12 user2076496

Как выровнять элементы списка CSS/jquery

ответ

Смежные вопросы