猿问

只使用H5和CSS3制作带有二三级菜单的导航栏,下面代码怎么改?

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>dddddd</title>
<style>
body
{
    margin:0;
    padding:0;
    width:100%;
    height:100%;
    background:#47c9af;;
    color:#74777b;
    font-weight:500;
    font-size:1em;
    font-family:'Raleway', Arial, sans-serif;
}

a:link,a:visited{text-decoration:none;list-style:none;}
*, *:after, *:before
{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}
    /*---------------------------------------*/
div
{
    width: 1000px;
    height: 1000px;
    margin: 20px auto;
}

nav ul li
{
    width: 90px;
    height: 40px;
    list-style:none;
    float: left;
    margin: 5px 5px 0px 5px;
    background-color: #f08080;
    text-align: center;
}
.menu1
{
    background-color: #FF00FF;
}
.menu3
{
   background-color: #00FFFF;
}

.menu3 ul li
{
    clear: both;
    width: 90px;
    height: 40px;
    background-color: #e9967a;
    position: relative;
    left: -45px;
    visibility: hidden;
}
.menu3:hover ul li
{
    visibility: visible;
    color: #fff;
}
</style>
</head>
<body>
<div>
    <nav>
        <ul>
        <li>
             <a href="index.asp"><p>Home</p></a>
        </li>
        <li>
             <a href="html5_meter.asp"><p>Previous</p></a>
        </li>
        <li>
             <a href="html5_noscript.asp">
            <p>Next</p>
            <ul>
            <li>
                <p>here</p>
                <ul>

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

</div>

</body>
</html>

web_zhang
浏览 6229回答 1
1回答
随时随地看视频慕课网APP

相关分类

CSS3
Html5
我要回答