Question

一直在寻找3个小时，但无法找到办法。我很沮丧，需要帮助。

这是我的HTML：

<div class="dropdown-content">
        <dl class="subDL">
            <dt><a href="#">-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Mark Attendance &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="li-icon">&raquo;</span></a></dt>
                <dl class="subDL">
                    <dt><a href="#">-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Arrival Time</a></dt>
                    <dt><a href="#">-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Departing Time</a></dt>
                </dl>
            <hr size=1 width="98%" color= #003E6B />
            <dt><a href="#">-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Summary</a></dt>
        </dl>
    </div>

.CSS

   .dropdown-content a:hover,dt:hover {
    background-color: #fff;
    color:#004d85;
}

.move:hover .dropdown-content {
    display: block;
}
dt:nth-child(1):hover .li-icon{
    color: #0076bc;
    text-shadow: 0px 0px 1px #0076bc;
    font-size: 20px;
}
dl.subDL dt  > ul.subDL{
    display: none;
}
.dropdown-content dl > dt:hover > ul{
    display: block;
}

Answer 1

首先重构你的html，使子菜单位于父dt：

中

<div class="dropdown-content">
    <dl class="subDL">
        <dt><a href="#">-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Mark Attendance &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="li-icon">&raquo;</span></a>
            <dl class="subDL">
                <dt><a href="#">-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Arrival Time</a></dt>
                <dt><a href="#">-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Departing Time</a></dt>
            </dl>
        </dt>
        <hr size=1 width="98%" color= #003E6B />
        <dt><a href="#">-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Summary</a></dt>
    </dl>
</div>

然后用dl替换css中的ul（因为你不使用uls ..）：

.dropdown-content a:hover,dt:hover {
    background-color: #fff;
    color:#004d85;
}

.move:hover .dropdown-content {
    display: block;
}
dt:nth-child(1):hover .li-icon{
    color: #0076bc;
    text-shadow: 0px 0px 1px #0076bc;
    font-size: 20px;
}
dl.subDL dt  > dl.subDL{
    display: none;
}
.dropdown-content dl > dt:hover > dl{
    display: block;
}

请参阅此jsfiddle。

如何在<dl>上悬停时出现<dl>

1 个答案: