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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。