Question

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

enter image description here

我已经创建了下拉列表，但我无法弄清楚如何使用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.

为项目提供不透明度

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

喜欢

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

Answer 3

对于倾斜'曲线'，请参见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);
}

Answer 4

对于class =子菜单，

使用以下代码来消除倾斜

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

子菜单也会使用您已经放置的opaicity设置，只需使用您想要的背景颜色就可以使用

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

}

带来响应式布局只需使用常见的框架，例如twitter bootstrap，project zurb

使用CSS设置下拉菜单样式

4 个答案: