Question

我正在创建一个包含第三级菜单的导航栏。我已经为此编写了以下代码。它似乎工作到第二级，但第三级css不起作用。 HTML代码如下 -

<nav id="menu">
        <ul>
          <li><a target="_blank" href="#">Notebooks</a>
            <div>
              <ul>
                <li><a href="index-2.html">Notebook</a> 
                        <ul>
                            <li><a href="acer.php">Acer</a></li>
                            <li><a href="acer.php">HP</a></li>
                            <li><a href="acer.php">ASUS</a></li>
                            <li><a href="acer.php">SAMSUNG</a></li>

                        </ul>

                </li>
                <li><a href="header-footer-2.html">Tablet</a></li>
                <li><a href="header-footer-3.html">Charger for Notebook</a></li>
              </ul>
            </div>
          </li>


          <li><a>Information</a>
            <div>
              <ul>
                <li><a href="about-us.html">About Us</a></li>
                <li><a href="about-us.html">Delivery Information</a></li>

              </ul>
            </div>
          </li>
          <li><a href="contact-us.html">Contact Us</a></li>
        </ul>
      </nav>

css如下 -

#menu {background:#222; margin:15px 0px; height:40px; padding:0px 0px 0px 3px;}
#menu > ul > li.home { margin:0 0 0 0px; }
#menu > ul > li.home a { display:block; height:35px!important; line-height:35px!important; padding:5px 5px 0 5px!important; }
#menu > ul > li.home a span { background:url(../image/home-icon.png) center center no-repeat; display:block; width:30px; height:30px; text-indent:-9999px;}

#menu ul { list-style: none; margin: 0; padding:0 0 0 2px;}
#menu > ul > li { position: relative; float: left; z-index:1010; padding:0px; }
#menu > ul > li > a { font-size:12px; color: #fff; line-height:40px; text-decoration: none; display: block; padding:0px 10px 0px 10px; z-index: 1009; position: relative; font-weight:bold; text-transform:uppercase;}
#menu > ul > li:hover > a {color:#fff; background:#d45c93; }
#menu > ul > li > div { display: none; background:#fff; position:absolute; z-index:1008; padding:10px; border-top:2px solid #d45c93; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);}
#menu > ul > li:hover > div.custom_block{display:table;}
#menu > ul > li:hover > div.custom_block ul{display:table-cell;}

#menu > ul > li:hover > div { display: table;}
#menu > ul > li > div > ul { display: table-cell; }


#menu > ul > li ul + ul { padding-left: 20px; }
#menu > ul > li ul > li > a {text-decoration:none; padding:4px; display:block; min-width: 150px;}
#menu > ul > li div > ul > li > a {color:#222; }
#menu > ul > li div > ul > li > a:hover {background:url(../image/bullet-1.png) right center no-repeat; color:#d45c93;}

#menu > ul > li > ul >li >ul { display: none;}
#menu > ul > li > ul >li >ul:hover { display: block;}

Jsfiddle链接是Jsfiddle。请帮帮我。

Answer 1

你真的需要那些<div>吗？当我第一次尝试做一个纯CSS多级driopdown菜单时，我找到了this教程，这很容易理解。希望有所帮助。

编辑：here您的代码已修复且正常工作。虽然chipChocolate更进了一步。

Answer 2

您只需将相同的样式应用于下一个子级别。

<强> Updated Fiddle

#menu {
  background: #222;
  margin: 15px 0px;
  height: 40px;
  padding: 0px 0px 0px 3px;
}
#menu > ul > li.home {
  margin: 0 0 0 0px;
}
#menu > ul > li.home a {
  display: block;
  height: 35px!important;
  line-height: 35px!important;
  padding: 5px 5px 0 5px!important;
}
#menu > ul > li.home a span {
  background: url(../image/home-icon.png) center center no-repeat;
  display: block;
  width: 30px;
  height: 30px;
  text-indent: -9999px;
}
#menu ul {
  list-style: none;
  margin: 0;
  padding: 0 0 0 2px;
}
#menu > ul > li {
  position: relative;
  float: left;
  z-index: 1010;
  padding: 0px;
}
#menu > ul > li > a {
  font-size: 12px;
  color: #fff;
  line-height: 40px;
  text-decoration: none;
  display: block;
  padding: 0px 10px 0px 10px;
  z-index: 1009;
  position: relative;
  font-weight: bold;
  text-transform: uppercase;
}
#menu > ul > li:hover > a {
  color: #fff;
  background: #d45c93;
}
#menu > ul > li > div {
  display: none;
  background: #fff;
  position: absolute;
  z-index: 1008;
  border-top: 2px solid #d45c93;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
}
#menu > ul > li:hover > div.custom_block {
  display: table;
}
#menu > ul > li:hover > div.custom_block ul {
  display: table-cell;
}
#menu > ul > li:hover > div {
  display: table;
}
#menu > ul > li > div > ul {
  display: table-cell;
}
> li.categories_hor > div > .column > div ul li + li {} #menu > ul > li ul + ul {
  padding-left: 20px;
}
#menu > ul > li ul > li > a {
  text-decoration: none;
  padding: 4px;
  display: block;
  min-width: 150px;
}
#menu > ul > li >div > ul > li {
  position: relative;
}
#menu > ul > li div > ul > li > a {
  color: #222;
}
#menu > ul > li div > ul > li > a + ul {
  position: absolute;
  top: 0;
  left: 100%;
  display: none;
  background: #fff;
  z-index: 1008;
  margin-top: -1px;
  border-top: 2px solid #d45c93;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
}
#menu > ul > li div > ul > li > a + ul > li > a {
  text-decoration: none;
  color: #222;
  min-width: 150px;
}
#menu > ul > li div > ul > li > a + ul > li > a:hover {
  color: #d45c93;
}
#menu > ul > li div > ul > li > a:hover + ul,
#menu > ul > li div > ul > li > a + ul:hover {
  display: block;
}
#menu > ul > li div > ul > li > a:hover {
  background: url(../image/bullet-1.png) right center no-repeat;
  color: #d45c93;
}

<nav id="menu">
  <ul>
    <li class="home"><a title="Home" href="index-2.html"><span>Home</span></a>
    </li>
    <li><a target="_blank" href="#">Notebooks</a>

      <div>
        <ul>
          <li><a href="index-2.html">Notebook</a>	
            <ul>
              <li><a href="acer.php">Acer</a>
              </li>
              <li><a href="acer.php">HP</a>
              </li>
              <li><a href="acer.php">ASUS</a>
              </li>
              <li><a href="acer.php">SAMSUNG</a>
              </li>
            </ul>
          </li>
          <li><a href="header-footer-2.html">Tablet</a>
          </li>
          <li><a href="header-footer-3.html">Charger for Notebook</a>
          </li>
        </ul>
      </div>
    </li>
    <li><a>Information</a>

      <div>
        <ul>
          <li><a href="about-us.html">About Us</a>
          </li>
          <li><a href="about-us.html">Delivery Information</a>
          </li>
          <li><a href="about-us.html">Privacy Policy</a>
          </li>
          <li><a href="elements.html">Elements</a>
          </li>
        </ul>
      </div>
    </li>
    <li><a href="contact-us.html">Contact Us</a>
    </li>
  </ul>
</nav>

无法创建第三级Dropdown Nav

2 个答案: