html - 三级下拉菜单的问题

Question

我在三级菜单中遇到问题(如 ul li ul li ul li)。我试图创建一个三级下拉菜单，但在编写代码时遇到了困难。这是我试过的代码:

CSS

#cssmenu {
    margin: width:625px;
    float:right;
    padding-top: 60px;
    padding-right: 20px;
    padding-bottom: 0;
    padding-left: 0;
    color:#727272;
    font:normal 14px Arial, Helvetica, sans-serif;
}
#cssmenu ul {
    height: 35px;
    list-style: none;
    margin: 0;
    padding: 0;
}
#cssmenu li {
    float: left;
    padding: 0px;
}
#cssmenu li a {
    display: block;
    font-weight: normal;
    line-height: 35px;
    margin: 0px;
    padding: 0px 15px;
    text-align: center;
    text-decoration: none;
}
#cssmenu > ul > li > a {
    color: #cccccc;
}
#cssmenu ul ul a {
    color: #cccccc;
}
#cssmenu li > a:hover, #cssmenu ul li:hover > a {
    background: #FF4A00;
    color: #FFFFFF;
    text-decoration: none;
}
#cssmenu li ul {
    background: #333333;
    display: none;
    height: auto;
    padding: 0px;
    margin: 0px;
    border: 0px;
    position: absolute;
    width: 220px;
    z-index: 200;
    /*top:1em;
/*left:0;*/
}
#cssmenu li:hover ul {
    display: block;
}
#cssmenu li li {
    display: block;
    float: none;
    margin: 0px;
    padding: 0px;
    width: 220px;
}
#cssmenu li:hover li a {
    background: none;
}
#cssmenu li ul a {
    display: block;
    height: 35px;
    font-size: 12px;
    font-style: normal;
    margin: 0px;
    padding: 0px 10px 0px 15px;
    text-align: left;
}
#cssmenu li ul a:hover, #cssmenu li ul li:hover > a {
    background: #FF4A00;
    border: 0px;
    color: #ffffff;
    text-decoration: none;
}
#cssmenu p {
    clear: left;
}
#cssmenu li ul li ul {
    left:220px !important;
    top:35px;
}
#cssmenu li ul li ul li a:hover {
    display:block;
}

HTML

<div id="cssmenu">
    <ul>
        <li><a href="index.html">Home</a>
        </li>
        <li><a href="aboutus.html">About Us</a>

            <ul>
                <li> <a href="#">Vision</a>
                </li>
                <li> <a href="#">Mission</a>
                </li>
                <li> <a href="#">Our Philosophy</a>
                </li>
                <li> <a href="#">Organisation Structure</a>
                </li>
                <li> <a href="#">Chairman's Message</a>
                </li>
            </ul>
        </li>
        <li><a href="#">Policy</a>

            <ul>
                <li><a href="#">HSE</a>
                </li>
                <li><a href="#">Quality</a>
                </li>
            </ul>
        </li>
        <li><a href="#">Services</a>

            <ul>
                <li><a href="#">Electrical</a>

                    <ul>
                        <li><a href="#">Equipment Installation </a>
                        </li>
                        <li><a href="#">Lighting Systems</a>
                        </li>
                    </ul>
                </li>
                <li><a href="#">Mechanical</a>

                    <ul>
                        <li><a href="#">HVAC Systems </a>
                        </li>
                        <li><a href="#">P & D </a>
                        </li>
                        <li><a href="#">Lifts and Crane</a>
                        </li>
                        <li><a href="#">Structural steel </a>
                        </li>
                    </ul>
                </li>
                <li><a href="#">ELV</a>

                    <ul>
                        <li><a href="#">ELV</a>
                        </li>
                        <li><a href="#">FLS</a>
                        </li>
                    </ul>
                </li>
                <li><a href="#">Maintenance</a>
                </li>
            </ul>
        </li>
        <li><a href="#">Company Profile</a>
        </li>
        <li><a href="#">Careers</a>
        </li>
        <li><a href="#">Contact us</a>
        </li>
    </ul>
</div>

Answer 1

   .dropdown {
         position: relative;
         display: inline-block;
         font-size: 110%;
    }


   .dropdown ul {
         position: absolute;
         top: -100%;
         left: 100%;
         display: none;
         background-color: inherit;
         padding: 0;
         list-style: none;
         border: 1px solid #ccc;
   }

  .dropdown ul li {
         position: relative;
         list-style: none;
         margin: 5px 0;
         background-color: inherit;
  }

  .dropdown ul li a {
         display: block;
         padding: 3px 10px;
   }

  .dropdown ul li a:hover {
         background-color: #18b6f2 !important;
  }

  .dropdown ul li:hover > ul {
         display: block;
         top: 0;
         background-color: inherit;
   }

  .dropdown ul li:hover > a {
         background-color: #85ddff;
  }

  .dropdown:hover > ul {
        display: block;
  }

试试这个。纯css3菜单。这是可扩展的(因为您可以拥有任意数量的级别)。只需注释您的 css 文件中的所有行并粘贴即可。将类“下拉”应用于菜单容器，您就完成了。

        Sample markup 


       <div class="dropdown" style="background-color: white;">
    <a>Menu</a>
    <ul>
        <li>
            <a>Fruits</a>
            <ul>
                <li><a>Apple</a></li>
                <li><a>Orange</a></li>
                <li><a>Grape</a></li>
                <li><a>Banana</a></li>
            </ul>
        </li>
        <li>
            <a>Vegetables</a>
            <ul>
                <li><a>Lemon</a></li>
                <li><a>Cucumber</a></li>
                <li><a>Melon</a></li>
            </ul>
        </li>
        <li>
            <a>Birds</a>
            <ul>
                <li>
                    <a>Flying</a>
                    <ul>
                        <li><a>Crow</a></li>
                        <li><a>Parrot</a></li>
                    </ul>
                </li>
                <li>
                     <a>Walking</a>
                     <ul>
                           <li><a>Hen</a></li><li><a>Duck</a></li></ul>
                </li>
            </ul>
        </li>
    </ul>
</div>