ホバーサブカテゴリーのメニューバー？

Question

2つのレベルのメニューを持つメニューバーを作成しようとしています。トップメニューはメインメニューです。次に、その下の2番目のレベルには、いくつかのサブカテゴリ項目があります。今すぐメインメニューをクリックし、そのページをロードして、ページにハードコードされているため、そのセクションのサブカテゴリメニュー項目を表示する必要があります。メインメニュー項目の上にマウスを置くと、サブメニューがロードされるようにしたいと思います。

Here are a couple of screenshots of what it looks like

Here is a jsFiddle of the navigation area and CSS

これを達成する私の最善の方法は何でしょう。私は経験が豊富ではありませんが、HTMLとCSSをよく理解しています。正しい方向への助けがあれば素晴らしいでしょう。ありがとう。

Answer 1

私は過去に、メニューのこのタイプを作ったが、私はあなたがここにhttp://jsfiddle.net/PWFGd/24/

使用したいプロパティを見つけることができるコードのコピーを作成しましたです：

selector{ 
    display: none; 
} 

selector:hover{ 
    display: block; 
} 

・ホープ助けになる。

ポリマー性。

Answer 2

一般的な兄弟コンビネータ（~）を現在の構造で使用すると、このようなことが実現できます。 hover疑似要素を使用して、サブメニューの表示状態（または表示状態）を切り替えます。

http://jsfiddle.net/PWFGd/25/

/* on hover of mainmenu, find subnav and show it */ 
.mainMenu:hover ~ ul.subNav { 
    display: block; 
} 

ul.subNav{ 
    display: none; /* hide submenu */ 
    font:normal 11px/12px Arial, Helvetica, sans-serif; 
    padding:4px 0 0 0; 
} 

CSSベースのナビゲーションメニューのネット上の例がたくさんあります。私はあなたのhtml構造を考え直し、それらの1つを使いたいかもしれないと思います。 Google

Answer 3

Aymericにの答えは、私は種類のそれが働いてしまった私は、多くの場合、

here is demo what u looking for

complete tutorial link