使用 CSS 设置下拉菜单样式

Question

我一直在尝试使用 CSS 为我的 wordpress 主题设计一个下拉菜单，如下所示。

我已经创建了下拉菜单，但我不知道如何使用 CSS 创建曲线并使背景颜色看起来像上图一样透明。

为了让它看起来透明，我尝试了opacity:0.4; filter:alpha(opacity=40);，但它看起来不在上面的下拉菜单附近。

能否请您告诉我如何使我的下拉菜单看起来像图片中的下拉菜单并使其也具有响应性？

谢谢

这是我的代码：

你也可以在这里查看我的代码http://jsfiddle.net/MdpPd/

HTML

<nav>
    <ul id="menu">
            <li><a href="">Homepage</a></li>
            <li><a href="">Google</a>
                <ul class="sub-menu">
                    <li><a href="">About Us</a></li>
                    <li><a href="">Programs</a></li>
                </ul>
            </li>
        </ul>  

</nav>  

CSS

#menu {
display: block;
float: left;
margin: 0 auto 0;
width: 100%;    
}

#menu ul {
list-style: none;
margin: 0;
padding-left: 0;
position: absolute;
background: #108BB6;
}

#menu li {
float: left;
position: relative;

list-style-type: none;
}

#menu a {
display: block;
line-height: 2.4em;
padding: 0 13px;
text-decoration: none;
}

#menu ul li {
display:block;
clear: both;
width: 265px;
}

#menu ul li:hover {
display: inline-block;
}

#menu li:not(:hover) ul {
display: none;
}

#menu ul ul {
box-shadow: 0 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
display: none;
float: left;
position: absolute;
top: 2em;
left: 0;
z-index: 99999;
}

#menu ul ul ul {
left: 100%;
top: 0;
}

#menu ul ul a {
background: #dedede;
line-height: 1em;
padding: .5em .5em .5em 1em;
width: 10em;
height: auto;
}

#menu a:link {color:black;}
#menu a:visited {color:black;}
#menu a:focus {color:black; background: #ebdb00;}
#menu a:hover {color:white; background: #0C6481;}
#menu a:active {color:black; background: #ebdb00;}

Answer 1

我使用:before 和:after 在子菜单上创建了效果。

看看demo。

这不是最干净的解决方案，但它确实有效。 它需要您进行一些调整，但我希望这对您有所帮助。

Answer 2

为了给边框曲线你可以使用

css 中的“border-radius”属性。 喜欢

border-radius: 5px; you can also use the border-(left,right,top,bottom) variations.

用于赋予项目不透明度

尝试将颜色设置为“background-color: rgba(Redvalue, greenvalue, bluevalue, opacity value)”。

喜欢

background-color:rgba(0, 255, 0, 0.8) 

Answer 3

对于 class=子菜单，使用下面的代码来消除偏斜

.submenu
{
   transform: skew(30deg,20deg);
   -ms-transform: skew(30deg,20deg); /* IE 9 */
 -webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
} 

子菜单也将使用您已经放置的不透明度设置，以使用您想要的背景颜色来显示颜色

.submenu{
 opacity:0.4; filter:alpha(opacity=40);
 background:blue;

}

要实现响应式布局，只需使用常用框架，例如 twitter bootstrap、project zurb

Answer 4

有关偏斜“曲线”，请参阅http://www.w3schools.com/css3/css3_2dtransforms.asp 偏斜函数

对于透明度：示例的透明度较低（更像 0.9）和较浅的蓝色。您可以尝试询问艺术家/设计师，因为他们可能知道这一点

#menu ul {
list-style: none;
margin: 0;
padding-left: 0;
position: absolute;
background: 10aBd6;
opacity: 0.9;
transform: skew(30deg,0deg);
-webkit-transform: skew(30deg,0deg);
-ms-transform: skew(30deg,0deg);
}

应该让你继续，你需要“取消歪斜”里面的文本

#menu ul li {
display: block;
clear: both;
width: 265px;
    transform: skew(-30deg,0deg);
    -webkit-transform: skew(-30deg,0deg);
    -ms-transform: skew(-30deg,0deg);
}