0

私は次のメニューを持っています：

<ul class="menu">
<li class="menu_item"><a href="mylink.php"><img src="menu/home.png"  class="menu_img"/></a></li>
<li class="menu_item"><a href="mylink.php"><img src="menu/me.png" class="menu_img"/></a></li>
<li class="menu_item"><a href="mylink.php"><img src="menu/listeners.png" class="menu_img"/></a></li>
<li class="menu_item"><a href="mylink.php"><img src="menu/favorites.png" class="menu_img" /></a></li>
<li class="menu_item"><a href="mylink.php"><img src="menu/notifications.png" class="menu_img" /></a> <span class="notification_badge_count"></span></li>
<li class="menu_item"><a href="mylink.php"><img src="menu/settings.png" class="menu_img" /></a></li>
<li class="menu_item"><a href="mylink.php"><img src="menu/signout.png" class="menu_img" /></a></li>
</ul>

そして、これがこのメニューの私のcssです：

.menu {
float:right;
}

.menu_item{
background: rgba(0, 0, 0, 0.0);
height:50px;
}

.menu li{
float:left;
height:25px;
padding:24px 10px 0 10px;
text-align: center;
font-size:12px; 
}

.menu_img {
opacity:0.5; 
filter:alpha(opacity=50); /* For IE8 and earlier */
}

ここで、メニューの項目の1つにドロップダウンを追加したいので、次のようにメニューを再作成します。 

<ul class="menu">
<li class="menu_item"><a href="mylink.php"><img src="menu/home.png"  class="menu_img"/></a></li>
<li class="menu_item"><a href="mylink.php"><img src="menu/me.png" class="menu_img"/></a></li>
<li class="menu_item"><a href="mylink.php"><img src="menu/listeners.png" class="menu_img"/></a></li>
<li class="menu_item"><a href="mylink.php"><img src="menu/favorites.png" class="menu_img" /></a></li>
<li class="menu_item"><a href="mylink.php"><img src="menu/notifications.png" class="menu_img" /></a> <span class="notification_badge_count"></span></li>

<li class="menu_item"><a href="#"><img src="menu/arrow.png" class="menu_img" /></a>
<ul>
<li class="menu_item"><a href="mylink.php"><img src="menu/settings.png" class="menu_img" /></a></li>
<li class="menu_item"><a href="mylink.php"><img src="menu/signout.png" class="menu_img" /></a></li>
<ul/>
</li>

矢印アイコンにドロップダウンを追加するには、どのような変更を行う必要がありますか？

コピー＆ペーストメニューは簡単に見つかりましたが、cssドロップダウンがどのように作成されるかを理解するのはさらに難しくなります...

よろしく、ゾラン

4

1 に答える 1

1

これはあなたが必要なものですか？画像がなかったので削除しました。代わりに、私はいくつかのテキストを入れました。 http://jsfiddle.net/9ZBJG/

html：

<ul class="menu">
    <li class="menu_item">
        <a href="mylink.php">
            HOME
        </a>
    </li>
    <li class="menu_item">
        <a href="mylink.php">
            ABOUT ME
        </a>
    </li>
    <li class="menu_item">
        <a href="mylink.php">
            LISTENERS
        </a>
    </li>
    <li class="menu_item">
        <a href="mylink.php">
            FAVORITES
        </a>
    </li>
    <li class="menu_item">
        <a href="mylink.php">
            NOTIFICATIONS
        </a>
        <span class="notification_badge_count">4</span>
    </li>
    <li class="menu_item">
        <a href="#">
            ARROW
        </a>
        <ul>
            <li class="menu_item">
                <a href="mylink.php">
                    SETTINGS
                </a>
            </li>
            <li class="menu_item">
                <a href="mylink.php">
                    SIGNOUT<img src="menu/signout.png" class="menu_img" />
                </a>
            </li>
        <ul/>
    </li>
</ul>

CSS：

.menu {
float:right;
}

.menu_item{
background: rgba(0, 0, 0, 0.0);
}

.menu > li.menu_item{
float:left;
height:25px;
padding:24px 10px 0 10px;
text-align: center;
font-size:12px;
background-color:#f6f6f6;
position:relative;
}

.menu_item ul{
    display:none;
}

.menu_img {
opacity:0.5;
filter:alpha(opacity=50); /* For IE8 and earlier */
}

.menu_item ul{
    display:none;
}

.menu_item:hover ul{
    display:block;
    position:absolute;
    right:0px;
    top:100%;
}

.menu_item ul li{
    background-color:#f6f6f6;
    padding:5px;
}

説明css メニューの構造は一般的に以下のとおりです。

    -メインメニューコンテナ
  • - メニュー項目
      -サブメニューコンテナ
    • -サブメニュー項目
    • -サブメニュー項目

ここまでついていけたら、すごい！これで、すべてのメインメニュー項目が1行で隣り合う必要があります...これがfloat：leftを使用した理由です。それが正しい方法です。ただし、.menu_itemは、sub-menu-itemsに与えられるクラスでもあります。そのため、float：leftがメインメニューコンテナの直接の子によってのみ取得されるように、いくつかの調整を行いました。

これで、あなたの場合のサブメニューは、その親の下に持ってくる必要があるサブメニューになります

  • そのために、あなたは親を配置します
  • 絶対値としての位置とその子の位置---相対値としての位置とそれに応じた左と上の値を使用した位置。top：100％は、メインのmenu_itemのすぐ下を意味します。

    ここで、このサブメニューコンテナのmenu_itemは上下に配置する必要があります。そのためには、これらのmenu_itemsにfloat / position / displayプロパティを指定しないでください。そうすれば、コードは正常に機能します。（私たちはすでにそれをしました）

    私は少しCSSをしました-あなたが理解するのを助けるために背景と高さでここで遊んでください。他にもお気軽にご質問ください。乾杯！

    • 于 2012-07-15T14:39:47.543 に答える