0

我正试图让我的第一个菜单工作。我在没有 javascript 的情况下获得了 CSS Menu的基础知识。我试图让它尽可能简单。我必须接近我想要的样子（不完全是我真正想要的样子）：

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

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

我注意到的另一个问题是，我想添加一个 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 ); }
4

2 回答 2

1

你可以试试

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

透明度值是相加的——一个子菜单中的一个子菜单被加了两次，所以第二个子菜单的透明度会降低。从较低的值开始允许它是有用的。

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

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

于 2012-06-07T09:08:52.207 回答
1

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

有一点关于使用 JavaScript 来解决早期版本的 Internet Explorer 缺乏对伪元素的支持，但我认为这是 IE7 及以下版本，因此可能会被删除，具体取决于您想要的支持级别较旧的浏览器，例如 IE < 7。其他浏览器（Firefox、Chrome、Safari、Opera 等）仅使用 CSS 即可显示菜单和功能。

于 2012-06-07T09:13:10.083 回答