0

レベル2のドロップドロップダウンを作成しようとしています。私は少し近づいて行き詰まりました。私がそれを完了するのを手伝ってください。

これがJsBinです

 li{list-style:none;line-height:30px;}
 a{text-decoration:none;color:#c3c3c3;font-family:consolas;width:100%;}
 a:hover{color:white;}

 li{padding:5px;background-color:#5970B2;}

 /*li*/a:hover{background-color:grey;}
 ul#sddm{position:relative;}

 ul#sddm ul{display:none;}

 ul#sddm>li{float:left;}

 ul#sddm>li:hover>ul 
 {white-space: nowrap;display:block;position:absolute;margin:0;padding:0;}


 ul#sddm ul li:hover ul
 {white-space: nowrap;display:block;margin-left:150px;
   position:absolute;margin-top:0;padding:0;}

 ul#sddm ul li:hover ul>li{}

誰かが私が間違っていたことを説明してくれれば、それは私にとって良いことです。

前もって感謝します。

4

2 に答える 2

1

これがデモのフィドルですhttp://jsfiddle.net/dineshswami/4pLt3/1/

css の変更:

a{text-decoration:none;color:#c3c3c3;font-family:consolas; display:block;padding:2px;}

ul#sddm>li{float:left; position:relative;}

ul#sddm ul li:hover ul{white-space: nowrap;display:block;margin-left:150px;position:absolute;margin-top:0;padding:0;left:-2px;margin-top:-39px;}

html の変更:インライン css を削除しました

問題: 問題は、インライン css を指定して要素を強制していたため、必要な場所に適切に配置されなかったことです。あなたが絶対に言及する位置の小さな変化。したがって、上記の css で確認できる左と上の値を変更します。

上記の問題について述べたように、詳細に説明しましょう。

  1. <a>タグをタグの幅全体に拡張するには、css を<li>削除してwidth: 100%;新しい css ルールを追加します。display:block;padding:2px;

  2. 最初のドロップダウン幅を調整するために、html からインライン css 全体を削除しました。そのため、すべての要素はテキストに基づいて全幅を取ることができます。

  3. 2 番目のレベルのドロップダウンを調整するために、最初のレベルのドロップダウンと 2 番目のレベルの間にギャップがあったため、上部と左側のプロパティを [left:-2px;margin-top:-39px;なぜこれを行ったか] に設定し、line-height:30px を指定したため、margin-top を -39px に設定しました。高さを増やしているので、マージントップを設定しました。

于 2012-12-15T09:13:08.077 に答える
0

上と左のプロパティを変更して調整しますjsdinを編集しました

于 2012-12-15T09:23:14.303 に答える