링크 배경을 투명하게 만들려면 어떻게해야합니까?

-1

다른 디자이너의 디자인 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 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>

감사와 DIV!

출처

2011-10-04 Genadinik

사람들이 답변하려고 할 때 서버의 코드를 변경하지 않으면 도움이됩니다. –

@ 존 최근 소식을 사람들에게 알리고 싶었지만 당신이 옳습니다. Btw, 지금은 거의 원하는 효과를 얻었지만 어떤 이유로 파란색 막대가 화면의 절반 밖에 나오지 않는다. – Genadinik

당신은 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 */ 
}

을

머리 부분의 배경이 지속되지 않지만 여전히 문제가 있습니다. 거기에 도착.

출처

2011-10-04 00:42:02 MrTrick

방금 내 제안을 시도하고 사이트에 게시했지만 작동하지 않았다. ( – Genadinik

방금 만들었습니다. 최신 업데이트가 실시간으로 제공되지만 실제로 작동하지 않으며 파란색 막대가 화면 절반으로 만 이동합니다. 전체 너비를 확장하는 방법을 알 수 있습니까? 그리고 드롭 다운 메뉴는 펑키하게 보입니다. – Genadinik

You 've 've 've 갔다가 뭔가 다른 것을 바꿨습니까? jsfiddle 링크에 HTML과 CSS의 대표 샘플을 넣는 것이 좋습니다. 당신과 다른 사람들은 웹 사이트 자체를 방해하지 않고 스타일을 더 쉽게 실험 할 수 있습니다. – MrTrick

시험해보기 : http://jsfiddle.net/3Qwk5/

출처

2011-10-04 00:53:27

링크 배경을 투명하게 만들려면 어떻게해야합니까?

답변

관련 문제