Question

我一直在尝试将此菜单与页面中心对齐，并且还要删除菜单子项的缩进，但我无法做到这一点。我怎样才能做到这一点？我真的很感激任何建议。我已经看过关于同一主题的其他主题，但它们似乎都不适合我。我的代码是：

<!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/上看到代码

Answer 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);
        });
    //]]>

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

下拉菜单中的对齐和缩进问题

1 个答案: