下拉菜单上的对齐和缩进问题答案

【问题标题】：Align and indentation issues on dropdown menu下拉菜单上的对齐和缩进问题
【发布时间】：2014-02-02 01:56:37
【问题描述】：

我已经尝试了几个小时将此菜单与页面中心对齐并删除菜单子项的缩进，但我无法做到这一点。我怎样才能做到这一点？我真的很感激任何建议。我看过关于同一主题的其他主题，但似乎没有一个对我有用。我的代码是：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>JQuery Examples</title>
        <script src="http://code.jquery.com/jquery-1.3.2.js" type="text/javascript"></script>  


        <style type="text/css" media="screen">
  a{text-decoration: none; color: rgb(255,255,255);}
  a{text-decoration: none; color: rgb(255,255,255);}
            ul{margin-left: 0px;   list-style: none; font-size: 12px;text-align:center;}
            ul.dropdown{position: relative; text-align:center;}
            ul.dropdown li {  float: left;  background: #000066; zoom: 1; width: 120px; display: block;}
            ul.dropdown a:hover {background: #0f0; color: #00f; }
            ul.dropdown li a { display: block; padding: 4px 8px; border-right: 1px solid #000; }
            ul.dropdown ul {  visibility: hidden; position: absolute;  }
            ul.dropdown ul li {background: #000066; border-bottom: 1px solid #000; float: none;}
            ul.dropdown ul li a { border-right: none; width: 100%; } 
       //     ul.dropdown ul ul { left: 100%; top: 0; }
            .hover {position: relative; }    
        </style>        

        <script type="text/javascript">
            //<![CDATA[
            $(document).ready(function() {
                $("ul.dropdown li").hover(function() {
                    $(this).addClass("hover");
                    $('ul:first', this).css('visibility', 'visible');
                    $("#messages").html("<li><a href=\"http://example.com\">Message1</a></li>");
//                    $('#inbox').empty();
//                    $("#inbox").append("<li><a href=\"http://example.com\">Message2</a></li>");                    

                }, function() {
                    $(this).removeClass("hover");
                    $('ul:first', this).css('visibility', 'hidden');
                });
            });
            //]]>
        </script>



    </head>
    <body>
        <ul class="dropdown">
            <li><a href="http://example.com">Suas Mensagens</a>
                <ul id="messages">

                </ul>
            </li>
            <li><a href="http://example.com">Movies</a>
                <ul>
                    <li><a href="http://example.com">Movie 1</a></li>
                    <li><a href="http://example.com">Movie 2</a></li>
                    <li><a href="http://example.com">Movie 3</a> </li>
                </ul>
            </li>
            <li><a href="http://example.com">Books</a>
                <ul>
                    <li><a href="http://example.com">Field 1</a></li>
                    <li><a href="http://example.com">Field 2</a></li>
                </ul>
            </li>            
        </ul>
    </body>

最后，您还可以在 http://jsfiddle.net/NLvXa/4/ 上查看代码

【问题讨论】：

首先您应该使用“CSS-Reset”，因为您的问题听起来是necolas.github.io/normalize.css。除此之外，让我看看。
感谢@dollarvar 的提示！
这样的菜单不需要 jQuery，我可以用纯 CSS 做到这一点，另外，导致这些问题的是 margin 和 padding，所以重置样式表，然后调整padding
我刚刚重置了，但是你说的“调整”是什么意思？我使用 JQuery 是因为我读到它对浏览器的选择更加健壮。

标签： jquery html css alignment indentation

【解决方案1】：

这就是你想要的http://jsfiddle.net/ELUkf/

HTML

<ul class="dropdown">
    <li><a class="list1" href="http://example.com">Suas Mensagens</a>

        <ul class="sub" id="messages"></ul>
    </li>
    <li><a class="list1" href="http://example.com">Movies</a>

        <ul class="sub">
            <li><a href="http://example.com">Movie 1</a>

            </li>
            <li><a href="http://example.com">Movie 2</a>

            </li>
            <li><a href="http://example.com">Movie 3</a> 
            </li>
        </ul>
    </li>
    <li><a class="list1" href="http://example.com">Books</a>

        <ul class="sub">
            <li><a href="http://example.com">Field 1</a>

            </li>
            <li><a href="http://example.com">Field 2</a>

            </li>
        </ul>
    </li>
</ul>

CSS

ul {
    margin:0;
    padding:0;
    text-indent:0;
    list-style:none
}
a{text-decoration:none;
color:#fff;}
.dropdown li {
    float:left;
    margin-left:-1px;
}
.dropdown li:first-of-type {
    margin-left:0;
}
.dropdown a {
    padding:5px 0;
    display:block;
    width:120px;
    border:#000 solid 1px;
    text-align:center;
    font-size:12px;
    background: #000066;
}
.sub{display:none;}
 .sub li {
    float:none;
    margin-left:0;
    margin-top:-1px;
}

jQuery

    //<![CDATA[
        $("ul.dropdown li").hover(function () {
            $(this).find(".sub").slideDown(300);
            $("#messages").html("<li><a href=\"http://example.com\">Message1</a></li>");
            //$('#inbox').empty();
            //$("#inbox").append("<li><a href=\"http://example.com\">Message2</a></li>");                    
        }, function () {
            $(this).find(".sub").slideUp(300);
        });
    //]]>

如果您需要任何帮助，请与我联系。

【讨论】：

谢谢你@Mayank-Tripathi - 我学到了很多东西！很好！如何在页面中心对齐整个菜单？
欢迎您@DanielTheRocketMan。这是页面中心菜单的更新小提琴。 Fiddle here