带子菜单的HTML CSS菜单

Question

我正在尝试使用子菜单创建一个自定义导航栏，其中包含非常简单的编码，以使其保持清晰但不能正常工作。请看一下这段代码和小提琴链接。小提琴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

后代