1

添付の画像をご覧ください。はっきりと視覚化できます。

ここに画像の説明を入力

ホバー カテゴリがあります。表示される黒いバーがフッターです。問題は、フッターを渡さずにページ内にこれらすべてのカテゴリを含めるにはどうすればよいかということです。

#navMenu, ul, li, li li {
    margin: 0;
    pading:0;
}
#navMenu{
    width:243px;

}
#navMenu ul {
    line-height:40px;
}
#navMenu li{
    list-style:none;
    position:relative;
    background:#6EC8F5;
    border-radius:3px;
    box-shadow: 0 0 3px gray;
    text-align:center;
    font:bold 20px/40px Arial, Helvetica, sans-serif;
}
#navMenu li li {
    list-style:none;
    position:relative;
    top:13px;
    background:#CDD0D1;
    border-radius:3px;
    border:1px solid gray;
    box-shadow: 0 0 3px gray;

}
#navMenu ul li a {
    width: 240px;
    height:25px;
    display:block;
    text-decoration:none;
    text-align:center;
    font: 16px/30px Arial, Helvetica, sans-serif;
    color:black;
    border:1px solid #eee;
    padding:0 0 5px;
}
#navMenu ul ul {
    position: absolute;
    visibility: hidden;
    top:30px;
}
#navMenu ul li:hover ul {
    visibility:visible;
}

#navMenu li:hover {
    background-color:#6EC8F5;
}
#navMenu ul li a:hover {
    background-color:#6EC8F5;
}
#navMenu a:hover {
    font-weight:bold;
}

<div id="navMenu">
<ul >
<li class=index_latest>Category
    <ul>
    <li><a href='../index.php?category=Blogging'>Blogging</a></li>
    <li><a href='../index.php?category=General'>General</a></li>
    <li><a href='../index.php?category=Arts and Entertainment'>Arts and Entertainment</a></li>
    <li><a href='../index.php?category=Automotive'>Automotive</a></li>                  
    <li><a href='../index.php?category=Travel and Leisure'>Travel and Leisure</a></li>
    <li><a href='../index.php?category=Womens Interests'>Womens Interests</a></li>
    <li><a href='../index.php?category=Writing and Speaking'>Writing and Speaking</a></li>
    </ul>
</li></ul>
</div>

更新: リストを半分に分割して、前半と後半を並べて表示できるようにしたかった

4

3 に答える 3

1

そのリストにこれ以上メンバーを追加しない場合

  1. body タグに「min-height」を追加します
  2. フッターに top:??px 属性を使用しないでください
  3. フッターに他の垂直方向の配置を使用していないことを確認してください

そのリストにさらにメンバーを追加する場合

  1. 各メンバーの高さを動的に計算するために JavaScript を使用する
  2. これらすべてをフッターの高さと使用している他のヘッダーに追加します
  3. これを体の最小高または高として使用します
  4. 実装を高速化するために jQuery を使用してみてください。独自のライブラリを使用している場合は、後でコードを変換してください。
于 2012-08-03T04:02:59.300 に答える
0

位置を絶対に設定し、リストの全高の半分に等しい距離だけ原点の上に配置します。背の高さを知る必要があるだけです。これは、bottom プロパティを使用して実行できると思います。リストを上に移動する距離に設定し、position:absolute を設定することを忘れないでください。編集：これを無視してください、私は間違いを犯しました。

于 2012-08-03T02:59:30.147 に答える