-1

嘿，伙计们不确定这是什么交易，但是当页面处于全屏状态时，一切都可以正常显示，但是当浏览器缩小到一半或足以使顶部导航栏离开屏幕时，它只会将其切断而不是除非你将鼠标悬停在它上面，否则动画。我对 CSS 很陌生，所以我不确定是什么原因造成的，因为很多代码都是谷歌复制粘贴的。所以，是的，任何关于它可能是什么的诊断或想法都会很棒！

小提琴

4

2 回答 2

2

好的，我已经完全重做了你的页面......所以它在 jsFiddle 上：http: //jsfiddle.net/VW7yK/1/。

如果浏览器窗口的大小减小，菜单将折叠（参见 Fiddle）。

HTML：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8" />
    <title>Site Title</title>
    <style type="text/css">
/* Style here */
    </style>
</head>
<body>
    <div>
        <ul id="nav">
            <li>
                <a href="/">Home</a>
            </li>
            <li>
                <a href="/signupcentral/">Signup Central</a>
            </li>
            <li>
                <a href="/submit/">Submit</a>
            </li>
            <li>
                <a href="/contactus/">Contact Us</a>
            </li>
            <li>
                <a href="/faq/">FAQ</a>
            </li>
            <li>
                <a href="/logout/">Logout</a>
            </li>
        </ul>
    </div>
    <div id="content">
        <h1>Heading</h1>
        Content here.
    </div>
    <div id="footer">
        <div>
            &copy; 2012 HTML Footer Inc. All rights reserved.
        </div>
    </div>
</body>
</html>

CSS：

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%
}
body {
    font-family: Arial, Helvetica, sans-serif
}
#nav {
    margin: 0;
    min-width: 200px;
    min-height: 50px;
    overflow: auto;
    text-align: center;
    list-style: none;
    line-height: 50px;
    font-size: 1.5em;
    background: #369;
    border: 1px solid #000
}
#nav li {
    float: left;
    background: #369;
    border: 1px solid #338;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    transition: background .2s;
    -moz-transition: background .2s;
    -webkit-transition: background .2s;
    -o-transition: background .2s;
    -ms-transition: background .2s
}
#nav li:hover {
    background: #36f
}
#nav li a {
    display: block;
    padding: 0 25px;
    text-decoration: none;
    color: #fff
}
#content {
    padding: 30px
}
#footer {
    position: absolute;
    top: 100%;
    margin-top: -50px;
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center
}
#footer div {
    display: inline-block;
    min-width: 300px;
    padding: 0 20px;
    background: #369;
    border-radius: 20px 20px 0 0;
    -moz-border-radius: 20px 20px 0 0;
    -webkit-border-radius: 20px 20px 0 0
}
于 2012-07-29T22:25:32.937 回答
1

添加overflow: hidden到#navbar2 ul。而且，试着自己看东西。并自己制作东西。并尝试。

于 2012-07-29T21:05:49.010 回答