マウスが動かされたときにサブメニューが飛び出す垂直メニュー

フライアウトを含む垂直メニューを作成しようとしています。サブメニュー付きの垂直メニューです。次のコードに間違いがありますか？あなたはメニューを構築する方法を再検討する必要がある場合がありますマウスが動かされたときにサブメニューが飛び出す垂直メニュー

<html> 
    <head> 
     <title>Untitled Document</title> 
     <style type="text/css"> 
      #navmenu ul ul li a { 
       border:1px solid #888888; border-bottom: none; font-size:12pt; line-height: 1.6em; color:#303030; background-color:#a5a5a5; background-image:none; 
      } 
      #navmenu { 
       width: 150px; /* set width of menu */ 
      } 
      #navmenu ul { 
       list-style-type:none; margin:0px; padding:0px; 
      } 
      #navmenu a { 
       text-decoration:none; border: 1px solid #303030; width:170px; display:block; text-align:center; font-size:14pt; line-height:2em; background:url(Button_top.gif) repeat-x left; font-family:Arial, Helvetica, sans-serif; color:white; 
      } 
      #navmenu a:hover { 
       color: #a00; 
       /* red text color on hover */ 
       background: #fff; 
       /* white bgcolor on hover */ 
      } 
      #navmenu li { 
       /* make the list elements a containing block for the nested lists */ 
       position: relative; 
      } 
      #navmenu ul ul { 
       position: absolute; top: 0; left: 100%; 
       /* to position them to the right of their containing block */ 
       width: 100%; 
       /* width is based on the containing block */ 
       } 
      #navmenu li { 
       /* make the list elements a containing block for the nested lists */ 
       position: relative; 
      } 
      #navmenu ul ul { 
       display: none; 
      } 
      #navmenu ul li:hover ul { 
       display:block; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="navmenu"> 
      <ul> 
       <li> 
        <a href="#">Home</a> 
       </li> 
       <li> 
        <a href="#">Blog</a> 
       </li> 
       <ul> 
        <li> 
         <a href="#">Blog 1</a> 
        </li> 
        <li> 
         <a href="#">Blog 2</a> 
        </li> 
       </ul> 
       <li> 
        <a href="#">Websites</a> 
       </li> 
       <ul> 
        <li> 
         <a href="#">Websites 1</a> 
        </li> 
        <li> 
         <a href="#">Websites 2</a> 
        </li> 
       </ul> 
       <li> 
        <a href="#">Photos</a> 
       </li> 
      </ul> 
     </div> 
    </body> 
</html>

http://jsfiddle.net/9bHkj/1/

出典

2011-08-01 raaz

。例えば：

  <li> 
       <a href="#">Blog</a> 
      </li> 
      <ul> 
       <li> 
        <a href="#">Blog 1</a> 
       </li> 
       <li> 
        <a href="#">Blog 2</a> 
       </li> 
      </ul>

は、二つのサブメニューBlog 1とBlog 2とBlogメニューであると考えられます。しかし、その後、サブメニューの<ul>はメニューの内<li>ことになってない別にされています。一度これを行う

<li> 
     <a href="#">Blog</a> 
     <!-- The <li> does not end here --> 
     <ul> 
     <li> 
      <a href="#">Blog 1</a> 
     </li> 
     <li> 
      <a href="#">Blog 2</a> 
     </li> 
     </ul> 
    </li> <!-- end tag for the blog <li>, now enclosing the submenu also -->

、他のサブメニューのためだけでなく、あなたが飛んでサブメニューを持っています。あなたは今場所をうまくすることができ、色など

出典

2011-08-01 03:55:43 Nivas

あなたはこれを2回書きました：

#navmenu li { 
    /* make the list elements a containing block for the nested lists */ 
    position: relative; 
}

をあなたのネストされたリストがulがli要素に含まれていません。だから、これはどちらか動作しません。

#navmenu ul li:hover ul { 
    display:block; 
}

はあなたの問題を解決することがありあなたulli内の要素を入れ子に。

出典

2011-08-01 04:01:53

マウスが動かされたときにサブメニューが飛び出す垂直メニュー

答えて

関連する問題