2012-03-07 12 views
1

私のナビゲーションメニューでのみHTML5とCSS 3を使用していますが、私が望むのは、「管理者」と言うと、子メニューがサブリンクでポップアップするはずです。今私の問題は、私がホームをクリックすると、私の子メニューがポップアップするが、それは0.5秒後に消えるということです:アクティブですか?私は試みました:ホバーと完全に動作しますが、私はWebアプリケーションがモバイルデバイス用であるため、使用できません。それを機能させるために私は何ができますか?クリックすると、ナビゲーションメニューの別のリンクをクリックするまで子メニューが表示されます。事前に:ナビゲーションメニューのアクティブな問題

#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のような方法がないため、この機能を取得するためにjqueryのを使用する

+1

あなたはこのためのフィドルを作成しないでください – Jack

+0

:モバイル環境でアクティブな作業が必要ですか?そうであれば、確かにモバイル環境の外でわずか0.5秒であれば問題ではありません。 –

答えて

1

てみてください、あなたの要件は、などを非表示にする、以前の他のリンクにするときに/ユーザーのクリック..です

たとえば、あなたはこのsiteを見ることができます、私はあなたの問題を抱えている場合、私はこの種の機能を望んでいると思います。しかし、それは少し時間のために開いている。メニューにマウスを重ねる。

上記のサイトは、すべてのブラウザとモバイルで完全に機能しています。

関連する問題