0

最初のメニューを機能させようとしています。javascript なしで CSS Menuの基本を理解しました。できるだけシンプルにしようとしています。私はそれを私が望むものに近づけなければなりません (私が本当に望むものとは正確には異なります):

http://jsfiddle.net/EjXgU/2/

主な問題はサブメニューです。親メニューの右側ではなく、上下に積み重ねます。また、サブメニューの最初のレベルは、メイン メニューの行のすぐ下ではなく、その中にスタックされます。

background-color私が気付くことができたもう1つの問題は、rgba （透明度）を追加したいということです。ただし、サブメニュー レベルごとに透明度が変わります。

「派手」で派手に見せるためのcss3のヒントも受け入れます=）

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Title: css-menu-without-javascript</title>
</head>
<body>

    <nav>
        <ul id="menu">
        <li><a href="#" title="Home">Home</a></li>
        <li><a href="#" class="normaltip" title="Units">With sub-menus --&gt;</a>
            <ul class="submenu">
            <li><a href="...">Submenu 1</a></li>
            <li><a href="...">Submenu 2 --&gt;</a>
                <ul class="submenu">
                <li><a href="...">Sub-submenu 1</a></li>
                <li><a href="...">Sub-submenu 2</a></li>
                </ul>
            </li>
            </ul>
        </li>
        <li><a href="#" title="Future Residents">Menu item 3</a></li>
        <li><a href="#" title="Current Residents">With sub-menus --&gt;</a>
            <ul class="submenu">
            <li><a href="...">Submenu 3</a></li>
            <li><a href="...">Submenu 4 --&gt;</a>
                <ul class="submenu">
                <li><a href="...">Sub-submenu 3</a></li>
                <li><a href="...">Sub-submenu 4 --&gt;</a>
                    <ul class="submenu">
                    <li><a href="...">Sub-sub-submenu 1</a></li>
                    <li><a href="...">Sub-sub-submenu 2</a></li>
                    </ul>
                </li>
                </ul>
            </li>
            </ul>
        </li>
        <li><a href="#" title="Contact Us">Menu item 3</a></li>
        </ul>
    </nav>

</body>
</html>

CSS:

/*https://stackoverflow.com/questions/4873604/css-menu-without-javascript*/
#menu li>ul { display: none; }
#menu li:hover>ul { display: block; }
/*End of Nathan MacInnes' code*/


nav { position: relative; }
#menu> li { float: left; padding:10px; border: 1px ridge #cccccc;}
#menu a {
    text-decoration:none;
    font-size: 20px;
    color:#191919;
    padding:10px;
}
.submenu { background-color: rgba( 0,0,0,0.5 ); }
4

2 に答える 2

1

You could try

.submenu { background-color: rgba( 0,0,0,0.25 );
    margin-left: 25px;}

The transparency value is additive — a submenu within a submenu gets that added twice, so a second submenu will be less transparent. Starting with a lower value allows that to be useful.

Adding the margin displaces the text to the right, and I rather like the way each submenu "embraces" its own children.

http://jsfiddle.net/EjXgU/3/

于 2012-06-07T09:08:52.207 に答える
1

CSS のみのドロップダウン メニューが必要な場合は、 Son of Suckerfishをチェックしてください。それは、そのようなことを達成するための事実上の方法です。

以前のバージョンの Internet Explorer の疑似要素のサポート不足を回避するために JavaScript を使用する方法が少しありますが、これは IE7 以下であると思いますので、必要なサポートのレベルによっては、おそらく削除される可能性があります。 IE < 7 などの古いブラウザ。その他のブラウザ (Firefox、Chrome、Safari、Opera など) はメニューを表示し、CSS のみで問題なく機能します。

于 2012-06-07T09:13:10.083 に答える