用css实现三级导航菜单

时间 2019-11-17

标签 css 实现三级导航菜单栏目 CSS 繁體版

原文原文链接

主要使用css的hover伪类来实现该功能。css

主要思路：先搭出三级菜单的框架，而后使用css的：hover来实现！html

　　对li添加类selected，对该类添加position:relative属性，而后对其二级三级菜单添加position:absolute属性，并设置其top:-1px（由于有1像素的边框）left:-999px；使其在也页面中向左偏移出窗口。框架

　　对li设置：hover伪类，当鼠标指针移动到li上时，改变二级三级菜单的left值，这样就能够实现一个简单的三级导航菜单！spa

代码以下：指针

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>三级导航菜单</title>
    <style type="text/css">
    body{font-size: 12px;}
            
    .menu1, .menu1 ul {
        list-style: none;
        width: 120px;
        background-color: #f9f9f9;
        border: 1px solid #ccc;
   　　 border-bottom: 0;
  　　  margin: 0;
   　　 padding: 0;
   　　 text-align: left;
   　　 text-indent: 10px;
　　}
    .menu1 a:hover {
  　　  color: #336666;
  　　  background-color: #F5E3C0;
　　}
    .menu1 a {
 　　   display: block;
  　　  text-decoration: none;
  　　  color: #000;
 　　   border-bottom: 1px solid #ccc;
 　　   width: 120px;
  　　  line-height: 22px;
　　}

    .menu1 .active {
  　　  position: relative;
　　}
    .menu1 li:hover ul ul {
        left: -999px;
　　}
    .menu1 li:hover ul {
  　　  left: 120px;
　　}
    .menu1 li li:hover ul {
  　　  position: absolute;
  　　  left: 120px;
　　}
    .menu1 .active ul {
 　　   position: absolute;
  　　  top: -1px;
  　　  left: -999px;
　　}
            
</style>
</head>
<body>
    <div class="menu">
    <ul class="menu1">
    <li><a href="###">Home</a></li>
    <li><a href="###">About Me</a></li>
    <li class="active"><a>Tutorials</a>
        <ul>
        <li><a href="###">Submenu1</a></li>
        <li><a href="###">Submenu2</a></li>
        <li class="active"><a href="">Submenu3</a>
        <ul>
        <li><a href="###">Submenu31</a></li>
        <li><a href="###">Submenu32</a></li>
        <li><a href="###">Submenu33</a></li>
        <li><a href="###">Submenu34</a></li>
        <li><a href="###">Submenu35</a></li>
        </ul>
        </li>
        <li><a href="###">Submenu4</a></li>
        <li><a href="###">Submenu5</a></li>
        </ul>
    </li>
    <li><a href="###">Gallery</a></li>
    <li><a href="###">Contact Me</a></li>
    </ul>
    </div>
    </body>
</html>