2012-03-07 3 views
1

내 탐색 메뉴에서만 HTML5와 CSS 3을 사용하고 있는데 내가 원하는 것은 "관리자"라고 말하면 내 하위 메뉴가 하위 링크로 팝업되어야합니다. 내 문제는 바로 지금 내가 홈 메뉴를 클릭하면 내 아이 메뉴가 튀어 나오지만 0.5 초가 지나면 사라집니다 : 활성 상태입니까? 나는 시험해 보았다 : 공중에 올려 놓는다. 그리고 그것은 완벽하게 작동한다. 그러나 나의 웹 애플리케이션이 모바일 장치를위한 것이기 때문에 그것을 사용할 수 없다. 작동 시키려면 어떻게해야합니까? 클릭하고 하위 메뉴를 보려면 내 탐색 메뉴에서 다른 링크를 클릭하십시오. 사전에: 내 탐색 메뉴의 활성 문제

#menu { 
    width: 960px; 
    height: 40px; 
    clear: both; 
} 

ul#nav { 
    float: left; 
    width: 961px; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    /* gradient */ 
    background: #6a6a6a url(images/nav-bar-bg.png) repeat-x; 
    background: -webkit-gradient(linear, left top, left bottom, from(#074a98), to(#05366e)); 
    background: -moz-linear-gradient(top, #074a98, #05366e); 
    background: linear-gradient(-90deg, #074a98, #05366e);  
} 

ul#nav li { 
    display: inline; 
} 

ul#nav li a { 
    float: left; 
    font: bold 12px verdana,arial,tahoma,sans-serif; 
    line-height: 40px; 
    color: #fff; 
    text-decoration: none; 
    margin: 0; 
    padding: 0 30px; 
} 

ul#nav .current a, ul#nav li:active > a { 
    color: #fff; 
    text-decoration: none; 
    text-shadow: 1px 1px 1px #330000; 
background: #dd006b; 
} 


ul#nav ul { 
    display: none; 
} 


ul#nav li:active > ul { 
    position: absolute; 
    display: block; 
    width: 961px; 
    height: 45px; 
    position: absolute; 
    margin: 40px 0 0 0; 
    /* gradient */ 
    background: #dd006b url(../img/menu-child.png) repeat-x;  
    background: -webkit-gradient(linear, left top, left bottom, from(#dd006b), to(#a1014e)); 
    background: -moz-linear-gradient(top, #dd006b, #a1014e); 
    background: linear-gradient(-90deg, #dd006b, #a1014e); 

} 

ul#nav li:active > ul li a { 
    float: left; 
    font: bold 12px verdana,arial,tahoma,sans-serif; 
    line-height: 45px; 
    color: #fff; 
    text-decoration: none; 
    margin: 0; 
    padding: 2 30px 0 0; 
    background: #dd006b url(../img/menu-child.png) repeat-x; 
    background: -webkit-gradient(linear, left top, left bottom, from(#dd006b), to(#a1014e)); 
    background: -moz-linear-gradient(top, #dd006b, #a1014e); 
    background: linear-gradient(-90deg, #dd006b, #a1014e); 
} 

ul#nav li:active > ul li a:active { 
    text-decoration: none; 
    text-shadow: none; 
} 

감사 :

이 내 CSS입니다! 다른 링크를 사용자/사용자가 클릭 한 다음 이전 등등 숨길해야 할 때 HTML 또는이 작업을 수행하는 CSS 이러한 방법이 없기 때문에

+1

당신은 왜 이것을 위해 바이올린을 만들지 않습니까? – Jack

+0

Does : 모바일 환경에서 활성으로 작동해야합니까? 그렇다면 모바일 환경 밖에서 0.5 초 밖에 걸리지 않는다고해도 상관 없습니다. –

답변

1

시도가이 기능을 얻기 위해 jQuery를 사용하여, 사용자의 요구 사항은 예를 들어

..입니다 당신은이 site을 볼 수 있습니다, 나는 당신의 문제를 받고 있다면 당신이 원하는 기능의 이런 종류라고 생각합니다. 그러나 그것은 또한 약간의 시간 동안 열려 있습니다. 메뉴 위에 마우스를 올려 놓습니다.

위의 사이트는 모든 브라우저와 휴대 전화에서 완벽하게 작동합니다.

관련 문제