使用CSS设计下拉菜单的样式 [英] styling a dropdown menu using CSS

问题描述

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

我已经设法创建下拉列表，但是我无法弄清楚如何使用CSS创建曲线并使背景颜色看起来像上面的图片一样透明.

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

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

谢谢

这是我的代码:

您也可以在此处实时查看我的代码 http://jsfiddle.net/MdpPd/

HTML

 < nav>< ul id ="menu">< li>< a href =">主页</a></li>< li>< a href ="> Google</a>< ul class ="sub-menu">< li>< a href =">关于我们</a></li>< li>< a href =">程序</a></li></ul></li></ul></nav> 

CSS

  #menu {显示:块；向左飘浮;保证金:0自动0;宽度:100％;}#menu ul {列表样式:无；边距:0;padding-left:0；位置:绝对；背景:#108BB6；}#menu li {向左飘浮;职位:相对list-style-type:无；}#menu a {显示:块；行高:2.4em；填充:0 13px;文字修饰:无；}#menu ul li {显示:块;清楚:两者；宽度:265像素；}#menu ul li:hover {显示:inline-block;}#menu li:not(:hover)ul {显示:无；}#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);显示:无；向左飘浮;位置:绝对；最高:2em；左:0；z-index:99999；}#menu ul ul ul {左:100％;最高:0;}#menu ul ul a {背景:#dedede;行高:1em；padding:.5em .5em .5em 1em;宽度:10em;高度:自动；}#menu a:link {color:black;}#menu a:visited {color:black;}#menu a:focus {color:black;背景:#ebdb00;}#menu a:hover {color:white;背景:#0C6481;}#menu a:active {color:black;背景:#ebdb00;} 

解决方案

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

看看 演示 .

这不是最干净的解决方案，但它可以工作.您需要进行一些调整，但是希望对您有所帮助.

I have been trying to design a dropdown menu like following for my wordpress theme using CSS.

I have manged to create the dropdown but I cannot figure out how to create the curve using CSS and make the background color look transparent like in the image above.

To make it look transparent I tried opacity:0.4; filter:alpha(opacity=40); but it doesn't look near the dropdown menu above.

Could you please tell me how to make my dropdown look like the one in the image and make it responsive too?

Thanks

Here's my Code:

You can also check my code live here 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;}

解决方案

I created the effect on the submenu using :before and :after.

Take a look at the demo.

It isn't the cleanest solution, but it works. It needs some adjusting from your side, but I hope this helps you on the way.

这篇关于使用CSS设计下拉菜单的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！