如何使链接背景透明？

Question

我从另一位设计师那里继承了一些设计 CSS，但我很难弄清楚他们在做什么。

这是网站：http://www.problemio.com，在顶部的蓝色栏中，有像“问题支持”这样的文字..

现在它有这些看起来很尴尬的蓝色框。将鼠标悬停在应用题上时，它会显示漂亮的下拉菜单。

如果我去掉那些看起来很尴尬的蓝色框，它就会弄乱漂亮的下拉菜单的样式。知道如何让这些框根本不出现，但仍然保持良好的鼠标悬停下拉效果吗？

这是我的 css 文件：

.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>

谢谢！！

Answer 1

您在管理下拉菜单的 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 */
}

仍然存在一个问题，即头部的背景没有持续存在，但它正在到达那里。

Answer 2

试试这个： http://jsfiddle.net/3Qwk5/