悬停在子菜单上时，突出显示父菜单以及子菜单

时间：2018-08-24 12:06:50

标签： javascript html css submenu

我的网页遇到问题。我正在使用侧面菜单，当我在其上进行鼠标悬停时，只有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")'>&nbsp;&nbsp;&nbsp;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")'>&nbsp;&nbsp;&nbsp;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")'>&nbsp;&nbsp;&nbsp;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>&nbsp;&nbsp;&nbsp;Quick Configuration</strong></a></span></li>
 <li><span class="first"><a href='javascript:openInFrame("/cgi/Nomus.cgi?cgi=Logout.cgi")'><strong>&nbsp;&nbsp;&nbsp;Exit</strong>   </a></span></li>
 </ul></nav>

请找到所附的图片，我要输出enter image description here

1 个答案:

答案 0 :(得分：1)

  

请尝试下面的代码

nav.vertical li:hover > span> a {
background: #fff;
color: #000;}
相关问题
最新问题