周末,闲来无事,手有些痒痒,想写代码了,于是就有了这个纯 CSS 的多级菜单了,根据自己的理解写的,也没有跟其他人的对比。分享出来吧。

设计思路

我的思路吧,其实主要就是 li>ul{display:none}li:hover>ul{display:block} 这样实现鼠标悬停,子项显示的效果,再加上 position:relative 的定位就可以实现基本的菜单了

HTML 代码

<ul class="menu">
    <li>
        <p>前端介绍</p>
        <ul>
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">JavaScript</a></li>
        </ul>
    </li>
    <li><a href="http://blog.AlphaTr.com/">我的博客</a></li>
    <li><a href="#">新浪微博</a></li>
    <li>
        <p>后端技术</p>
        <ul>
            <li><a href="#">数据库</a></li>
            <li><a href="#">Linux</a></li>
            <li>
                <p>语言</p>
                <ul>
                    <li><a href="#">PHP</a></li>
                    <li><a href="#">ASP</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">腾讯微博</a></li>
</ul>

比较结构化的菜单吧,没有非主流的写法。

CSS 代码

ul{
    box-shadow:1px 1px 5px #777;
    padding:0;
    position:relative;
    display:none;
    width:85px;
    z-index:1;
    font-size:12px;
}
.menu li{
    position:relative;
    border:1px solid #999;
    border-bottom:0;
    background:#FFF;
    color:#222;
    padding:0;
    height:30px;
    line-height:30px;
    list-style-type:none;
}
.menu li:hover,.menu a:hover {
    background:#E0EEFF;
    color:#555;
}
.menu a, .menu p {
    padding:0 5px 0 12px;
    margin:0;
    display:block;
}
.menu p {
    background:url(right.png) right top no-repeat;
}
.menu a {
    text-decoration:none;
    color:#36F;
}
.menu {
    display:block;
}
.menu>li>ul {
    z-index:2;
}
.menu>li>ul>li>ul {
    z-index:3;
}
ul>li:hover>ul{
    display:block;
    left:80px;
    top:-28px;
}

基本就是思路里面的代码,加上一些美化的代码了.