css - ホバーしても視界は変わらない

Question

可視性プロパティを使用して、ホバー時にドロップダウンメニューを備えたシンプルなナビゲーションバーに取り組んでいます。しかし、ホバーすると、条件は有効になりません。この背後にあるロジックは何ですか？

http://jsfiddle.net/MAvQp/

Answer 1

あなたのhtmlは奇形でした、兄弟ulではない子供でなければなりませんli

フィドル

Answer 2

サブアイテムを表示しようとしています

ul li:hover ul{
    visibility: visible;
}

ただし、サブアイテムulはの中にネストされていないliためul li ul、サブアイテムとは一致しません。したがって、htmlを次のようなものに変更します

<ul>
    <li>Menu Item 1 
            <ul>
            <li>Sub-Menu1 Item 1</li>
            <li>Sub-Menu1 Item 2</li>
            <li>Sub-Menu1 Item 3</li>
            </ul>
    </li>
…

</ul>

私のフォークフィドルもご覧ください。