1

このようにdivをドロップダウンメニューの位置として使用する方法はありますか? すでに絶対位置を試しましたが、他の画面サイズでは機能しません。私が望むのは、すべての画面解像度で動作することです。テーブルを使用してみました（tdを非表示にしてホバー時に表示します）が、メニューはその下のコンテンツをプッシュするだけです。私は必死にこれを整理する必要があります.私は何週間もそれに取り組んできましたが、まだ私が望むものに近づいていません. 前もって感謝します。

これまでに試したこと: jQuery:

$(document).ready(function(){
   $("#hover-here").hover(function(){
     $("#boxed-menu-div").toggle();
  });
});

CSS:

#boxed-menu-div{
  display: none;
  position: absolute;
  top: 100px;
  right: 246px;
 }

これは私の画面解像度でのみ完全に機能します。相対配置を使用しましたが、コンテンツを下にプッシュするだけです。絶対的にできることの他の選択肢はありますか?

4

2 に答える 2

2

わかりました...まず最初に。テーブルは絶対にありません。jQueryも必要ありません。

この特定のタスクを実行するように設計された4つのhtml要素が組み合わされています。

これらは、、<nav>です。ここでは、すべての画面サイズで機能させたいので、これをレスポンシブにしたいので、丸みを帯びた角、グラデーション、影などが必要なので、次のことを目指していると仮定しています。最新のブラウザ、ie9+など。<ul> <li><a>

ここでそれを念頭に置いて、メニューを作成するために使用するhtmlを使用します。

<nav>
    <ul>
        <li>
            <a href="#">item 1</a>
            <ul>
                <li><a href="#">sub item 1</a><li>
                <li><a href="#">sub item 1</a><li>
                <li><a href="#">sub item 1</a><li>
            </ul>
        </li>
        <li>
            <a href="#">item 2</a>
            <ul>
                <li><a href="#">sub item 1</a><li>
                <li><a href="#">sub item 1</a><li>
                <li><a href="#">sub item 1</a><li>
            </ul>
        </li>
        <li>
            <a href="#">item 3</a>
            <ul>
                <li><a href="#">sub item 1</a><li>
                <li><a href="#">sub item 1</a><li>
                <li><a href="#">sub item 1</a><li>
            </ul>
        </li>
      </ul>
</nav>

cssは次のようになります。私はあなたが求めているものの非常に大まかな概算を作成しただけであることに注意してください。

body{
    /* Set the overall font*/
    font-family:arial, serif;
}

/* Contain floats: h5bp.com/q */
nav > ul:before, nav > ul:after {
    content: "";
    display: table;
}

nav > ul:after {
    clear: both;
}

nav > ul {
    *zoom: 1;
}

/* Level one */
nav > ul > li {
    float:left;
    position:relative;
    overflow:visible;
    width:30%;
    max-width:100px;
}
nav > ul > li > a{
    padding:.5em 1em;
}

/* Level 2*/
nav > ul > li > ul {
    background:#666;
    border-radius: 0 5px 5px 5px;
    position:absolute;
    z-index:1;
    padding:1em;
    width:200px; /*set to whatever you need*/
    display:none;
}

/* Second list on level 2*/
nav > ul > li:nth-child(2) > ul{
    margin-left:-50%;
    border-radius: 5px;
}

/* Last list on level 2*/
nav > ul > li:last-child > ul{
    right:0;
    border-radius: 5px 0 5px 5px;
}

/* Hover level 1*/
nav > ul > li:hover {
    background:#666;
    border-radius: 5px 5px 0 0;
    color:#fff;
}

nav > ul > li:hover > ul {
    display:block;
}

nav > ul > li:hover > a,
nav > ul > li > ul a{
    color:#fff;
}

nav a {
    text-decoration:none;
    display:block;
}

私はあなたが遊ぶためにここに実用的な例を含めました。ご覧のとおり、これはモバイルアップから機能します。ここのフルスクリーンリンクのサイズを変更して、機能することを確認します。

于 2012-12-20T11:32:38.747 に答える
0

コードを見ずに助けるのは難しいです。

CSSメニューの使用を提案することしかできません。

<ul id="main-nav">
    <li>
        <a href="#">Menu Item</a>
        <div class="sub-nav">
            Anything
        </div>
    </li>
    ...
</ul>

CSS

#main-nav {height: 25px; list-style-type: none;}
#main-nav li {position: relative; float: left; height: 25px; line-height: 25px; margin: 0 15px 0 0;}

.sub-nav {display: none; position: absolute; width: 400px; top: 25px; left: 0; z-index: 999; background: #f2f2f2;}

#main-nav li:hover .sub-nav {display: block;}

作業例http://jsfiddle.net/ELyQW/2/

于 2012-12-20T11:24:33.997 に答える