Question

我之前发布的问题得到了很好的答案（appear on hover and stay visible）。

编辑css和html感觉非常复杂因为我只是复制并粘贴并混合了两个不同的css源来自cssdeck.com以制作一个导航菜单。

因此，我决定从头开始制作一个正确的下拉菜单，其外观和行为与我之前制作的完全相同。

但是.....我再次被子菜单卡住了。

这一次，我想让子菜单水平，然后导航菜单的宽度会有所不同。我使用了white-space：nowrap使子菜单水平，但是现在当我将鼠标移动到下一个导航菜单时，子菜单就会消失。

另外，当子菜单出现时，我似乎无法使导航菜单保持原位。

我还在努力，所以这个例子可能看起来非常混乱。对不起。

帮助......请......？

Answer 1

由于子菜单设置为display: block，因此页面上的元素在出现时会在它们周围流动。要更正此行为，您需要将position: absolute添加到子菜单。如果元素绝对定位，页面上的其他元素将忽略它而不是围绕它流动。 Read more about positioning and how it affects page flow here

子菜单正在消失，因为您已将margin 10px应用于子菜单包装。删除该边距，并按预期保留子菜单。

我还注意到，您已将white-space: nowrap添加到＆＃34;关于＆＃34;子菜单ul，但不是其他子菜单ul。 Here's a JSFiddle with those fixes applied

更广泛地说，您的HTML / CSS迫切需要一些TLC：

div周围的ul包装器是多余的。只需使用ul s。
使用li_first和li_last等类是不必要的，因为我们可以选择具有:first-child和:last-child伪类的第一个/最后一个孩子。
使用通用类而不是ID，例如.submenu代替#subAbout，#subServ等

应用上述想法可以消除代码中的任何重复或不必要的特殊性，这是您应该努力做的事情。您的CSS只是长度的一小部分，更易读/可维护/可调试，并且您不会遇到忘记添加上述white-space属性等问题。

Answer 2

这是一种方法：

https://jsfiddle.net/Team_Exitium/34ueyguh/11/

这是实例：

https://jsfiddle.net/Team_Exitium/34ueyguh/11/embedded/result/

HTML：

<body>
    <nav>
        <ul id="top-ul">
            <li class="main"><a href="">Home</a>

                <ul class="sub">
                    <li><a>sdfsadfasdf</a>
                    </li>
                    <li><a>sjhfasdhljfdha</a>
                    </li>
                </ul>
            </li>
            <li class="main"><a href="">About</a>

                <ul class="sub">
                    <li><a>sdfsadfasdf</a>
                    </li>
                    <li><a>sjhfasdhljfdha</a>
                    </li>
                </ul>
            </li>
            <li class="main"><a href="">Service</a>

                <ul class="sub">
                    <li><a>sdfsadfasdf</a>
                    </li>
                    <li><a>sjhfasdhljfdha</a>
                    </li>
                </ul>
            </li>
        </ul>
    </nav>
</body>

CSS：

    body {margin:0;}

nav {width: 100%;height: 40px;}

#top-ul {height: 25px; margin:0;}
li {

    float:left;

    padding-right:55px;

    list-style-type:none;

}

a {

    font-family:"Unica One", "Noto Reg", sans-serif;

    font-size: 1.5em;

    color: #393939;

    text-decoration:none;

}

.sub {

    position:absolute;

    display:none;

    background-color: #c6342e;

    top: 35px;

    padding-left: 5px;

    font-family:"Noto Lgt", sans-serif;

    font-size: 12pt;

    border-radius:8px;

}

.sub a {

    color: #fff;

}

.sub a:hover {

    background-color: #d46762;

}

.sub li {

    padding-right: 25px;

}
.main {margin-top:5px; height:35px;}
.main:hover > ul {

    display:block;

}

带水平子菜单的水平下拉菜单

2 个答案: