リンク背景を透明にするにはどうしたらいいですか？

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に2つのルールがあります：a:hover

へ

.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から背景色を移動してみてください

編集：ドロップダウンのスタイルを逃した：

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