Question

我正在尝试创建一个带有飞出的垂直菜单。这是一个带子菜单的垂直菜单。以下代码出了什么问题？

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

Answer 1

您可能需要重新审视构建菜单的方式。例如：

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

应该是Blog菜单，其中包含两个子菜单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 -->

执行此操作后，对于其他子菜单，您还可以使用飞行子菜单。您现在可以计算出位置，颜色等。

Answer 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;
}

将ul嵌套在li个元素中可以解决您的问题。

鼠标悬停时子菜单飞出的垂直菜单

2 个答案: