html下拉菜单hover,css用hover制作下拉菜单

首先我们的需求就是 制作一个鼠标移动到某个区域就会有下拉菜单的弹出,这样会有更多的子类内容,示例代码如下:

Title

*{

margin: 0;

}

.title{

background-color: #2b99ff;

height: 50px;

line-height: 50px;

text-align: center;

color: #3d2fa2;

}

.user{

width: 180px;

height: 50px;

margin-left: 20px;

background-color: #7a7b50;

cursor: auto;

}

.user .msg{

display: none;

width: 200px;

height: 40px;

float: left;

border: 1px solid red ;

background-color: #787b53;

z-index: 2;

position: relative;

}

.user .msg a:hover{

cursor: pointer;

}

.clearfix:after{

content:"0";

display: block;

clear: both;

visibility: hidden;

height: 0;

}

.user