ナビゲーション用のCSS

Question

私はHTML ul liベースのナビゲーション要件があります。私たちがwww.microsoft.comに行ったときのように、ドロップダウンをどのようにして表示させることができますか？たとえば、www.microsoft.comにアクセスして製品をクリックすると、同じドロップダウンウィンドウにある製品のリストとエンターテイメントの一覧が別の列に表示されます。このためのCSSを作成するにはどうすればよいですか？これは私が私の場合には

<ul> 
    <li> 
    <a href="link" target="">Home</a> 
    </li> 
    <li> 
    <a href="link" target="">Menu 1</a> 
     <ul> 
     <li> 
      <a href="link" target="">Sub Menu 1</a> 
      <ul> 
       <li> 
       <a href="link" target="">sub Menu 1a </a> 
       </li> 

       <li> 
      <a href="link" target="">sub Menu 1b </a> 
       </li> 

       <li> 
       <a href="link" target="">sub Menu 1c </a> 
       </li> 
      </ul> 
      </li> 

     <li> 
     <a href="link" target="">Sub Menu 2</a> 
       <ul> 
        <li> 
        <a href="link" target="">sub Menu 2a </a> 
        </li> 

        <li> 
       <a href="link" target="">sub Menu 2b </a> 
        </li> 

        <li> 
        <a href="link" target="">sub Menu 2c </a> 
        </li> 
       </ul> 
      </li> 

      <li> 
      <a href="link" target="">Sub Menu 3</a> 
        <ul> 
         <li> 
         <a href="link" target="">sub Menu 3a </a> 
         </li> 

         <li> 
        <a href="link" target="">sub Menu 3b </a> 
         </li> 

         <li> 
         <a href="link" target="">sub Menu 3c </a> 
         </li> 
        </ul> 
     </li> 
    </ul> 
    </li> 
     <li> <a href="link" target="">Menu 2</a> 
     <ul> 
      <li> <a href="linl" > sub Menu 1 </a> </li> 
      <li> <a href="link2"> sub Menu 2 </a> </li> 
     </ul> 
     </li> 

    </ul> 

ので、持っている誰かがメニュー1をクリックしたとき、それはドロップダウンウィンドウでサブメニュー1を表示する必要があり、その下にサブメニュー1A、1B、1Cを表示し、サブメニュー2を表示するものですその下にサブメニュー2a、2b、2cを表示します。メニュー項目のリストが長い場合は、複数の列に表示する必要があります。この要件を満たすサンプルCSSがありますか？

Answer 1

グーグル「CSSドロップダウンメニュー」だけで利用できる例がたくさんあります。この質問にhttp://www.htmldog.com/articles/suckerfish/dropdowns/