jsp:
<nav>
<ul>
<li><a href="javascript:;">菜单1</a>
<ul>
<li><a href="javascript:;">1-1</a>
<ul>
<li><a href="javascript:;">1-2</a></li>
</ul></li>
</ul></li>
</ul>
<ul>
<li><a href="javascript:;">菜单2</a>
<ul>
<li><a href="javascript:;">2-1</a>
<ul>
<li><a href="javascript:;">2-2</a></li>
</ul></li>
</ul></li>
</ul>
</nav>
css:
/*下拉菜单*/
nav ul {
list-style: none;
}
nav li {
position: relative; float: left;
}
nav ul li {
float: left; width: 230px;
}
nav ul li a {
display: block; height: 30px; line-height: 30px; text-align: center; width: 230px;
}
nav ul ul {
position: absolute; top: 30px; visibility: hidden; left: -40px;
}
/*关键点*/
nav ul li:hover ul,nav ul a:hover ul {
visibility: visible;
}
nav ul ul li a {
display: inline-block; width: 230px; height: 30px; border-bottom: 1px solid #858585;
}
nav ul ul li a:hover,nav ul li a:hover{
background-color:#87CEEB;
}
注:此功能实现主要使用的是css中的相对定位,绝对定位,还要注意定位移动的距离,超出距离会使光标不能从父菜单移动到子菜单