用css实现三级导航菜单

时间：2021-12-27 09:27:44

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

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

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

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

代码如下：

<!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>

相关文章