激活锚点上的子菜单不要悬停

时间:2015-09-21 19:55:20

标签: html css hover

我正在尝试在我的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&amp;O">E&amp;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&amp;O">E&amp;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 &mdash; Think PIA first">PIA website&mdash;<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: " ";
}

0 个答案:

没有答案