0

私は何日もかけて、両親の下にあるドロップダウンメニューを左揃えにしようとしてきました。私が知っているCSSとHTMLは、過去数日間のプロセスで学んだことだけなので、回答では子供のように扱ってください（笑）。すべてが何を意味するのかをメモすることによって、私がこれまで生き残っただけであることがわかります...

これが私のブログです。crittndesign.blogspot.comの機能を確認できます。最初にメニューを作成したときに、[注目の製品]タブとドロップダウンから始めました。ドロップダウンを親の下に揃えるために、必要な左からの距離に実際の値を設定しました（68pxが機能しているようです）。とりあえずやりたかったことはできましたが、「Inspiration for ...」タブを追加することにしました。実際に問題を修正し、メニューを適切にコーディングして、メニューを独自に配置する必要があることがわかりました。親タブ。

私は今、非常に多くの異なることを試したので、私のコードはおそらく混乱していますが、それを正しくするために何を変更するかを具体的に教えてくれる人が必要です！位置を「相対」または「インラインブロック」にする必要があることについてよく読みましたが、固定位置を削除するとすぐにドロップダウンが壊れてしまうため、どこに貼り付けるかわからないようです（左：68px ）。私がそれを理解するのを助けるために他の情報が必要な場合は私に知らせてください！

前もって感謝します！！

CSS

    .navigation ul ul { 
        display: none;
    }
    .navigation ul li:hover > ul {
        display: block;
    }
    .navigation li ul {    
        position: absolute;  /*makes the list actually drop down*/
        z-index:100;    /*makes it stay visible when moving mouse down to it*/
        left: -999em;    /*em=scaleable*/
        width: 165px;    /*width of drop down box*/
        margin: 19px 0 0 0; 
        padding: 0; 
    }
    .navigation li:hover ul {   
        left: 68px;    /* position of drop down menu aligned under parent */
    }
    .navigation li li a {    /*how the drop down menu itself looks*/
        display: block; 
        background: #663300; 
        width: 140px;     /*width of background color on drop down*/
        color: #FF9900; 
        font:normal 12px Helvetica, sans-serif; 
        padding: 9px 13px 12px 12px; 
        text-decoration: none; 
        text-align:center;
        border-bottom: 2px dotted #060505; /*dotted line under each menu item in drop down*/
    }
    .navigation li li a:hover { /*how the drop down menu looks when hovered over*/
        background: #060505; 
        color: #FFFFFF;  
        margin: 0; 
        padding: 9px 13px 12px 12px; /*for the list names when hovered over them*/
        text-decoration: bold; 
        border-bottom: 1px #060505; 
        text-align:center;
        box-shadow: inset 0 0 10px #222222, inset 0 10px 10px #222222;
    } 
    li:hover > a { /*Color all hovered links, and keep menu item colored when hovering sub-menu*/ 
        background-color: #663300; 
    } 
    .navigation li ul ul { 
        /*margin: -35px 0 0 145px;*/
    } 
    .navigation li:hover ul ul { 
        left: -9999em; 
    } 
    .navigation li ul li:hover ul { 
       left: auto;  
    }
4

2 に答える 2

1

あなたのマークアップはわかりませんが、これを試してください...

.navigation ul{
 padding:0;
}

すべての ul にはデフォルトのパディングとマージンがあるため、親 ul でドロップされた ul の場合、左に揃えるために 0 のパディングが必要です。

于 2013-02-21T19:36:43.923 に答える
0

取得したcssはこれだけですか？親 Css はありますか?
(ボディ) 属性にポジショニングを割り当てました か? 指定するすべての位置は、その位置に相対的です。

于 2013-02-21T19:39:52.627 に答える