Question

当我悬停li时，试图在左侧有一个子菜单，但问题是它还显示了li下面的空间。在这个演示中，当真棒链接3悬停在li click here

下面的一些空间时

<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的原因是你做了＆＃34; nav li＆gt; ul li：hover＆gt; UL＆＃34;由相对＆＃39; 定位，以便它的父级也会按其高度扩展。

我建议您使用＆＃34;绝对＆＃34;而不是＆＃34;亲属＆＃34;。

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

然后将其父级定位为＆＃34; relative＆＃34;。

.has_children {
  position: relative;
}

要获得效果，请尝试this。

Answer 2

正如edmond wang所说，对于.has_children的孩子来说，使用“绝对”而不是“相对”的位置，否则该元素仍然是流的一部分，并且将保留一个空间。赋予元素绝对位置会使其脱离流动，从而消除额外的空间。

.has_children {
   position: relative;
}

尝试使用类，以实现代码可读性和可维护性。

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

还尝试为主要的父母“ul”提供不同的课程

查看fiddle here

将子菜单悬停到左侧css

2 个答案: