0

フライアウトのある垂直メニューを作成しようとしています。これはサブメニューのある垂直メニューです。次のコードの何が問題になっていますか？

<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/

4

2 に答える 2

0

メニューの作成方法を再検討する必要がある場合があります。例えば： 

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

Blogは、 と の2 つのサブメニューを持つメニューでBlog 1あると想定されていますBlog 2。ただし<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-01T03:55:43.930 に答える
0

あなたはこれを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;
}

ulinli要素をネストすると、問題が解決する場合があります。

于 2011-08-01T04:01:53.527 に答える