2

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

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

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

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

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

或者帮忙做。

我还在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/

4

1 回答 1

2

习惯了这个 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 
                }

演示

==========

更新箭头 

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;
}

更新的演示

于 2013-08-01T05:39:34.833 回答