0

私は Web デザインに関しては初心者で、Web サイトで見つけた jQuery メニューの例を Web ページに統合しようとしています。

しかし、メニュー関連のCSSをコメントすると、jQueryのHoverメソッドが動いているようで、どうやらCSSに何か問題が起きているようです。しかし、そのCSSでは機能しません。

Firefox および Chrome の最新バージョンを搭載した Windows でテスト済み。驚いたことに、これは IE で問題なく動作します。

ここで私の Web ページを見つけてください: http://jsfiddle.net/qHVE7/ (メニュー CSS にコメントしました。問題を確認するには、コメントを解除してください。)
これは、私がコメントアウトした CSS です。 

/*Menu CSS*/
/*ul#topnav {
    margin: 0; padding: 0;
    float: left;
    width: 100%;
    list-style: none;
    position: relative;
    font-size: 1.2em;
    background:url(images/topnav_s.gif) repeat-x;
}
ul#topnav li {
    float: left;
    margin: 0; padding: 0;
    border-right: 1px solid #555;
}
ul#topnav li a {
    padding: 10px 15px;
    display: block;
    color: #f0f0f0;
    text-decoration: none;
}

ul#topnav li:hover { background: #1376c9 url (images/topnav_a.gif) repeat-x; }
ul#topnav li span {
    float: left;
    padding: 15px 0;
    position: absolute;
    left: 0; top:35px;
    display: none;
    width: 970px;
    background: #1376c9;
    color: #fff;
    -moz-border-radius-bottomright: 5px;
    -khtml-border-radius-bottomright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -khtml-border-radius-bottomleft: 5px;
    -webkit-border-bottom-left-radius: 5px;
}
ul#topnav li:hover span { display: block; }
ul#topnav li span a { display: inline; }
ul#topnav li span a:hover {text-decoration: underline;}*/
/*Menu CSS Ends*/

元のサブメニュー コードは次のとおりです: http://jsfiddle.net/7DXzP/

どこが間違っていますか？私は基本的に例からjavascriptとCSSをコピーして貼り付けたからです。

4

2 に答える 2

1

cssのようにクラスリンクにマージンを追加します

.links {
   position: relative;
   margin-top:250px; 
}

マージンなしで<div class="links">メニューが表示されます

于 2013-03-19T08:39:24.327 に答える
0

問題は、リンクdiv（すべてのフローティングが実行されている）がメニューの一番上に表示されることです。これが、ホバーイベントが発生しない理由です。背景色の追加：赤; クラスにこれを示しています。float：leftを追加します。クラスに追加すると、メニューの下に表示されるので、再び機能します。

.links {
   float:left;
   position: relative;
}
于 2013-03-19T10:24:22.710 に答える