Question

我正在尝试创建一个导航栏，其中包含第一个菜单的4个菜单和1个子菜单，但是，我无法创建子菜单。这是我的代码到目前为止，我不知道如何在我悬停甚至点击第一个菜单时显示子菜单。感谢。

<!DOCTYPE html>
<html>
<head>
<title> Website </title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
    <nav>
        <ul>
            <li><a class="#" href="#">Menu 1</a></li>
                <ul>
                    <li>Submenu 1</li>
                </ul>
            <li><a href="#">Menu 2</a></li>
            <li><a href="#">Menu 3</a></li>
            <li><a href="#">Menu 4</a></li>
        </ul>
    </nav>
</body>
</html>

这是我的CSS

nav ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #111111;
        border: solid 1px black;
}
nav ul li {
    float: left;
}
nav ul li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
nav ul li a:hover {
    background-color: #ee8601;
}
.active {
    background-color: #ee8601;
}

Answer 1

HTML错误： ul不是ul的有效后代（应位于li内）
CSS：将li设置为position:relative;以包含内部Sub-UL的位置
CSS（缺少部分）：将子ul设置为position:absolute;和display:none;
CSS（缺少部分）：在li:hover＆gt; display:block;它的孩子ul元素。

_示例1：

使用`display: none/block`

＆＃13;

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  /*overflow: hidden;*/
  background-color: #111;
  /*border: solid 1px black;*/
}
nav ul li {
  /*float: left;*/
  display:inline-block; /*add istead of "float:left;" */
  vertical-align:top; /*add*/
  position:relative; /*add to contain sub ul*/
}
nav a {
  display: block;
  color: white;
  text-align: center;
  white-space:nowrap; /*add*/
  padding: 14px 16px;
  text-decoration: none;
}
nav li:hover > a, /* target the LI:hover, than change styles to A */
nav a.active{ /* merge together */
  background-color: #ee8601;
}

/* HIDE sub ul */
nav li ul{
  position:absolute;
  display:none;
}
/* SHOW sub ul */
nav li:hover ul{
  display:block;
}

＆＃13;

<nav>
  <ul>
    <li>
      <a class="#" href="#">Menu 1</a>
      <ul>
        <li><a href="#">Submenu 1</a></li>
      </ul>
    </li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
    <li><a href="#">Menu 4</a></li>
  </ul>
</nav>

＆＃13;

以上是使用display none/block，现在让我们看看如何让它更加新鲜添加一些动画：

_示例2：

使用`visibility, opacity, transition and transform`

＆＃13;

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #111;
}
nav ul li {
  display:inline-block;
  vertical-align:top;
  position:relative;
}
nav a {
  display: block;
  color: white;
  text-align: center;
  white-space:nowrap;
  padding: 14px 16px;
  text-decoration: none;
}
nav li:hover > a,
nav a.active{
  background-color: #ee8601;
}
nav li ul{ /* HIDE sub ul */
  position:absolute;
  visibility:hidden;
  opacity:0;
  transition:0.2s;
  transform: translateY(20%);
}
nav li:hover ul{  /* SHOW sub ul */
  visibility: visible;
  opacity:1;
  transform: translateY(0%);
}

＆＃13;

<nav>
  <ul>
    <li>
      <a class="#" href="#">Menu 1</a>
      <ul>
        <li><a href="#">Submenu 1</a></li>
      </ul>
    </li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
    <li><a href="#">Menu 4</a></li>
  </ul>
</nav>

＆＃13;

Answer 2

您可以这样做：

隐藏子菜单，然后在其母li悬停时显示。

nav ul li ul {
  display:none;
}

nav ul li:hover ul {
  display:block;
}

但是您需要将子菜单放在li里面，如下所示：

<li><a class="#" href="#">Menu 1</a>
    <ul>
        <li>Submenu 1</li>
    </ul>
</li>

以下是一个工作示例：http://codepen.io/caleboleary/pen/eJOdQb

我无法创建导航栏子菜单

2 个答案:

使用`display: none/block`

使用`visibility, opacity, transition and transform`

我无法创建导航栏子菜单

2 个答案:

使用display: none/block

使用visibility, opacity, transition and transform

使用`display: none/block`

使用`visibility, opacity, transition and transform`