Question

我的下拉菜单遇到了一个小问题。我需要和我的下拉列表中的额外级别，但我真的不知道如何处理CSS ......

可以看到该页面here。问题可以在“Om os”下的菜单中看到，其中“Brochure 2013”，“Brochure 2014”在悬停在“宣传册”上时应该是可见的而不是现在的！

如何解决这个问题？

这是我的CSS：

.cssmenu {
    border: 0px solid #2E181A;
    margin: 0px auto 0px auto;
    padding: 0px;
    font-family: verdana,geneva,arial,helvetica,sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #2E181A;
    width: 798px;
    background: #E6D9BD;
    text-align: center;
}

.cssmenu ul {
    background: #E6D9BD;
    height: 37px;
    list-style: none;
    margin: 0px auto 0px auto;
    padding: 0;
    text-align: center;
}

.cssmenu li {
    padding: 0px 8px 0px 8px;
    display: inline-block;
}

.cssmenu li a {
    color: #2E181A;
    display: block;
    font-weight: bold;
    line-height: 37px;
    padding: 0px 10px;
    text-align: center;
    text-decoration: none;
}

.cssmenu li a:hover {
    color: #8e8e8e;
    text-decoration: none;
}

.cssmenu li ul {
    background: #E6D9BD;
    border-left: 5px solid #2E181A;
    border-right: 5px solid #2E181A;
    border-bottom: 5px solid #2E181A;
    display: none;
    height: auto;
    opacity: 0.95;
    filter: alpha(opacity=95);
/* For IE8 and earlier */
    position: absolute;
    width: 225px;
    z-index: 200;
    float: none;
        /*top:1em;
        /*left:0;*/;
}

.cssmenu li:hover ul {
    display: block;
}

.cssmenu li li {
    display: block;
    float: none;
    padding: 0px;
    width: 225px;
}

.cssmenu li ul a {
    display: block;
    font-size: 12px;
    font-style: normal;
    padding: 0px 25px 0px 25px;
    text-align: left;
}

.cssmenu li ul a:hover {
    background: #D5BE91;
    color: #000000;
    opacity: 1;
    filter: alpha(opacity=100);
/* For IE8 and earlier */;
}

.cssmenu p {
    clear: left;
}

.cssmenu .active > a {
    background:;
    color: #ffffff;
}

.cssmenu .active > a:hover {
    color: #ffffff;
}

这是我的菜单：

<ul class="active">
    <li><span><a href="http://www.stutteri-volstrup.dk/">Forside</a></span>
    </li>
    <li><span><a href="http://www.stutteri-volstrup.dk/hingste.shtml">Hingste</a></span>
        <ul>
            <li><span><a href="http://www.stutteri-volstrup.dk/cash.shtml">Volstrups Cash</a></span>
            </li>
            <li><span><a href="http://www.stutteri-volstrup.dk/churchill.shtml">Churchill</a></span>
            </li>
            <li><span><a href="http://www.stutteri-volstrup.dk/cooper.shtml">Blejsbjergs Cooper</a></span>
            </li>
            <li><span><a href="http://www.stutteri-volstrup.dk/concosmos.shtml">Con Cosmos</a></span>
            </li>
        </ul>
    </li>
    <li><span><a href="http://www.stutteri-volstrup.dk/salgsheste.shtml">Salgsheste</a></span>
        <ul>
            <li><span><a href="http://www.stutteri-volstrup.dk/charline.shtml">Volstrups Charline</a></span>
            </li>
            <li><span><a href="http://www.stutteri-volstrup.dk/calina.shtml">Volstrups Calina</a></span>
            </li>
            <li><span><a href="http://www.stutteri-volstrup.dk/colline.shtml">Volstrups Colline</a></span>
            </li>
        </ul>
    </li>
    <li><span><a href="http://www.stutteri-volstrup.dk/betingelser.shtml">Betingelser</a></span>
    </li>
    <li><span><a href="http://www.stutteri-volstrup.dk/omos.shtml">Om os</a></span>
        <ul>
            <li><span><a href="http://www.stutteri-volstrup.dk/hestenu.shtml">Heste på stationen</a></span>
            </li>
            <li><span><a href="http://www.stutteri-volstrup.dk/samarbejde.shtml">Samarbejdspartnere</a></span>
            </li>
            <li><span><a href="http://www.stutteri-volstrup.dk/omos.shtml">Om Stutteriet</a></span>
            </li>
            <li><span><a href="http://www.stutteri-volstrup.dk/brochure.shtml">Brochure</a></span>
                <ul>
                    <li><span><a href="http://www.stutteri-volstrup.dk/brochure2014.shtml">Brochure for 2014</a></span>
                    </li>
                    <li><span><a href="http://www.stutteri-volstrup.dk/brochure2013.shtml">Brochure for 2013</a></span>
                    </li>
                </ul>
            </li>
        </ul>
    </li>

希望你们能帮助我！：）

Answer 1

你需要使用level3 ul.add一些margin-top和left to 100% 只需将此属性添加到您的css文件中：

.cssmenu li li:hover > ul{
    visibility:visible !important
}
    .cssmenu li ul ul {
    margin-top: -30px;
    left: 100%;
    width: 100%;
    visibility:hidden;
    border-left:none;
margin-left:-5px;

    }
.cssmenu li ul ul a{
border-left:5px solid #2E181A;
}
.cssmenu li ul ul li:first-child a{
border-left:none !important;

}

enter image description here

您也不需要将<a>标记添加到<span>。你可以删除它，

多级下拉菜单不会出现在右侧

1 个答案: