Question

所以我今年夏天创建了一个简单的类似博客的网站来记录我的活动，我需要一些帮助。我创建了一个下拉导航栏，但它会运行到我的标签中。我只需要让它向上移动到另一条线，这样它就不会遇到那个标签。这是我在StackOverflow上的第一篇文章，所以我不允许发布图片，但我可以将你链接到我在Imgur上的图片。 http://imgur.com/U0MtSO1

这是NavBar的HTML

<nav>
    <ul id="menu">
        <li><a href="index.html" id="selected">Home</a></li>
        <li>
            <a href="why.html">About</a>
            <ul class="hidden">
                <li><a href="why.html">Why Do It</a></li>
                <li><a href="future.html">Future Plans</a></li>
            </ul>
        </li>
        <li>
            <a href="#top">Archive</a>
            <ul class="hidden">
                <li><a href="#June">June 2015</a></li>
                <li><a href="#July">July 2015</a></li>
            </ul>
        </li>
    </ul>
</nav>

这是NavBar的CSS

/*************************
NAVIGATION
*************************/

/* Strip the ul of padding and list styling */

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

/* Create a horizontal list with spacing */

nav li {
    display: inline-block;
    float: left;
    margin-right: 1px;
}

/* Style for menu links */

nav li a {
    display: block;
    min-width: 140px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    color: #fff;
    background: #000;
    text-decoration: none;
}

/* Hover state for top level links */

nav li:hover a {
    background: #888888;
}

/* Style for dropdown links */

nav li:hover ul a {
    background: #f3f3f3;
    color: #2f3036;
    height: 40px;
    line-height: 40px;
}

/* Hover state for dropdown links */

nav li:hover ul a:hover {
    background: #888888;
    color: #fff;
}

/* Hide dropdown links until they are needed */

nav li ul {
    display: none;
}

/* Make dropdown links vertical */

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

/* Prevent text wrapping */

nav li ul li a {
    width: auto;
    min-width: 100px;
    padding: 0 20px;
}

/* Display the dropdown on hover */

nav ul li a:hover + .hidden, .hidden:hover {
    display: block;
}

请告诉我哪里出错了。

Answer 1

更改悬停样式以使用绝对定位，否则当您将鼠标悬停在菜单项上时，您会将后面的内容推到一边：

nav ul li a:hover + .hidden, .hidden:hover {
    position: absolute;
    display: block;
}

另外，您应该在clear之后的元素上执行nav，因此它会显示在新行上。

示例小提琴：http://jsfiddle.net/rvs5bs23/1/

Navbar与文本冲突

1 个答案: