css基础下拉菜单

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中的相对定位,绝对定位,还要注意定位移动的距离,超出距离会使光标不能从父菜单移动到子菜单