0

CSS メニュー

編集済み 基本的に、上記のドロップダウンをhtml cssで作成できましたが、それをワードプレスのテーマに変換すると、ドロップダウンが機能しなくなりました。誰か助けてもらえますか? 感謝！

「家の仕事について

クライアント別 カテゴリー別

クライアントの連絡先 `

4

1 に答える 1

1

ここでは、li 要素の絶対左側に配置された疑似要素を使用してそれを行いました。これにより、親 UL 要素の境界線まで突き合わせられます。下の li の線を境界線の下に揃えるために、上の位置のプロパティを使用して li を下に移動する必要があったため、マージンを追加して、その下にあるものと重ならないようにしました。

ul{
    padding:16px 8px 0px 0px;
    border-left:1px solid #000;   
}

li{
    display:block;
    padding-left:12px;
    position:relative;
    top:9px;
    height:20px;    
}

画像を使用する以外に、これはおそらく最小限の css を使用する最も簡単な方法です。

http://jsfiddle.net/PfChj/4/

編集

これが変更されたフィドルです。サブ ul と li のすべての子をフォローするのが少し難しかったので、CSS をほとんどやり直しました。読みやすさのためにクラスを使用した方がよい場合もあるため、スタイルを少しやり直す必要があります。サブメニューは、幅が設定されたトップ リーの中央に配置されます。中央に配置したくない場合や、リンクの幅に合わせてトップを曲げる必要がある場合は、これを変更できます。

http://jsfiddle.net/FYnS4/2/

于 2012-10-26T03:09:45.240 に答える