【问题标题】：CSS dropdown menu designCSS下拉菜单设计
【发布时间】：2013-08-01 05:34:53
【问题描述】：

我有一个要求，我需要在菜单上工作，该菜单应如下图所示

我过去曾在简单的下拉菜单上工作过，但这次的要求有点不同。顶部菜单链接在悬停时以及在该特定页面上时应将颜色变为蓝色。

子菜单应该进来，而颜色和用于子菜单的背景图像应该是透明的，子菜单应该显示指向父菜单的指针，如下图所示。

我已经寻找了类似的菜单示例，以便我可以复制，但我没有找到一个。

如果有人能指出我正确的方向，我将不胜感激。

或者帮忙做。

我还在jsFiddle 上设置了一个示例，但我需要添加一个如上所述的附加功能。

http://jsfiddle.net/4wrDx/

同时，我也会努力工作，看看我是否可以管理它。我不是 CSS 大师，我更像是管理设计工作的开发人员。我需要这个用于基于 asp.net webform 的网站。

代码示例

<body>

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Tutorials</a>
            <ul>
                <li><a href="#">Photoshop</a></li>
                <li><a href="#">Illustrator</a></li>
                <li><a href="#">Web Design</a>
                    <ul>
                        <li><a href="#">HTML</a></li>
                        <li><a href="#">CSS</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">Articles</a>
            <ul>
                <li><a href="#">Web Design</a></li>
                <li><a href="#">User Experience</a></li>
            </ul>
        </li>
        <li><a href="#">Inspiration</a></li>
    </ul>
</nav>

</body>

更新：

到目前为止，我已经成功了。请查看链接http://jsfiddle.net/4wrDx/10/

【问题讨论】：

现在查看这个演示jsfiddle.net/4wrDx/3
我做了你在这里问的那种：jsfiddle.net/TYdtV/1
感谢 Umer 先生，我在第一个孩子的顶部看不到指针。
我的意思是我正在寻找类似jsfiddle.net/4wrDx/11 的东西。我正在努力获得其他功能，例如活动链接颜色更改。我所做的更接近我想要达到的目标。

标签： css drop-down-menu menu

【解决方案1】：

习惯了这个Css *RGBA*

nav ul ul {
        background: rgba(0,0,0,0.2); // used to RGBA 
border-radius: 0px; padding: 0;
        position: absolute;
 top: 100%;
    }
nav ul ul li a:hover {
                    background: rgba(0,0,0,0.4);  // used to RGBA 
                }

Demo

===========

为箭头更新

nav > ul > li > ul:after {
content: "";
border-left: solid 20px transparent;
border-right: solid 20px transparent;
display: inline-block;
border-bottom: solid 20px rgba(0,0,0,0.7);
position: absolute;
top: -19px;
left: 0;
}

Updated Demo

【讨论】：

不兼容 ie8。在此处尝试转换器：kimili.com/journal/…，此答案中提到：stackoverflow.com/a/3977240/828584
感谢您的其他演示很好，但我如何在顶部添加指针，如我的问题的示例图像所示。
谢谢Azad 先生，您好像是一位设计大师，请问您是专家意见吗， 1. 我的子级菜单可以与顶级菜单有不同的颜色吗？ 2. 例如，当顶级菜单在特定页面或活动链接上时，我可以更改其颜色吗？
我不擅长理解别人的代码，所以我不得不自己写。 :D 但是是的，你可以在 css 中做任何事情（比如改变颜色）。除了制作形状、遮罩、过滤器和逐像素操作。但它可能会在未来 5 年内到来。