html - 溢出后下拉菜单出错 : hidden put

Question

我的下拉菜单目前看起来像这样:

主页位置不太正确，就像我希望它位于左上角一样，我该如何解决这个问题？非常感谢您的帮助。

* {
  margin: 0;
  padding: 0;
}

nav {
  width: 1600px;
}

ul {
  list-style: none;
  background-color: #333;
}

ul li {
  width: 200px;
  background: #333;
  float: left;
  height: 35px;
  line-height: 35px;
  text-align: center;
  margin-right: 2px;
  position: relative;
  float: none;
  display: inline-block;
}

ul li:hover {
  background: #0e6ea8;
}

ul li a {
  color: #fff;
  text-decoration: none;
  font-family: sans-serif;
  display: block;
  border: none;
}

ul li ul li {
  border-top: 1px solid #fff;
}

ul li ul {
  display: none;
}

ul li:hover ul {
  display: block;
}

ul li ul .first {
  position: absolute;
  left: 201px;
  top: 0;
  display: none;
}

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

ul li ul .second {
  position: absolute;
  left: 201px;
  top: 0;
  display: none;
}

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

ul li ul li ul .seconda {
  position: absolute;
  left: 201px;
  top: 0;
  display: none;
}

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

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<nav>
  <div class="nav navbar-fixed-top">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Options<span> &#x25BE</span></a>
        <ul>
          <li><a href="#">Consumer 
Management&nbsp<span>&#x25B6</span></a>
            <ul class="first">
              <li><a href="#">www.e-homes.com.my</a></li>
            </ul>
          </li>
          <li><a href="#">Project Admin 
Tool&nbsp<span>&#x25B6</span></a>
            <ul class="second">
              <li><a href="#">Download</a></li>
              <ul class="seconda">
                <li><a href="#">Download MR</a></li>
                <li><a href="#">Download PO</a></li>
                <li><a href="#">Download Invoice</a>
                </li>
                <li><a href="#">Download lalalala</a>
                </li>
              </ul>
            </ul>
          </li>
        </ul>
  </div>
</nav>

我知道这只是我错过的一件小事，希望得到一些指导，再次非常感谢。

Answer 1

在倒数第二个结束元素之前缺少 ul 和 li。

在 navbar-fixed-top 元素之后的 ul 上添加 d-flex <div class="nav navbar-fixed-top"> <ul class="d-flex">

* {
  margin: 0;
  padding: 0;
}

nav {
  width: 1600px;
}

ul {
  list-style: none;
  background-color: #333;
}

ul li {
  width: 200px;
  background: #333;
  float: left;
  height: 35px;
  line-height: 35px;
  text-align: center;
  margin-right: 2px;
  position: relative;
  float: none;
  display: inline-block;
}

ul li:hover {
  background: #0e6ea8;
}

ul li a {
  color: #fff;
  text-decoration: none;
  font-family: sans-serif;
  display: block;
  border: none;
}

ul li ul li {
  border-top: 1px solid #fff;
}

ul li ul {
  display: none;
}

ul li:hover ul {
  display: block;
}

ul li ul .first {
  position: absolute;
  left: 201px;
  top: 0;
  display: none;
}

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

ul li ul .second {
  position: absolute;
  left: 201px;
  top: 0;
  display: none;
}

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

ul li ul li ul .seconda {
  position: absolute;
  left: 201px;
  top: 0;
  display: none;
}

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

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<nav>
  <div class="nav navbar-fixed-top">
    <ul class="d-flex">
      <li><a href="#">Home</a></li>
      <li><a href="#">Options<span> &#x25BE;</span></a>
        <ul>
          <li><a href="#">Consumer 
Management&nbsp;<span>&#x25B6;</span></a>
            <ul class="first">
              <li><a href="#">www.e-homes.com.my</a></li>
            </ul>
          </li>
          <li><a href="#">Project Admin 
Tool&nbsp;<span>&#x25B6;</span></a>
            <ul class="second">
              <li><a href="#">Download</a></li>
              <ul class="seconda">
                <li><a href="#">Download MR</a></li>
                <li><a href="#">Download PO</a></li>
                <li><a href="#">Download Invoice</a>
                </li>
                <li><a href="#">Download lalalala</a>
                </li>
              </ul>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</nav>