我正在尝试在我的ul中的锚标记上悬停时激活我的子菜单。它似乎只有当悬停在锚标签所在的li上时才有效。我不想限制列表项的宽度只是为了达到这个效果。我尝试过几种方法:
a:悬停,导航.collapsable a:悬停,然后删除" display-block"属性。任何帮助将非常感谢!谢谢
这是我的HTML:
<nav>
<ul class="collapsable" style="margin-left:-5px; margin-top:-10px;">
<li>Licensing
<ul>
<li><a href="#Corporate">Corporate</a></li>
<li><a href="#Individual">Individual</a></li>
<li><a href="#TBA/DBA">TBA/DBA</a></li>
<li><a href="#Nonresident">Nonresident</a></li>
<li><a href="#Name approval">Name approval</a></li>
<li><a href="#CSRs">CSRs</a></li>
<li><a href="#Who needs a license">Who needs a license</a></li>
<li><a href="#Duties an unlicensed person can do">Duties an unlicensed person can do</a></li>
<li><a href="#Continuing education">Continuing education</a></li>
</ul>
</li>
<li>Business planning
<ul>
<li><a href="#Business plans">Business plans</a></li>
<li><a href="#Marketing plans">Marketing plans</a></li>
<li><a href="#Perpetuation plans">Perpetuation plans</a></li>
<li><a href="#Disaster plans">Disaster plans</a></li>
<li><a href="#Local Chambers of Commerce">Local Chambers of Commerce</a></li>
<li><a href="#Dos and don'ts of starting your own agency">Dos and don'ts of starting your own agency</a></li>
</ul>
</li>
<li>Financial planning
<ul>
<li><a href="#Accounting">Accounting</a></li>
<li><a href="#Taxes">Taxes</a></li>
<li><a href="#Insurance for the agency">Insurance for the agency</a></li>
<li><a href="#E&O">E&O</a></li>
<li><a href="#Agency financing">Agency financing</a></li>
<li><a href="#Premium financing">Premium financing</a></li>
<li><a href="#Trust accounts">Trust accounts</a></li>
</ul>
</li>
<li>Sales and marketing
<ul>
<li><a href="#Advertising">Advertising</a></li>
<li><a href="#agencymarketingtoolkit">Agency Marketing Tool Kit, calendar</a></li>
<li><a href="#Signage and business cards">Signage and business cards</a></li>
<li><a href="#Local community services">Local community services</a></li>
<li><a href="#Consumer content">Consumer content</a></li>
<li><a href="#PIA Creative Services">PIA Creative Services</a></li>
<li><a href="#Markets">Markets</a></li>
<li><a href="#Niche marketing">Niche marketing</a></li>
</ul>
</li>
<li>Office organization
<ul>
<li><a href="#Physical space/layout">Physical space/layout</a></li>
<li><a href="#Furniture">Furniture</a></li>
<li><a href="#Equipment">Equipment</a></li>
</ul>
</li>
<li>Personnel management
<ul>
<li><a href="#Job descriptions">Job descriptions</a></li>
<li><a href="#Hiring">Hiring</a></li>
<li><a href="#Testing">Testing</a></li>
<li><a href="#Personality and aptitude assessment">Personality and aptitude assessment</a></li>
<li><a href="#Managing">Managing</a></li>
<li><a href="#Compensation benefits">Compensation benefits</a></li>
<li><a href="#Group health, dental, life and long-term disability">Group health, dental, life and long-term disability</a></li>
<li><a href="#Contracts">Contracts</a></li>
<li><a href="#Employment law">Employment law</a></li>
<li><a href="#Employee handbook">Employee handbook</a></li>
<li><a href="#Time management">Time management</a></li>
</ul>
</li>
<li>Internal workflow
<ul>
<li><a href="#Procedures manual">Procedures manual</a></li>
<li><a href="#IwE&O">E&O</a></li>
<li><a href="#Coverage checklists">Coverage checklists</a></li>
<li><a href="#Carrier workflow">Carrier workflow</a></li>
<li><a href="#Binding authority">Binding authority</a></li>
<li><a href="#Underwriting">Underwriting</a></li>
<li><a href="#Workflow">Workflow</a></li>
<li><a href="#Privacy">Privacy</a></li>
<li><a href="#Files">Files</a></li>
<li><a href="#Storage/security">Storage/security</a></li>
<li><a href="#Notices">Notices</a></li>
<li><a href="#Cyber insurance">Cyber insurance</a></li>
<li><a href="#Policy writing/proposal template">Policy writing/proposal template</a></li>
</ul>
</li>
<li>Technology issues
<ul>
<li><a href="#Agency management systems">Agency management systems</a></li>
<li><a href="#Computer hardware">Computer hardware</a></li>
<li><a href="#Software">Software</a></li>
<li><a href="#E-mailing/faxing/electronic filing">E-mailing/faxing/ electronic filing</a></li>
<li><a href="#Real Time utilization">Real Time utilization</a></li>
<li><a href="#Emerald Website Design service">Emerald Website Design service</a></li>
<li><a href="#Agencyrevolution">Agency Revolution Internet marketing</a></li>
</ul>
</li>
<li>Reference resources
<ul>
<li><a href="#PIA website — Think PIA first">PIA website—<em>Think PIA first </em></a></li>
<li><a href="#PIA National">PIA National</a></li>
<li><a href="#Insurance Department websites">Insurance Department websites</a></li>
<li><a href="#Department of Motor Vehicles">Department of Motor Vehicles</a></li>
<li><a href="#National Traffic Safety Council">National Traffic Safety Council</a></li>
<li><a href="#Glossaries of insurance terms">Glossaries of insurance terms</a></li>
</ul>
</li>
</ul>
</nav>
这是CSS:
nav li>ul {
/*display: inline-block;*/
margin: 0;
padding: 0;
}
nav .collapsable li>ul {
display: none;
}
nav li>ul::before {
content: " ";
}
nav li>ul::after {
content: " ";
}
nav li:hover>ul {
display: inline-block;
}
nav li>ul>li {
/*display: inline-block;*/
}
nav li>ul>li+li::before {
content: " ";
}