Выпадающее меню не работает после переполнения: скрытый ввод

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

Ваша структура HTML неверна (закрывающие теги отсутствуют), а ваш CSS содержит ошибку для ul li. Исправлено ниже.

* {
  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; REMOVED */
  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;
}

<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>
                <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>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

Answer 2

У вас есть пропущенные ul и li перед вторым последним закрывающим элементом.

Добавить d-flex на ul после элемента navbar-fixed-top <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>