css - 使用 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。

看看演示。

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

Answer 2

为了给边界曲线，你可以使用

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

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

用于赋予项目不透明度

尝试将颜色设置为“背景颜色：rgba（Redvalue，greenvalue，bluevalue，opacity value）”。

喜欢

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

Answer 3

对于 class=submenu 使用下面的代码来解决歪斜

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

应该让你去，你需要'unskew'里面的文本

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