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

时间：2018-08-30 05:07:30

标签： html css bootstrap-4

我的下拉菜单当前如下所示：enter image description here

房屋的位置不太正确，就像我在左上方所希望的那样，如何解决此问题？非常感谢您的帮助。

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

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

2 个答案:

答案 0 :(得分：0)

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

在导航栏固定顶部元素<div class="nav navbar-fixed-top"> <ul class="d-flex">后的ul上添加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>

答案 1 :(得分：0)

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

相关问题
最新问题