-1

取引が何であるかはわかりませんが、ページが全画面表示の場合はすべて正常に表示されますが、ブラウザのサイズが半分に縮小されるか、上部のナビゲーションバーが画面から消えるのに十分な場合は、表示されなくなります。カーソルを合わせない限り、アニメートします。私はCSSに非常に慣れていないので、このコードの多くがgoogle-copypastedであるため、CSSの原因がよくわかりません。そうそう、それが何であるかについての診断や考えは素晴らしいでしょう！

フィドル

4

2 に答える 2

2

さて、私はあなたのページを完全にやり直しました...それでここにそれはjsFiddleにあります：http：//jsfiddle.net/VW7yK/1/。

ブラウザウィンドウのサイズが縮小されると、メニューが折り返されます（フィドルを参照）。

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＃navbar2ulに追加します。また、自分で物事を見てみてください。そして自分で物を作る。そして、まったく試してみてください。

于 2012-07-29T21:05:49.010 に答える