Align and indentation issues on dropdown menu

StackOverflow https://stackoverflow.com/questions/21498522

Question

I have been trying for hours to align this menu to the center of the page and also to remove the indentation of the subitems of the menu, but I have not be able to do that. How can I do that? I realy appreciate any suggestion. I have looked at other threads about the same subject but none of them seems to work for me. My code is:

<!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>

Finaly, you can also see the code at http://jsfiddle.net/NLvXa/4/

Était-ce utile?

La solution

Here is what you want 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);
        });
    //]]>

Please contact me in case you need any help.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top