Html 如何使链接背景透明?
我从另一个设计师那里继承了一些设计css,我很难弄清楚他们在做什么 这是网站:在顶部的蓝色条中,有类似“问题支持”的文本 现在那里有这些看起来很别扭的蓝色盒子。鼠标悬停在“问题”这个词上,它会显示漂亮的下拉列表 如果我扔掉那些看起来很别扭的蓝色盒子,就会弄乱漂亮下拉框的造型。你知道我怎样才能让这些盒子不出现,但仍然保持鼠标悬停的效果吗 这是我的css文件:Html 如何使链接背景透明?,html,css,styling,Html,Css,Styling,我从另一个设计师那里继承了一些设计css,我很难弄清楚他们在做什么 这是网站:在顶部的蓝色条中,有类似“问题支持”的文本 现在那里有这些看起来很别扭的蓝色盒子。鼠标悬停在“问题”这个词上,它会显示漂亮的下拉列表 如果我扔掉那些看起来很别扭的蓝色盒子,就会弄乱漂亮下拉框的造型。你知道我怎样才能让这些盒子不出现,但仍然保持鼠标悬停的效果吗 这是我的css文件: .menusystem { position: absolute; font-size: 1em; } .menusys
.menusystem
{
position: absolute;
font-size: 1em;
}
.menusystem ul, .menusystem li
{
margin: 0;
padding: 0;
}
.menusystem li
{
list-style: none outside none;
}
.menusystem ul
{
list-style: none;
/*
-moz-border-radius: 14px;
-webkit-border-radius: 14px;
*/
}
.menusystem ul li
{
position: relative;
/*
-moz-box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
-webkit-box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
-moz-border-radius: 14px;
-webkit-border-radius: 14px;
*/
}
.menusystem ul li ul
{
display: none;
position: absolute;
top: 1.6em;
right: 0;
width: 10em;
}
.menusystem li a {
display: block;
padding: 5px 10px;
/* dark blue */
/* border: 1px solid #2e6ea4; */
text-decoration: none;
}
.menusystem ul li.main_menu_li {
float:right;
width: 10em;
margin-right:0.2em;
text-align: center;
}
/* IE-Win (Holly hack) reads the list item line breaks, so lets hide those \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
.menusystem li:hover ul, .menusystem li.mouseHover ul {
display: block;
}
.menusystem li ul.child_menu_ul li a{
/*
color: #fff;
*/
color: #fff;
/* light blue */
/* background: #7ba9c9; */
font-size: 80%;
text-shadow: none;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-bottom: 1px solid #2e6ea4;
border-top: 0px;
}
.menusystem li ul.child_menu_ul li.first a
{
-moz-border-radius-topleft: 14px;
-moz-border-radius-topright: 14px;
-webkit-border-top-left-radius: 14px;
-webkit-border-top-right-radius: 14px;
-moz-border-radius-bottomleft: 0;
-moz-border-radius-bottomright: 0;
-webkit-border-bottom-left-radius: 0;
-webkit-border-bottom-right-radius: 0;
border-top: 1px solid #2e6ea4;
}
.menusystem li ul.child_menu_ul li.last a
{
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 0px;
-webkit-border-top-left-radius: 0px;
-webkit-border-top-right-radius: 0px;
-moz-border-radius-bottomleft: 14px;
-moz-border-radius-bottomright: 14px;
-webkit-border-bottom-left-radius: 14px;
-webkit-border-bottom-right-radius: 14px;
}
.menusystem li ul.child_menu_ul li.only a
{
-moz-border-radius: 14px;
-webkit-border-radius: 14px;
}
.menusystem li ul.child_menu_ul li a:hover {
color: #ff0;
background: #2e6ea4;
}
.menusystem li.main_menu_li a
{
color: #fff;
/*
background: -moz-linear-gradient(100% 100% 90deg, #668eb8, #2e6ea4 );
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#668eb8), to(#2e6ea4));
*/
background-color: #2e6ea4;
text-shadow: 1px 1px 1px rgba(0,0,0,0.9);
/*
-moz-text-shadow: 1px 1px 1px rgba(0,0,0,0.9);
-webkit-text-shadow: 1px 1px 1px rgba(0,0,0,0.9);
-moz-border-radius: 14px;
-webkit-border-radius: 14px;
*/
}
.menusystem li.main_menu_li a:hover {
color: #ff0;
}
ul li.spaced
{
padding-bottom: 10px;
font-weight: normal;
}
以及带有html的div
<div class="menusystem" id="site_nav">
<ul class="main_menu_ul">
<li class="main_menu_li"><a href="http://www.problemio.com/">Support</a>
</li>
<li class="main_menu_li"><a href="http://www.problemio.com/">Problems</a>
<ul class="child_menu_ul">
<li class="first"><a href="http://www.problemio.com/">Categories</a></li>
<li class="last"><a href="http://www.problemio.com/">Hello 5</a></li>
</ul>
</li>
</ul>
</div>
-
-
谢谢 css管理下拉列表中有两条规则:
.menusystem li.main_menu_li a {
background-color: #2E6EA4;
color: #FFFFFF;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.9);
}
.menusystem li.main_menu_li a:hover {
color: #FFFF00;
}
尝试将背景色从a
移动到a:hover
编辑:缺少下拉列表的样式:
.menusystem li ul.child_menu_ul li a {
border-bottom: 1px solid #2E6EA4;
border-radius: 0 0 0 0;
border-top: 0 none;
color: #FFFFFF;
font-size: 80%;
text-shadow: none;
background: none repeat scroll 0 0 #2E6EA4; /* added this rule */
}
还有一个问题是头部的背景没有持续存在,但它正在解决。试试这个:刚刚尝试了你的建议,并在网站上进行了直播,但效果不太好:(我刚刚对你的最新更新进行了现场直播,但它并没有真正起作用,蓝色条只占屏幕的一半——你知道我如何让它延伸到整个宽度吗?下拉菜单看起来很时髦:)那么,您已经改变了其他内容?我建议您将一个具有代表性的HTML和CSS示例放入JSFIDLE链接中;这样您和其他人可以更轻松地尝试这些样式,而不会干扰网站本身。如果您在人们试图回答时不更改服务器上的代码,这会有所帮助。@John我只是想要peop我想看看最新的,但你是对的。顺便说一句,现在我几乎达到了我想要的效果,但由于某些原因,我的蓝色条只占屏幕的一半,哈哈