纯【css下拉菜单】

下拉列表显示效果：

 

代码：

<div>
        <ul class="ul1">
            <li>
                <a href="">基地介绍</a>
                <ul class="ul2">
                    <li><a href="">汉企发言人</a></li>
                    <li><a href="">基地快讯</a></li>
                    <li><a href="">活动视角</a></li>
                    <li><a href="">活动快讯</a></li>
                    <li><a href="">练习我们</a></li>
                </ul>
            </li>
        </ul>
    </div>

 

css样式表：

* {
    margin: 0px;
    padding: 0px;
}
.ul1 {
    margin-left: 50px;
}
ul {
    list-style-type: none;
}
a {
    text-decoration: none;
}
.ul2 li {
    background-color: red;
    width: 100px;
    height: 30px;
    line-height: 30px;
    text-align: center;
}

    .ul2 li a:hover {
        background-color: blue;
        display: inline-block;
        width: 100%;
    }
/*隐藏下拉列表显示的内容*/
.ul2 li {
    display: none;
}
/* 显示当鼠标滑过ul1中的li时显示ul2中的li*/
.ul1 li:hover li {
    display: block;
}