我的网页遇到问题。我正在使用侧边菜单，当我将鼠标悬停在其上时，只有href会突出显示。当我在子菜单上进行鼠标悬停时，我希望我的子菜单及其父菜单应该突出显示。我正在使用onclick来打开和关闭菜单，我希望当我在子菜单上进行鼠标悬停时，父菜单和子菜单都会突出显示。请任何人帮我解决这个问题。我尝试了很多，但我做不到。帮我解决这个问题。谢谢。
请在CSS下面找到代码：
*{
padding:0px 0px 0px 0px;
margin:0.15px;
border-radius:2px;
}
body
{
font-family:Times New Roman;
background:#F8F8F8;
}
nav.vertical
{
width:260px;
position:absolute;
background:#5798B4;
}
nav.vertical ul
{
list-style: none;
}
nav.vertical li
{
position:relative;
line-height:4px;
}
nav.vertical a
{
display:block;
color:#FFF;
text-decoration:none;
padding:8px 12px;
}
nav.vertical li a:hover
{
background:#E2ECF6;
color:#000;
}
nav.vertical ul ul
{
background:rgba(0,0,0,0.01);
padding-left: 18px;
overflow:hidden;
display:none;
}
.first
{
font-size:18px;
}
.second
{
font-size:17px;
}
.third
{
font-size:16px;
}
.last
{
font-size:14px;
}
HTML
<nav class="vertical"><ul>
<li><span class="first"><a href="#/"><strong>+ Configuration</strong></a></span>
<ul><li><span class="second"><a href="#/">+ IP Configuration</a></span>
<ul><li><span class="third"><a href="#/">+ Address Config</a></span>
<ul><li><span class="last"><a href='javascript:openInFrame("/cgi/Nomus.cgi?cgi=LIPConfig.cgi")'>LAN IP</a></span></li>
<li><span class="last"><a href='javascript:openInFrame("/cgi/Nomus.cgi?cgi=WIPConfig.cgi")'>WAN IP</a></span></li>
<li><span class="last"><a href='javascript:openInFrame("/cgi/Nomus.cgi?cgi=L2TPIPConfig.cgi")'>L2TP IP</a></span></li></li></ul>
<li><span class="third"><a href="#/">+ NAT Config</a></span>
<ul><li><span class="last"><a href='javascript:openInFrame("/cgi/Nomus.cgi?cgi=NATConfig.cgi")'>NAT</a></span></li>
<li><span class="last"><a href='javascript:openInFrame("/cgi/Nomus.cgi?cgi=IPv4v6SMap.cgi")'>IPv4v6 Static Mapping</a></span></li>
<li><span class="last"><a href='javascript:openInFrame("/cgi/Nomus.cgi?cgi=PortFwd.cgi")'>Port Forwarding</a></span></li></ul></li>
<li><span class="third"><a href='javascript:openInFrame("/cgi/Nomus.cgi?cgi=WiZRTUPort.cgi")'>WiZ / RTU Port Mapping</a></span></li>
<li><span class="third"><a href='javascript:openInFrame("/cgi/Nomus.cgi?cgi=Mngmt_config.cgi")'>Management Config</a></span></li>
<li><span class="third"><a href="#/">+ IPSec VPN Config</a></span>
<ul><li><span class="last"><a href='javascript:openInFrame("/cgi/Nomus.cgi?cgi=IPSecConfig.cgi")'>IPSec</a></span></li>
<li><span class="last"><a href='javascript:openInFrame("/cgi/Nomus.cgi?cgi=IPSecTunnelConfig.cgi")'>Tunnel</a></span></li></ul></li>
<li><span class="third"><a href='javascript:openInFrame("/cgi/Nomus.cgi?cgi=L2TPVPNConfig.cgi")'>L2TP VPN Config</a></span></li><li> </ul></li>
<li><span class="second"><a href="#/">+ Dial Up Configuration</a></span>
<ul><li><span class="third"><a href='javascript:openInFrame("/cgi/Nomus.cgi?cgi=DialUpParams.cgi")'>Dial Up Params</a></span></li>
<li><span class="third"><a href="#/">+ Dial Up Scripts</a></span>
<ul><li><span class="last"><a href='javascript:openInFrame("/cgi/Nomus.cgi?cgi=ModemInit.cgi")'>Modem Init Commands</a></span></li>
<li><span class="last"><a href='javascript:openInFrame("/cgi/Nomus.cgi?cgi=DialOut.cgi")'>Dial Out Commands</a></span></li>
<li><span class="last"><a href='javascript:openInFrame("/cgi/Nomus.cgi?cgi=HangUp.cgi")'>Hang Up Commands</a></span></li>
<li><span class="last"><a href='javascript:openInFrame("/cgi/Nomus.cgi?cgi=SMSCmd.cgi")'>SMS Commands</a></span></li></ul></li></ul></li>
<li><span class="second"><a href='javascript:openInFrame("/cgi/Nomus.cgi?cgi=PPPConfig.cgi")'> PPP Configuration</a></span> </li>
<li><span class="second"><a href="#/">+ SMS Configuration</a></span>
<ul><li><span class="last"><a href='javascript:openInFrame("/cgi/Nomus.cgi?cgi=SMSConf.cgi")'>SMS</a></span></li>
<li><span class="last"><a href='javascript:openInFrame("/cgi/Nomus.cgi?cgi=SrcMobile.cgi")'>Source Mobile Number</a></span></li>
<li><span class="last"><a href='javascript:openInFrame("/cgi/Nomus.cgi?cgi=SMSAlarmParams.cgi")'>SMS Alarm Parameter</a></span></li></ul></li>
<li><span class="second"><a href='javascript:openInFrame("/cgi/Nomus.cgi?cgi=DateTimeConf.cgi")'> Date & Time Configuration</a></span></li>
<li><span class="second"><a href="#/">+ Log Configuration</a></span>
<ul><li><span class="third"><a href='javascript:openInFrame("/cgi/Nomus.cgi?cgi=LogParam.cgi")'>Log Params</a></span></li>
<li><span class="third"><a href='javascript:openInFrame("/cgi/Nomus.cgi?cgi=LogEvent.cgi")'>Log Event</a></span></li>
<li><span class="third"><a href='javascript:openInFrame("/cgi/Nomus.cgi?cgi=LogUpload.cgi")'>Log Upload</a></span></li></ul></li>
<li><span class="second"><a href="#/">+ Ext. Network Configuration</a></span>
<ul><li><span class="third"><a href='javascript:openInFrame("/cgi/Nomus.cgi?cgi=ExtrnNWConf.cgi")'>Ext. Network Connection</a></span></li>
<li><span class="third"><a href='javascript:openInFrame("/cgi/Nomus.cgi?cgi=TgtIPConfig.cgi")'>Target IP</a></span></li></ul></li>
<li><span class="second"><a href="#/">+ SNMP Configuration</a></span>
<ul><li><span class="third"><a href='javascript:openInFrame("/cgi/Nomus.cgi?cgi=SysConfig.cgi")'>System</a></span></li>
<li><span class="third" ><a href='javascript:openInFrame("/cgi/Nomus.cgi?cgi=TrapConfig.cgi")'>Trap</a></span></li></ul></li>
<li><span class="second"><a href="#/">+ DTU Configuration</a></span>
<ul><li><span class="third"><a href='javascript:openInFrame("/cgi/Nomus.cgi?cgi=DTUApp.cgi")'>DTU Application</a></span></li>
<li><span class="third"><a href='javascript:openInFrame("/cgi/Nomus.cgi?cgi=RS232Config.cgi")'>RS232</a></span></li></ul></li>
<li><span class="second"><a href='javascript:openInFrame("/cgi/Nomus.cgi?cgi=SIMSelection.cgi")'> SIM Selection</a></span></li></ul></li>
<li><span class="first"><a href="#/"><strong>+ System Control</strong></a></span>
<ul><li><span class="second"><a href='javascript:openInFrame("/cgi/Nomus.cgi?cgi=Save.cgi")'>Save</a></span></li>
<li><span class="second"><a href='javascript:openInFrame("/cgi/Nomus.cgi?cgi=Reboot.cgi")'>Reboot</a></span></li>
<li><span class="second"><a href='javascript:openInFrame("/cgi/Nomus.cgi?cgi=DefaultConf.cgi")'>Factory Defaults</a></span></li>
<li><span class="second"><a href='javascript:openInFrame("/cgi/Nomus.cgi?cgi=UserAccount.cgi")'>Change Password</a></span></li>
<li><span class="second"><a href='javascript:openInFrame("/cgi/Nomus.cgi?cgi=SysMtn.cgi")'>System Maintenance</a></span></li></ul></li>
<li><span class="first"><a href="#/"><strong>+ Diagnostics</strong></a></span>
<ul><li><span class="second"><a href='javascript:openInFrame("/cgi/Nomus.cgi?cgi=Ping.cgi")'>Ping</a></span></li>
<li><span class="second"><a href='javascript:openInFrame("/cgi/Nomus.cgi?cgi=TRoute.cgi")'>Trace Route</a></span></li></ul></li>
<li><span class="first"><a href="#/"><strong>+ Status</strong></a></span>
<ul><li><span class="second"><a href='javascript:openInFrame("/cgi/Nomus.cgi?cgi=SysStatus.cgi")'>System</a></span></li>
<li><span class="second"><a href='javascript:openInFrame("/cgi/Nomus.cgi?cgi=WANStatus.cgi")'>WAN</a></span></li>
<li><span class="second"><a href='javascript:openInFrame("/cgi/Nomus.cgi?cgi=LANStatus.cgi")'>LAN</a></span></li>
<li><span class="second"><a href='javascript:openInFrame("/cgi/Nomus.cgi?cgi=PPPStatus.cgi")'>PPP</a></span></li>
<li><span class="second"><a href="#/">+ Log Status</a></span>
<ul><li><span class="third"><a href='javascript:openInFrame("/cgi/Nomus.cgi?cgi=ShwAllLogs.cgi")'>Show All Logs</a></span></li>
<li><span class="third"><a href='javascript:openInFrame("/cgi/Nomus.cgi?cgi=ShwLogsEdt.cgi")'>Show Logs From</a></span></li></ul>
<li><span class="second"><a href='javascript:openInFrame("/cgi/Nomus.cgi?cgi=CellInfo.cgi")'>Cell Info.</a></span></li>
<li><span class="second"><a href='javascript:openInFrame("/cgi/Nomus.cgi?cgi=VPNStatus.cgi")'>VPN Status</a></span></li></li></ul></li>
<li><span class="first"><a href="#/"><strong>+ Traps</strong></a></span>
<ul><li><span class="second"><a href='javascript:openInFrame("/cgi/Nomus.cgi?cgi=GTraps.cgi")'>Generic</a></span></li>
<li><span class="second"><a href='javascript:openInFrame("/cgi/Nomus.cgi?cgi=STraps.cgi")'>Specific</a></span></li></ul></li>
<li><span class="first"><a href='javascript:openInFrame("/cgi/Nomus.cgi?cgi=QuickConfig.cgi")'><strong> Quick Configuration</strong></a></span></li>
<li><span class="first"><a href='javascript:openInFrame("/cgi/Nomus.cgi?cgi=Logout.cgi")'><strong> Exit</strong> </a></span></li>
</ul></nav>
请找到附加的图像我想要这样的输出enter image description here
请尝试下面的代码
nav.vertical li:hover > span> a {
background: #fff;
color: #000;}