0

わかりました、皆さん。だから私が達成しようとしているのは、自分のサイトのトップナビにメニューを表示し、マウスをホバーしてその下のリストにいくつかのものを表示することです。

これまでのところ、動作するまで、テスト html ファイルでローカルに取り組んでいます。だから私がこれまでに得たのはこのメニューです：

<ul id="menu">
<li><a href="#">Notifications</a>
    <ul>
        <li id="foot-notify-954>
            <a href="#" class="delete" onclick="deleteNotification('Delete this item?', 954);return false;">X</a><a href="http://test.com/testing">testing</a> left a comment for your <a href="http://test.com/member/174/blog/view/28/">blog</a> 22 hours ago
        </li>
        <li id="foot-notify-953>
            <a href="#" class="delete" onclick="deleteNotification('Delete this item?', 953);return false;">X</a>
            <p><a href="http://test.com/testing">testing</a> left a comment for your <a href="http://test.com/member/174/blog/view/28/">blog</a> <span>22 hours ago</span></p>
        </li>
    </ul>
</li>

そして私のCSSコード：

ul {
    font-family: Arial, Verdana;
    font-size: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}
ul li {
    display: block;
    position: relative;
    float: left;
}
li ul { display: none }
ul li a {
    display: block;
    text-decoration: none;
    color: #ffffff;
    border-top: 1px solid #ffffff;
    padding: 5px 15px 5px 15px;
    background: #2C5463;
    margin-left: 1px;
    white-space: nowrap;
}
ul li a:hover { background: #617F8A }
li:hover ul {
    display: block;
    position: absolute;
}
li:hover li {
    float: none;
    font-size: 11px;
}
li:hover a { background: #617F8A }
li:hover li a:hover { background: #95A9B1 }

<a>問題は、通知ID内に複数のハイパーリンクがあり、各li通知が1行で表示されるようになっていることだと思います。<li> 形式のように、最初にXボタンで削除してから通知自体を削除します。

4

3 に答える 3

1

あなたの問題は、コードのフォーマットが悪いようです。これは、コードのクリーンで編集されたバージョンです。コードの「破損」は、CSS フォーマットの問題です。ブロックの代わりにインライン ブロックを使用すると、物事を適切に並べることができ、背景スタイルを<li>ではなく に変更<a>すると見栄えが良くなります。

于 2012-09-03T14:03:36.410 に答える
0

あなたの問題は次のとおりです。

ul li a {
    display: block;

これにより、リストに挿入するすべてのリンクがブロックになります。コードから作成したこの例のように、フロートを開始してみてくださいhttp://jsfiddle.net/xN8sc/1/

于 2012-09-03T13:50:41.307 に答える