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

时间:2015-02-26 13:39:09

标签: html css css3

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

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

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

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

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

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

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

帮助......请......?

2 个答案:

答案 0 :(得分:0)

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

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

我还注意到,您已将white-space: nowrap添加到"关于"子菜单ul,但不是其他子菜单ulHere's a JSFiddle with those fixes applied

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

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

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

答案 1 :(得分:0)

这是一种方法:

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;

}