css菜单中的透明边框 [英] transparent border in menu with css
本文介绍了css菜单中的透明边框的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我使用如下菜单.如何将底边框从白色更改为透明,以便边框显示为透明边框.现在,当我将边框设置为透明时,整个菜单为橙色(菜单的背景色):
I use a menu like below. How do I change the bottom-border from white to transparent so that the border appears as a transparent border. Now, when I set the border transparent, the entire menu is orange (background color of the menu):
ul#nav,
ul#nav ul {
margin: 0;
padding: 0;
list-style: none;
}
ul#nav li {
position: relative;
float: left;
width: 118px;
}
#nav li ul {
position: absolute;
left: 0;
top: auto;
margin-left: -999em;
border-top: 11px transparent;
}
#nav li li {
width: 135px;
z-index: 1;
}
#nav li ul ul {
position: absolute;
left: 100%;
top: -.1em;
margin-left: -999em;
}
ul#nav li a {
display: block;
text-decoration: none;
text-align: left;
background: white;
border: none;
}
* html ul#nav li a { height: 1% }
#nav li:hover a,
#nav li.over a,
#nav li:hover li:hover a,
#nav li.over li.over a,
#nav li:hover li:hover li:hover a,
#nav li.over li.over li.over a,
#nav li:hover li a:hover,
#nav li.over li a:hover,
#nav li:hover li:hover li:hover a:hover,
#nav li.over li li a:hover,
#nav li:hover li:hover li:hover li:hover a:hover,
#nav li.over li.over li.over li.over a:hover {
color: #ff7f00;
background-color: white;
}
#nav li:hover li a,
#nav li.over li a,
#nav li:hover li:hover li a,
#nav li.over li.over li a,
#nav li:hover li:hover li:hover li a,
#nav li.over li.over li.over li a {
color: white;
background: #ff7f00;
margin-left: -10px;
border-bottom: 1px solid #FFFFFF;
filter: alpha(opacity=95);
-moz-opacity: 0.95;
opacity: 0.95;
}
#nav li ul li a { padding: 25px 7px 7px 7px }
ul#nav li:hover ul ul,
ul#nav li:hover ul ul ul,
ul#nav li.over ul ul,
ul#nav li.over ul ul ul { margin-left: -999em }
ul#nav li:hover ul,
ul#nav li li:hover ul,
ul#nav li li li:hover ul,
u#navl li li li li:hover ul,
ul#nav li.over ul,
ul#nav li li.over ul,
ul#nav li li li.over ul { margin-left: 0 }
推荐答案
border-bottom:2px solid rgba(0,0,0,.5);
这篇关于css菜单中的透明边框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文