带有子菜单的 HTML CSS 菜单

Question

我正在尝试使用非常简单的编码创建一个带有子菜单的自定义导航栏以保持其轻便但无法正常工作。请查看此代码和 fiddle 链接。 fiddle https://jsfiddle.net/tjmkf9sb/

如您所见，我想创建一个可悬停的子菜单，但子菜单现在不遵守 display: none 属性。请帮忙。

CSS

.menu {
    border: 1px solid aliceblue;
    margin-top: 55px;
    margin-left: auto;
}
.menu li {
    list-style: none;
    padding: 15px;
    border-radius: 5px;
    color: #fff;
    background: red; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left top, #1fc8db, #2cb5e8); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(bottom right, #1fc8db, #2cb5e8); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(bottom right, #1fc8db, #2cb5e8); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to bottom right, #1fc8db, #2cb5e8); /* Standard syntax */
    display: inline;
}
.menu li:hover {
    background: red; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left top, #26cfe3, #1aade4); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(bottom right, #26cfe3, #1aade4); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(bottom right, #26cfe3, #1aade4); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to bottom right, #26cfe3, #1aade4); /* Standard syntax */
}
.menu a:hover {
    text-decoration: none;
}
.menu li ul {
    display: block;
}
.submenu ul {
  display: none;
  position: absolute;
}

HTML

<div class="menu">
  <ul>
    <a href="dashboard.php"><li>Dashboard</li></a>
    <a href="dashboard.php">
      <li class="submenu">
        Licence Orders
        <ul class="dropdown">
          <li>Paid Orders</li>
          <li>Unpaid Orders</li>
        </ul>
      </li>
    </a>
    <a href="dashboard.php"><li>Dashboard</li></a>
    <a href="logout.php"><li>Logout</li></a>
  </ul>
</div>

请帮帮我。我已经坚持这个很长一段时间了。

Answer 1

添加:

.menu li ul {
    display: none;
}

.menu li:hover ul {
    display: block;
}

.menu {
	border: 1px solid aliceblue;
	margin-top: 55px;
	margin-left: auto;
}
.menu li {
	list-style: none;
	padding: 15px;
	border-radius: 5px;
	color: #fff;
	background: red; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left top, #1fc8db, #2cb5e8); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(bottom right, #1fc8db, #2cb5e8); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(bottom right, #1fc8db, #2cb5e8); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to bottom right, #1fc8db, #2cb5e8); /* Standard syntax */
	display: inline;
}
.menu li:hover {
	background: red; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left top, #26cfe3, #1aade4); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(bottom right, #26cfe3, #1aade4); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(bottom right, #26cfe3, #1aade4); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to bottom right, #26cfe3, #1aade4); /* Standard syntax */
}
.menu a:hover {
	text-decoration: none;
}
.menu li ul {
	display: none;
}

.menu li:hover ul {
  display: block;
}
.submenu ul {
  display: none;
  position: absolute;
}

<div class="menu">
  <ul>
    <li><a href="dashboard.php">Dashboard</a><li>
    <li class="submenu">
      <a href="dashboard.php">Licence Orders</a>
      <ul class="dropdown">
        <li>Paid Orders</li>
        <li>Unpaid Orders</li>
      </ul>
    </li>
    <li><a href="dashboard.php">Dashboard</a></li>
    <li><a href="logout.php">Logout</a></li>
  </ul>
</div>

按照您的规则设计风格。

编辑:只有 li 可以是 ul 的后代