Question

我试图用jquery创建一个简单的下拉菜单（实际上，CSS内置于jquery，onload）。除了第二个列表中的项目显示在第一个列表中的项目之外，一切看起来都很不错。

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>

任何帮助将不胜感激。我知道这只是一行代码，但我已经尝试了一切定位。

Answer 1

试试这个：

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

Answer 2

他们出现在＆lt; a＆gt;标记而不是＆lt; li>阻止因为＆lt; li> block设置为float。

你需要做的是使用css样式：clear：两者都要使＆lt; li>元素占据了理想的空间

Answer 3

您可以通过将position: relative;添加到顶级<li>元素并将position: absolute; top: 100%;添加到作为下拉列表的<ul>元素中来解决此问题。

其他JQuery

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

Answer 4

您可以在$（'ul li'）。css（）

中添加margin-top

$('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
});

如何对齐列表CSS / jquery的项目

4 个答案: