css三级菜单

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css3级菜单</title>
<style>

    *{margin:0; padding:0;}
    ul li { list-style:none;}
    ul:first-child{width:900px; height:30px; background:#000; margin:0 auto;}
    ul:first-child>li{color:#fff; float:left; height:30px; line-height:30px; padding:0 20px; position:relative;}
    a{color:#fff; text-decoration:none; display:block; height:30px; line-height:30px; text-align:center;}    
    ul:first-child>li:hover{ background:#ff0000;}
    ul:nth-child(2){ background:#4e4e4e; margin-left:-20px; display:none; position:absolute;}
    ul:nth-child(2)>li{ padding:0 20px;}
    ul:first-child>li:hover ul:nth-child(2){ display:block;}
    ul:first-child>li ul:nth-child(2)>li:hover{ background:#666;}
    ul:nth-child(2)>li { position:relative;}
    ul:nth-child(2)>li ul:nth-child(3){ position:absolute; background:#00f; right:-112px; display:none; top:0;}
    ul:nth-child(2)>li ul:nth-child(3)>li{ padding:0 20px;}
    ul:nth-child(2)>li:hover ul:nth-child(3){ display:block;}
    span {  position:absolute; width:0; height:0;border:5px solid transparent; border-left-color:#000; top:10px; right:5px;}
</style>
</head>

<body>
    <ul>
        <li> <a href="#">一级菜单1</a>
            <ul>
                <li><a href="#">二级菜单1</a></li>
                
                <li><a href="#">二级菜单2</a>
                    <span></span>
                    <ul>
                        <li><a href="#">三级菜单1</a></li>
                        <li><a href="#">三级菜单2</a></li>
                    </ul>
                </li>
                <li><a href="#">二级菜单3</a></li>
            </ul>
        </li>
        <li><a href="#">一级菜单2</a></li>
    </ul>

</body>
</html>

简单代码,粗糙

posted @ 2017-05-26 09:33  Harry-  阅读(301)  评论(0编辑  收藏  举报