时间戳

首页 > 解决方案 > 溢出后下拉菜单出错：隐藏放置

html - 溢出后下拉菜单出错：隐藏放置

问题描述

我的下拉菜单目前看起来像这样：在此处输入图像描述

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

* {
  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>

我知道这只是我错过的一件小事，非常感谢您对此的一些指导。

标签： htmlcssbootstrap-4

解决方案

您的 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>

推荐阅读