Question

我想让我的第一个菜单起作用。我从CSS Menu without javascript获得了基础知识。我试图让它变得尽可能简单。我看起来接近我想要的样子（不完全是我真正希望它看起来像）：

主要问题是子菜单。它们将一个堆叠在另一个之下，而不是在父菜单的右侧。此外，第一级子菜单不会叠加在主菜单上的行下方，而是位于其中。

我能注意到的另一个问题是，我想添加一个rgba background-color（透明度）。但是，对于每个子菜单级别，透明度都会发生变化。

我也接受任何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 ); }

Answer 1

你可以尝试

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

透明度值是附加的 - 子菜单中的子菜单会添加两次，因此第二个子菜单的透明度会降低。从较低的值开始可以使其有用。

添加边距会使文本向右移动，我更喜欢每个子菜单“拥抱”自己孩子的方式。

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

Answer 2

如果您想要仅限CSS的下拉菜单，请查看Son of Suckerfish。这几乎是实现这一目标的事实上的方式。

有点使用JavaScript来解决早期版本的Internet Explorer缺乏对伪元素的支持，但我认为这是IE7及以下版本，因此可能会被删除，具体取决于什么您希望为IE等旧版浏览器提供的支持级别。 7.其他浏览器（Firefox，Chrome，Safari，Opera等）只显示CSS菜单和功能。

CSS：子菜单对齐和样式（严格的CSS;没有javascript）

2 个答案: