0

我一直在严格使用 CSS 制作垂直菜单。

当用户将鼠标悬停在顶部菜单上时，所有子菜单都应垂直显示为父菜单。我试图复制的例子是这个网站上使用的例子：http: //blackdoctor.org/

这是我编写的 HTML 代码块：

 <!-- divPgContent STARTS -->
 <div id="divPgContent" style="height:200px;">

<!-- divTopMenu1 STARTS -->
<div id="divTopMenu1">

    <ul id="topmenu1" class="menu">
        <li class="current active"><a href="/">Home</a></li>
        <li><a target="_blank" href="#">Menu 2</a></li>
        <li><a target="_blank" href="#">Menu 3</a></li>
        <li><a target="_blank" href="#">Menu 4</a></li>
        <li><a target="_blank" href="#">Menu 5</a></li>
        <li><a href="javascript:void(0);">Menu 6</a>
            <ul>
                <li><a href="#">Sub Menu 1</a></li>
                <li><a href="#">Sub Menu 2</a></li>
                <li><a href="#">Sub Menu 3</a></li>
                <li><a href="#">Sub Menu 4</a></li>
                <li><a href="#">Sub Menu 5</a></li>
                <li><a href="#">Sub Menu 6</a></li>
                <li><a href="#">Sub Menu 7</a></li>
                <li><a href="#">Sub Menu 8</a></li>
                <li><a href="#">Sub Menu 9</a></li>
            </ul>
        </li>
        <li><a href="javascript:void(0);">Menu 7</a>
            <ul>
                <li><a href="#">Sub Menu 1</a></li>
                <li><a href="#">Sub Menu 2</a></li>
                <li><a href="#">Sub Menu 3</a></li>
                <li><a href="#">Sub Menu 4</a></li>
                <li><a href="#">Sub Menu 5</a></li>
                <li><a href="#">Sub Menu 6</a></li>
                <li><a href="#">Sub Menu 7</a></li>
                <li><a href="#">Sub Menu 8</a></li>
                <li><a href="#">Sub Menu 9</a></li>
            </ul>
        </li>
        <li><a href="javascript:void(0);">Menu 7</a>
            <ul>
                <li><a href="#">Sub Menu 1</a></li>
                <li><a href="#">Sub Menu 2</a></li>
                <li><a href="#">Sub Menu 3</a></li>
                <li><a href="#">Sub Menu 4</a></li>
                <li><a href="#">Sub Menu 5</a></li>
                <li><a href="#">Sub Menu 6</a></li>
                <li><a href="#">Sub Menu 7</a></li>
                <li><a href="#">Sub Menu 8</a></li>
                <li><a href="#">Sub Menu 9</a></li>
            </ul>
        </li>
    </ul>

    <div class="divClr"></div>

</div>
<!-- divTopMenu1 ENDS -->

<div class="divClr"></div>

</div>
<!-- divPgContent ENDS -->

这是我的CSS：

    #divPgContent
    {
        width:980px;
        height:auto;

        margin:0px auto 0px auto;
        padding:15px 15px;

        border:2px solid #E4E8EA;
    }

    /* divTopMenu1 STARTS */
    ul#topmenu1
    {
        width:100%;
        height:100%;

        margin:0px 0px;
        padding:0px 0px;
    }   
        ul#topmenu1 li
        {
            float: left;
            height: 36px;
            margin: 0 0px;

            display:inline;
            list-style:none;
            margin:0px 0px;
            text-shadow:-1px -1px 1px rgba(0, 0, 0, 0.4);
        }
            #divTopMenu1 ul li.current,
            #divTopMenu1 ul li a:hover
            {
                color:#FFFFFF;
                background-color:#6ABD45;
            }
            ul#topmenu1 a
            {
                display:block; 
                cursor:pointer; 

                padding:10px 10px;

                text-decoration:none;

                font-size: 90%;
                font-weight:bold;

                color:#FFFFFF;
            }


    ul#topmenu1 ul li
    {
        height:auto;
    }
    ul#topmenu1 li ul li span.separator
    {
        font-size:90%;
    }
    #topmenu1 li ul li span .img
    {
        display:none;
    }
    ul#topmenu1 li:hover>*
    {
        display:block;
    }
    ul#topmenu1 li:hover
    {
        position:relative;
        border-bottom:transparent;
    }


    ul#topmenu1 ul
    {
        margin:0px 0px;
        padding:0px 0px;

        display:none;
        position:absolute;
        left:-407px;
        top:100%;

        min-width:950px;    
        background-color:#6ABD45;
        z-index:50000;
    }

    ul#topmenu1 ul a
    {
        font-size:90%; 
        width:130px;
    }
    ul#topmenu1 ul li
    {
        height: 42px;
        margin: 0 0px;

        list-style:none;
        margin:0px 0px;
        text-shadow:-1px -1px 1px rgba(0, 0, 0, 0.4);
    }

    ul#topmenu1 ul li:hover>a
    {
        text-decoration:none; 
        background-color:#6ABD45;
    }



    ul#topmenu1 ul ul
    {
        position:absolute; 
        left:100%; 
        top:0;
    }



    ul#topmenu1>li, ul#topmenu1 li
    {
        margin:0;
    }
    #topmenu1 li .separator
    {
        cursor: pointer;
        display: block;
        font-size: 110%;
        font-weight:bold;
        text-transform: lowercase;
        text-decoration:none;
        padding:15px 15px;
        color:#FFFFFF;
    }
    ul#topmenu1 .deeper ul li:hover>a
    {
        text-decoration:none; 
        background-color:#105F7D;
    }
    /* divTopMenu1 ENDS */

任何帮助将不胜感激。

谢谢你。

4

1 回答 1

0

我想这就是您要实现的目标：

http://jsfiddle.net/Qwzv5/

请注意，我将position: relative声明移至 ，ul#topmenu1以便您可以将子菜单绝对定位在不依赖于当前活动的元素中<li>。

和top成为left：

ul#topmenu1 ul
{
    ...

    left:0;
    top:39px;
}

注意：虽然您的 CSS 有点冗长，但我猜您可以使用更简洁的代码来实现相同的目标

于 2012-12-27T08:23:42.267 回答