wie man macht <dl> erscheint auf Schweben auf einem anderen <dl>

Question

Seit 3 ​​Stunden kontinuierlich gesucht, aber konnte keinen Weg finden, es zu tun. Ich bin so frustriert, brauche Hilfe.

hier ist mein 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

Erste restrukturieren Ihre HTML, so dass das Untermenü innerhalb des übergeordneten ist 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> 

Dann ist Ihre UL ersetzen in die CSS mit DL (wie Sie nicht verwenden ..):

.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; 
} 

Siehe hierzu jsfiddle.