鼠标触碰该区域
因为我为了网页的更好布局我首先用一个div将ul括起来，ul里有li，li里嵌套一个ul，若是想制作多级菜单，便可再第二个ul的li里再嵌套一个ul便可制作出多级菜单。
部分代码实现如下：
html代码
<div class="selectProperty">
<ul>
<li> <span>Date range:</span>This week
<ul>
<li class="first">Adjust time span </li>
<li class="same">Today</li>
<li class="same">This week</li>
<li class="same">This month</li>
</ul>
</li>
</ul>
</div>
css的代码：
.title h2 {
margin-top: 40px;
}
.title h2 a {
width: 400px;
height: 92px;
display: inline-block;
/* margin-top: 62px;
margin-left: 30px;
margin-right: 1208px;
margin-bottom: 26px;*/
margin: 0px 1238px 0px 0px;
color: #24292e;
font-size: 30px;
font-weight: 400;
text-align: center;
line-height: 120px;
}
/*.selectProperty {
width: 192px;
height: 35px;
background-color: #ccc;
position: absolute;
right: 50px;
bottom: 20px;
}*/
li {
list-style: none;
}
ul,li {
padding: 0;
margin: 0;
}
.repositories>.title {
position: relative;
}
.selectProperty>ul {
height: 175px;
width: 384px;
float: right;
margin-top: 5px;
position: absolute;
right: 60px;
top: 18px;
/*background-color: pink;*/
}
.selectProperty>ul>li {
width: 200px;
height: 35px;
background-color: #f0f4f6;
float: right;
line-height: 35px;
border: 1px solid #a1a4a8;
border-radius: 4px;
padding-left: 20px;
/*box-shadow: 2px 2px 6px 3px #dbdfe2 inset;*/
}
.selectProperty>ul>li span {
color: #898d90;
}
.selectProperty>ul>li i {
font-family: "icomoon";
font-style: normal;
font-weight: 400;
font-size: 12px;
}
.selectProperty>ul>li:hover {
background-color: #e9ecef;
box-shadow: 0 0 3px 3px #d4d8da inset;
cursor: pointer;
}
.selectProperty>ul>li>ul {
width: 384px;
height: 140px;
background-color: #eeaadd;
float: right;
margin-top: 6px;
border-radius: 4px;
border: 1px solid #cccccd;
overflow: hidden;
display: none;
/*display: none;*/
}
.selectProperty>ul li:hover ul{
display: block;
}
.selectProperty>ul>li>ul>li {
height: 35px;
padding-left: 40px;
line-height: 35px;
}
.selectProperty>ul>li>ul .first {
background-color: #f6f8fa;
border-bottom: 1px solid #cccccd;
position: relative;
font-weight: 700;
padding-left: 20px;
}
.selectProperty>ul>li>ul .first i{
font-family: "icomoon";
font-weight: 400;
font-style: normal;
position: absolute;
right: 10px;
color: #ccc;
}
.selectProperty>ul>li>ul .first i:hover {
color: #000;
}
.selectProperty>ul>li>ul li {
background-color: #fff;
}
.selectProperty>ul>li>ul .same:hover {
background-color: #4899ea;
}