2013-03-29 6 views
0

내가이CSS 드롭 다운 네비게이션 변경 호버 색상

ul#css3menu_top,ul#css3menu_top ul { 
    margin:0; 
    list-style:none; 
    padding:0; 
} 
ul#css3menu_top,ul#css3menu_top .submenu { 
    background-color:#EEEEEE; 
    -moz-border-radius:5px; 
    -webkit-border-radius:5px; 
    border-radius:5px; 
} 
ul#css3menu_top .submenu { 
    visibility:hidden; 
    position:absolute; 
    left:0; 
    top:100%; 
    opacity:0; 
    -moz-transition:all 0.5s; 
    -webkit-transition:opacity 0.5s; 
    -o-transition:opacity 0.5s; 
    -moz-box-shadow:3.5px 3.5px 5px #000000; 
    -webkit-box-shadow:3.5px 3.5px 5px #000000; 
    box-shadow:3.5px 3.5px 5px #000000; 
    float:left; 
    background-color:#EEEEEE; 
    border-width:2px; 
    border-radius:6px; 
    -moz-border-radius:6px; 
    -webkit-border-radius:6px; 
    border-color:#FFF; 
    padding:0 10px 10px; 
} 
ul#css3menu_top li:hover>.submenu { 
    visibility:visible; 
    opacity:1; 
} 
ul#css3menu_top li { 
    position:relative; 
    display:block; 
    white-space:nowrap; 
    font-size:0; 
    float:left; 
} 
ul#css3menu_top li:hover { 
    z-index:1; 
} 
ul#css3menu_top ul .submenu { 
    z-index:2; 
    position:absolute; 
    left:100%; 
    top:0; 
} 
ul#css3menu_top { 
    font-size:0; 
    width:100%; 
    z-index:999; 
    position:relative; 
    display:inline-block; 
    zoom:1; 
    padding:0 0%; 
    margin:0 0%; 
    *display:inline; 
} 
ul#css3menu_top .column { 
    float:left; 
} 
* html ul#css3menu_top li a{ 
    display:inline-block; 
} 
ul#css3menu_top>li { 
    margin:0; 
    width:17%; 
} 
ul#css3menu_top li.toplast{ 
    width:15%; 
} 
ul#css3menu_top a:active, ul#css3menu_top a:focus { 
    outline-style:none; 
} 
ul#css3menu_top a{ 
    display:block; 
    vertical-align:middle; 
    text-align:left; 
    text-decoration:none; 
    font:bold 14px Calibri; 
    color:#EEEEEE; 
    text-shadow:#FFF 0 0 1px; 
    cursor:pointer; 
    padding:6px 15px 6px 3px; 
    background-color:#666666; 
    background-image:url("mainbk.png"); 
    background-repeat:repeat; 
    background-position:0 0; 
    border-width:0 0 0 1px; 
    border-style:solid; 
    border-color:#c0c0c0; 
} 
ul#css3menu_top ul li { 
    float:none; 
    margin:10px 0 0; 
} 
ul#css3menu_top ul a { 
    text-align:left; 
    padding:4px; 
    background-color:#EEEEEE; 
    background-image:none; 
    border-width:0; 
    border-radius:0px; 
    -moz-border-radius:0px; 
    -webkit-border-radius:0px; 
    font:14px Calibri; 
    color:#666666; 
    text-decoration:none; 
} 
ul#css3menu_top li:hover>a,ul#css3menu_top li a.pressed { 
    background-color:#EEEEEE; 
    color:#666666; 
    background-position:0 100px; 
    text-decoration:none; 
} 
ul#css3menu_top img { 
    border:none; 
    vertical-align:middle; 
    margin-right:6px; 
} 
ul#css3menu_top span { 
    display:block; 
    overflow:visible; 
    background-position:right center; 
    background-repeat:no-repeat; 
    padding-right:0px; 
} 
ul#css3menu_top ul span { 
    padding-right:8px; 
} 
ul#css3menu_top ul li:hover>a,ul#css3menu_top ul li a.pressed { 
    background-color:#EEEEEE; 
    background-image:none; 
    color:#666666; 
    text-decoration:none; 
} 
ul#css3menu_top li.topfirst>a { 
    padding-left: 7px; 
    border-width:0; 
    border-radius:4px 0 0 4px; 
    -moz-border-radius:4px 0 0 4px; 
    -webkit-border-radius:4px; 
    -webkit-border-top-right-radius:0; 
    -webkit-border-bottom-right-radius:0; 
} 
ul#css3menu_top li.toplast>a { 
    padding-right: 7px; 
    border-radius:0 4px 4px 0; 
    -moz-border-radius:0 4px 4px 0; 
    -webkit-border-radius:0; 
    -webkit-border-top-right-radius:4px; 
    -webkit-border-bottom-right-radius:4px; 
} 

@media only screen and (max-width:900px),only screen and (max-device-width:900px){ 
ul#css3menu_top>li{width:33%;}ul#css3menu_top>li:nth-child(3){width:34%}ul#css3menu_top>li:nth-child(n+4){width:33%;}ul#css3menu_top>li:nth-child(6){width:34%}} 
@media only screen and (max-width:600px),only screen and (max-device-width:600px){ 
ul#css3menu_top>li{width:50%;}ul#css3menu_top>li:nth-child(n+3){width:50%;}ul#css3menu_top>li:nth-child(n+5){width:50%;}} 
@media only screen and (max-width:450px),only screen and (max-device-width:450px){ 
ul#css3menu_top>li{width:100%;}ul#css3menu_top>li:nth-child(n+2){width:100%;}ul#css3menu_top>li:nth-child(n+3){width:100%;}ul#css3menu_top>li:nth-child(n+4){width:100%;}ul#css3menu_top>li:nth-child(n+6){width:100%;}} 


/*opera hack*/ 
@media only screen and (min-width:900px){ 
     html>/**/body noindex:-o-prefocus, html>/**/body ul#css3menu_top{ 
      display:table; 
     } 
     html>/**/body noindex:-o-prefocus, html>/**/body ul#css3menu_top>li{ 
      width:auto; 
      float:none; 
      display:table-cell; 
     } 
     html>/**/body noindex:-o-prefocus, html>/**/body ul#css3menu_top li.toplast{ 
      width:auto; 
      display:table-cell; 
     } 

} 

은 내가

여기에 서브 메뉴 위에 마우스를 가져 가면 텍스트 색상을 변경하는 방법을 작동하지 않을 수있는 탐색 메뉴에 대해 다음과 CSS 그것의 바이올린은

http://jsfiddle.net/n3FAq/

어떤 아이디어를 가지고 어떤 일을하고있다?

답변

0

ul#css3menu_top ul li a:hover { 
    color: #c00; 
} 

DEMO

0

당신은 하위 메뉴에있는 링크에 대한 호버 규칙이없는보십시오.

ul#css3menu_top .submenu a:hover { 
    color: red; 
} 

JSFiddle