將子菜單懸停到左側css

Question

當我懸停li時試圖在左側有一個子菜單，但問題是它還顯示了li下面的空間。 在這個演示中，當真棒鏈接3懸停時， 點擊這里有一些空間

<div id="navbar" class="navbar">
    <nav id="site-navigation" class="navigation main-navigation" role="navigation">
        <div class="menu-mega-container">
            <ul id="menu-mega" class="nav-menu">
                <li>
                    <a href="#">My awesome button</a>
                </li>
                <li class="has_children">
                    <a href="#">My awesome button</a>
                    <ul>
                        <li>
                            <a href="#">awesome link nº 1</a>
                        </li>
                        <li>
                            <a href="#">awesome link nº 2</a>
                        </li>
                        <li class="has_children">
                            <a href="#">awesome link nº 3</a>
                            <ul>
                                <li>
                                    <a href="#">awesome link nº 1</a>
                                </li>
                                <li>
                                    <a href="#">awesome link nº 2</a>
                                </li>
                                <li>
                                    <a href="#">awesome link nº 3</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>
</div>

和css

nav {
    position: relative;
}
nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

nav > div > ul > li {
    float: left;
}
nav > div > ul > li > a:hover {
    background-color: red;
}
nav > div > ul > li > ul {
    position: absolute;
    background-color: green;
    display: none;
    z-index: 500;
}
nav > div > ul > li:hover > ul {

    display: block;
}
nav li > ul ul {
    display: none;
}

nav li > ul li:hover > ul {
    display: block;
    position: relative;
    left: 100%;
    top: -20px;
    background-color: green;
}

Answer 1

你在這里看到spacer的原因是你將'nav li> ul li：hover> ul'定位為'relative' ，這樣它的父級也會被它的高度擴展。

我建議你用“絕對”代替“親戚”。

nav li > ul li:hover > ul {
  display: block;
  position: absolute;
  left: 100%;
  top: 20px;
  background-color: green;
  width: 100%;
}

然后通過“親戚”使其父母定位。

.has_children {
  position: relative;
}

為了效果，請試試這個 。

Answer 2

正如edmond wang所說，對於.has_children的孩子來說，使用“絕對”而不是“相對”的位置，否則該元素仍將是流程的一部分，並且將為其保留一個空間。 賦予元素絕對位置會使其脫離流動，從而消除額外的空間。

.has_children {
   position: relative;
}

嘗試使用類，以獲得代碼可讀性和可維護性。

.is_children {
  position: absolute;
  width: 100%;
  top: 2px;
  left: 100%;
  padding: 8px;
}

還嘗試給主父“ul”提供不同的類

看看這里的小提琴