Вертикальное меню с всплывающими подменю при наведении мыши

Я пытаюсь создать вертикальное меню с выпадающими меню. Это вертикальное меню с подменю. Что не так со следующим кодом?

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


html css submenu
person raaz    schedule 01.08.2011    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Возможно, вам придется пересмотреть, как вы строите меню. Например:

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

Как только вы это сделаете, для других подменю у вас появятся летающие подменю. Теперь вы можете определить местоположение, цвета и т. д.

person Nivas    schedule 01.08.2011

arrow_upward
0
arrow_downward

вы написали это дважды:

#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 элементов может решить вашу проблему.

person Hugo Mota    schedule 01.08.2011