向我的导航栏添加子菜单的 CSS 是什么

以下 html 代码用于导航栏。我在这里有一些注释掉的代码，我想成为"粘合剂"菜单项的子菜单。我将该子菜单列表放在"粘合剂"的"a"标签之间。我不确定该列表作为子菜单的正确位置。使该列表成为"粘合剂"子菜单的CSS是什么？另外，我知道我没有使用class=.... 在标签中。如果我坚持我在这里使用的约定(没有类=...(，css 会是什么？如果我使用类=....在标签中，这将如何改变 CSS？

<html>
<head>
    <title>Alt-Web Demos :: Multi-colored Drop Menu</title>
    <style>
        body { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; }
        /* BEGIN HORIZONTAL DROP-MENU */
        nav {
            position: relative;
            width: 600px;  /**adjust width as needed**/
            margin: 0 auto;
            padding: 0;
            text-align: center;
            background:#CFF;
        }
        nav ul {
            margin: 0;
            padding: 0
        }
        nav li {
            list-style: none;
            font-size: 12px;
            float: left;
            text-align: center;
        }
        /**top level menu**/
        nav li a {
            display: block;
            text-decoration: none;
            margin-right: 12px; /* space between links */
            width: 9em; /* adjust as needed or use auto */
            padding: 8px;
            font-weight: bold;
            line-height: 1.50em;
            border: 1px dotted #666;
            border-top: none;
            color:#000;
        }
        /**alternating background colors**/
        nav li:nth-child(odd) > a { background: #CAD3D3}
        nav li:nth-child(even) > a { background: #9BBB59}
        /**top menu style on mouse over**/
        nav li:hover > a{
            color: #FFF;
            background: #004A43;
        }
        /**sub-menu**/
        nav li ul {
            display: none;
            text-align: center;
            margin: 0;
            padding: 0 1em;
            background: none;
        }
        /**sub-menu, help for older IE**/
        nav li:hover ul, nav li.hover ul {
            display: block;
            position: absolute;
            padding: 0;
        }
        nav li:hover li, nav li.hover li { float: none; }
        /**drop-menu style**/
        nav li:hover li a, nav li.hover li a {
            width: 9em; /* adjust width as needed or use auto */
            margin-top: 0;
        }
        /**drop-menu style on mouse over**/
        nav li li a:hover {
            background:#D3E1B7;
            color: #004A43;
        }
        /* Clear floated elements at the end*/
        nav:after {
            visibility: hidden;
            display: block;
            font-size: 0;
            content: " ";
            clear: both;
            height: 0;
        }
        /**end Horizontal drop-menus**/
    </style>
</head>
<body class="demos">
    <div id="content">
        <nav>
            <ul>
                <li><a class="first" href="#">ABOUT US &#9660;</a>
                    <ul>
                        <li><a href="#">Videos</a></li>
                        <li><a href="#">Newsletter</a></li>
                    </ul>
                </li>
                <li><a href="#">PRODUCTS &#9660;</a>
                    <ul>
                        <li><a href="#">Broken Glass</a></li>
                        <li><a href="#">Mosaic Tiles</a></li>
                        <li><a href="#">Adhesives &#9658;
                            <!--<ul>
                                <li><a href="#">Sticky</a></li>
                                <li><a href="#">Stickier</a></li>
                                <li><a href="#">Stickiest</a></li>
                                <li><a href="#">Hella Sticky</a></li>
                            </ul>-->
                            </a>
                        </li>
                        <li><a href="#">Grout</a></li>
                    </ul>
                </li>
                <li><a href="#">ACCESSORIES &#9660;</a>
                    <ul>
                        <li><a href="#">Gloves</a></li>
                        <li><a href="#">Rubber Mallets</a></li>
                        <li><a href="#">Sponges</a></li>
                        <li><a href="#">Safety Glasses</a></li>
                    </ul>
                </li>
                <li><a href="#">CONTACT</a></li>
            </ul> 
        </nav>  
    </div>
</body>
</html>

您只想将子菜单嵌套在li中，而不是a中。然后，您需要更改用于显示嵌套ul的选择器，以使用直接十进制选择器li:hover > ul { display: block; }，以便在将鼠标悬停在一个子菜单上时不会显示li中的所有子菜单。然后，如果您希望它向右扩展，请在双嵌套菜单上使用left: calc(100% - 12px); top: 0;，calc()是考虑li中链接的水平边距。

<html>
<head>
  <title>Alt-Web Demos :: Multi-colored Drop Menu</title>
  <style>
    body {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    }
    /* BEGIN HORIZONTAL DROP-MENU */
    
    nav {
      position: relative;
      width: 600px;
      /**adjust width as needed**/
      margin: 0 auto;
      padding: 0;
      text-align: center;
      background: #CFF;
    }
    
    nav ul {
      margin: 0;
      padding: 0
    }
    
    nav li {
      list-style: none;
      font-size: 12px;
      float: left;
      text-align: center;
      position: relative;
    }
    /**top level menu**/
    
    nav li a {
      display: block;
      text-decoration: none;
      margin-right: 12px;
      /* space between links */
      width: 9em;
      /* adjust as needed or use auto */
      padding: 8px;
      font-weight: bold;
      line-height: 1.50em;
      border: 1px dotted #666;
      border-top: none;
      color: #000;
    }
    /**alternating background colors**/
    
    nav li:nth-child(odd) > a {
      background: #CAD3D3
    }
    
    nav li:nth-child(even) > a {
      background: #9BBB59
    }
    /**top menu style on mouse over**/
    
    nav li:hover > a {
      color: #FFF;
      background: #004A43;
    }
    /**sub-menu**/
    
    nav li ul {
      display: none;
      text-align: center;
      margin: 0;
      padding: 0 1em;
      background: none;
    }
    /**sub-menu, help for older IE**/
    
    nav li:hover > ul,
    nav li.hover > ul {
      display: block;
      position: absolute;
      padding: 0;
    }
    
    nav li:hover li,
    nav li.hover li {
      float: none;
    }
    /**drop-menu style**/
    
    nav li:hover li a,
    nav li.hover li a {
      width: 9em;
      /* adjust width as needed or use auto */
      margin-top: 0;
    }
    /**drop-menu style on mouse over**/
    
    nav li li a:hover {
      background: #D3E1B7;
      color: #004A43;
    }
    /* Clear floated elements at the end*/
    
    nav:after {
      visibility: hidden;
      display: block;
      font-size: 0;
      content: " ";
      clear: both;
      height: 0;
    }
    /**end Horizontal drop-menus**/
    
    nav ul ul ul {
      left: calc(100% - 12px);
      top: 0;
    }
  </style>
</head>
<body class="demos">
  <div id="content">
    <nav>
      <ul>
        <li><a class="first" href="#">ABOUT US &#9660;</a>
          <ul>
            <li><a href="#">Videos</a></li>
            <li><a href="#">Newsletter</a></li>
          </ul>
        </li>
        <li><a href="#">PRODUCTS &#9660;</a>
          <ul>
            <li><a href="#">Broken Glass</a></li>
            <li><a href="#">Mosaic Tiles</a></li>
            <li><a href="#">Adhesives &#9658;</a>
              <ul>
                <li><a href="#">Sticky</a></li>
                <li><a href="#">Stickier</a></li>
                <li><a href="#">Stickiest</a></li>
                <li><a href="#">Hella Sticky</a></li>
              </ul>
            </li>
            <li><a href="#">Grout</a></li>
          </ul>
        </li>
        <li><a href="#">ACCESSORIES &#9660;</a>
          <ul>
            <li><a href="#">Gloves</a></li>
            <li><a href="#">Rubber Mallets</a></li>
            <li><a href="#">Sponges</a></li>
            <li><a href="#">Safety Glasses</a></li>
          </ul>
        </li>
        <li><a href="#">CONTACT</a></li>
      </ul>
    </nav>
  </div>
</body>
</html>

相关内容

最新更新

热门标签：