0

ナビゲーションバーに下矢印記号の画像を追加して、サブメニューが下に開いていることを示す方法`

<ul class="navigation">
    <li> 
    <a href="#"> parent </a> 
            <ul>  
            <li> <a href="#"> child 1 </a></li>
            <li> <a href="#"> chil2 </a></li>
            <li> <a href="#"> child3 </a></li>
            <li> <a href="#"> child4</a></li>
            <li> <a href="#"> child5</a></li>
            <li> <a href="#"> child6 </a></li>
            <li> <a href="#"> child7 </a></li>
            </ul>
     </li>`

私のリストはこのように作成され、下に子リストがあることを示す下向き矢印の画像を親に表示したい

4

3 に答える 3

2

liサブメニューを持つ にクラスを与えます。このような ：

HTML :

   <ul class="navigation">
        <li class="sub-menu"> 
        <a href="#"> parent </a> 
                <ul>  
                <li> <a href="#"> child 1 </a></li>
                <li> <a href="#"> chil2 </a></li>
                <li> <a href="#"> child3 </a></li>
                <li> <a href="#"> child4</a></li>
                <li> <a href="#"> child5</a></li>
                <li> <a href="#"> child6 </a></li>
                <li> <a href="#"> child7 </a></li>
                </ul>
         </li>

CSS:

.sub-menu
{
list-style-image:url('sqpurple.gif');
}

デモ

于 2012-08-31T15:18:55.960 に答える
0

あなたの質問にコメントを残すことができないので、これを回答として投稿します。

多くの css メニュー コードがオンラインにあります。簡単な Google 検索で、多くの結果が得られます。css を使用して画像を追加できず、必要なものを表示するためのサンプル コードを提供していない場合は、http://cssmenumaker.com/のようなものを使用することをお勧めします。

于 2012-08-31T15:07:14.340 に答える
0

矢印が必要な場合は、div境界幅のある を想像してください。高さと幅を 0 に減らすと、境界線だけが残ります。色が異なる場合は、境界線の交点を考えてください。幅も高さもないため、三角形に縮小されます。次のようなものです：

<!DOCTYPE html>
<html>  
<head>
<style>
div { width: 0px; height: 0px; border-left: 5px solid black; border-top: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid transparent; }
</style>
</head>
<body>
<div></div>
</body>
</html>
于 2012-08-31T15:13:59.820 に答える