ansaurus

Question

jQuery CSS Custom Flyout Menu Styling Issue

Answer 1

+1 A:

Here's an edited version. Put it in http://www.quickdiff.com/ to see what I changed (yours in the left side, and mine in the right side).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;

<script type="text/javascript">
    function mainmenu() {
        $("#nav ul").css({ display: "none" }); // Opera Fix
        $("#nav li").hover(function() {
            $(this).find('ul:first').css({ visibility: "visible", display: "none" }).show(400);
        }, function() {
            $(this).find('ul:first').css({ visibility: "hidden" });
        });
    }


    $(document).ready(function() {
        mainmenu();
    });
</script>

<style type="text/css">
    *
    {
        padding: 0px;
        margin: 0px;
    }
    body
    {
        font-size: 0.85em;
        font-family: Verdana, Arial, Helvetica, sans-serif;
    }
    #nav, #nav ul
    {
        margin: 0;
        padding: 0;
        list-style-type: none;
        list-style-position: outside;
        position: relative;
        background-color: #ECE9D8;
    }
    #nav a
    {
        display: block;
        padding: 4px 0px 4px 0px;
        color: #dfca90;
        text-decoration: none;
        font-size: 9px;
        font-weight: bold;
        font: bold 15px Palatino, 'Palatino Linotype' , Georgia, serif;
    }
    #nav > li > a
    {
        font-size: 16px;
        font-variant: small-caps;
        border-right: 1px solid #dfca90;
        padding-right: 10px;
        padding-left: 10px;
        padding-bottom: 6px;
        padding-top: 6px;
        background-color: #fff;
        color: #dfca90;
    }
    #nav li ul li a:hover
    {
        color: #999;
    }
    #nav li
    {
        float: left;
        position: relative;
    }
    #nav ul
    {
        left: -1px;
        top: 35px;
        padding: 0 0 0 5px;
        position: absolute;
        display: none;
        width: 170px;
        border: 2px solid #dfca90;
    }
    #nav ul li
    {
    }
    #nav li ul a
    {
        width: 170px;
        height: auto;
        float: left;
    }
    #nav ul ul
    {
        top: -2px;
    }
    #nav li ul ul
    {
        left: 170px;
        background-color: #ECE9D8;
    }
    #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul
    {
        display: none;
    }
    #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul
    {
        display: block;
    }
</style>
</head>
<body>
<ul id="nav">
    <li><a href="#">1 HTML</a></li>
    <li><a href="#">2 CSS</a></li>
    <li><a href="#">3 Javascript </a>
        <ul>
            <li><a href="#">3.1 jQuery</a>
                <ul>
                    <li><a href="#">3.1.1 Download</a> </li>
                    <li><a href="#">3.1.2 Tutorial</a> </li>
                </ul>
            </li>
            <li><a href="#">3.2 Mootools</a></li>
            <li><a href="#">3.3 Prototype</a></li>
        </ul>
    </li>
</ul>
</body>
</html>

orokusaki 2010-04-27 02:06:40

ansaurus

tags:

views:

answers:

jQuery CSS Custom Flyout Menu Styling Issue

related questions