子菜单没有显示......简单的我确定

时间:2015-08-03 19:33:02

标签: html css nav submenu

请帮忙!我的子菜单没有显示,我已经审查过,直到我的眼睛已经流血。我知道这很简单,但我没时间。这是html:

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>SubMenu Nav | Auto</title>
    <meta name="description" content="."/>
    <meta name="keywords" content=""/>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
    <link href="/favicon.ico" rel="shortcut icon"/>
    <link type="text/css" rel="stylesheet" href="css/core.css"/>
    <link type="text/css" rel="stylesheet" href="css/styles.css"/>
    <link type="text/css" rel="stylesheet" href="css/nav.css"/>
</head>
<body style="text-align:center;" class="dev home">
<div class="wrapper">
    <div class="nav">
        <ul>
            <li class="first"><a href="/">Nav Item</a>
                <ul>
                    <li><a href="/">Nav Sub Item</a></li>
                    <li><a href="/">Nav Sub Item</a></li>
                    <li><a href="/">Nav Sub Item</a></li>
                    <li><a href="/">Nav Sub Item</a></li>
                </ul>
            </li>
            <li><a href="/">Nav Item</a></li>
            <li><a href="/">Nav Item</a></li>
            <li><a href="/">Nav Item</a>
                <ul>
                    <li><a href="/">Nav Sub Item</a></li>
                    <li><a href="/">Nav Sub Item</a></li>
                    <li><a href="/">Nav Sub Item</a></li>
                    <li><a href="/">Nav Sub Item</a></li>
                </ul>
            </li>
            <li><a href="/">Nav Item</a></li>
        </ul>
    </div>
    <img src="images/trailer.jpg" alt=""/></div>
</body>
</html>

CSS:

<style>/*********************************************    MAIN NAV *********************************************/
    .nav ul ul {
        position: relative;
        z-index: 30;
    }

    .nav ul li {
        display: block;
        height: 64px;
        line-height: 64px;
        background: #39C;
    }

    .nav li {
        cursor: pointer;
    }

    .nav {
        background: #39C;
    }

    .nav ul {
        z-index: 9997;
        position: relative;
    }

    .nav ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

    .nav {
        z-index: 1;
        position: relative;
    }

    /*********************************************    Main Navigation *********************************************/
    .nav ul li {
        padding: 0;
        margin: 0;
        float: left;
        position: relative;
        border-right: 1px solid #1f2c5d;
        border-left: 1px solid #4b62c0;
    }

    .nav ul li:hover {
    }

    .nav ul li a {
        display: block;
        height: 100%;
        padding: 0 20px 0 27px;
        text-transform: uppercase;
        color: #fff;
    }

    .nav ul li:hover a {
        text-decoration: none;
        background-color: #303c6f;
        color: #fff;
    }

    .first {
        border-left: none !important;
    }

    /*********************************************    Sub Level 1 *********************************************/
    .nav ul ul {
        position: absolute;
        top: 64px;
        left: -5px;
        width: 180px;
        padding: 0 0 14px 5px;
    }

    .nav ul ul li {
        height: auto;
        margin: 0;
        padding: 0;
        width: 100%;
        background: none;
        background-color: #303c6f;
        line-height: 30px;
        border: none;
    }

    .nav ul ul li a {
        text-transform: capitalize;
        background: none;
    }

    .nav ul ul li a:hover {
        background-color: #3e4e87;
    }

    /*********************************************    Shared Sub and Sub Sub Navigation styles *********************************************/
    .nav ul ul, .nav ul li:hover ul ul {
        display: none;
    }

    .nav ul li:hover ul, .nav ul li:hover ul li:hover ul {
        display: block;
    }</style>

0 个答案:

没有答案