Keep SubMenu Anzeige auf Hover leeren Raum

Ich habe ein Menü mit einem Pfeil ich hinzugefügt, ich will, dass, wenn der Benutzer zum Untermenü schwebt muss Anzeige bleiben, auch wenn es den Cursor auf dem Leerraum passiert, ist das Problem meine Klasse " .sub "Muss sein" Position: absolut ", irgendeine Idee?Keep SubMenu Anzeige auf Hover leeren Raum

sorry für mein Englisch XD

.color1:hover > div { 
 
     background-color: yellow; 
 
    } 
 
    .sub{ 
 
     display: none; 
 
     position: absolute; 
 
    height: 50px; 
 
    width: 160px; 
 
    text-align: center; 
 
    transform: skewX(-15deg); 
 
    background-color: rgba(237, 237, 237, 1); 
 
    vertical-align: middle; 
 
     margin-top: 10px; 
 
    } 
 
    .globalList:hover .sub { 
 
     display: block !important; 
 
    } 
 
    .globalList > div { 
 
    display: table-cell; 
 
    height: 50px; 
 
    width: 160px; 
 
    text-align: center; 
 
    transform: skewX(-15deg); 
 
    background-color: rgba(237, 237, 237, 1); 
 
    vertical-align: middle; 
 
    } 
 
    .globalList:hover > div:after{ 
 
    content: ''; 
 
    position: absolute; 
 
    left: 115px; 
 
    margin-left: -74px; 
 
    top: 50px; 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 40px solid transparent; 
 
    border-right: 40px solid transparent; 
 
    border-top: 10px solid rgba(157, 158, 159, 1); 
 
    clear: both; 
 
}

<html> 
 
    <body> 
 
     <ul class="MyList"> 
 
      <li class="globalList color1"> 
 
       <div>Menu1</div> 
 
       <ul class="sub"> 
 
        <li class="Sub1"><div>Sublist1</div></li> 
 
        <li class="Sub2"><div>Sublist2</div></li> 
 
       </ul> 
 
      </li> 
 
      <li> 
 
       <div>Menu2</div> 
 
       <ul> 
 
        <li></li> 
 
        <li></li> 
 
       </ul> 
 
      
 
      </li> 
 
      </ul> 
 
    </body> 
 
</html>

Quelle

2017-06-29 Faxelf

ein padding-bottom zu Ihrem .globalList hinzufügen.

wie diese:

.globalList{ 
    padding-bottom:10px; 
}

Oder besser: (Dies ist die gleiche, aber Sie müssen nicht zu jedem ersten li eine .globalList Klasse hinzufügen)

.MyList > li { 
padding-bottom: 10px; 
}

Quelle

2017-06-29 15:16:28 Richard

Ich habe eine transparente Box mit .sub:after hinzugefügt, die Sie jetzt erlauben, ohne das Schließen des Untermenüs die Maus sein zwischen Haupt- und Untermenüs zu lassen. Ich nehme an, dass du das mit "white space" meinst.

.color1:hover>div { 
 
    background-color: yellow; 
 
} 
 

 
.sub { 
 
    display: none; 
 
    position: absolute; 
 
    height: 50px; 
 
    width: 160px; 
 
    text-align: center; 
 
    transform: skewX(-15deg); 
 
    background-color: rgba(237, 237, 237, 1); 
 
    vertical-align: middle; 
 
    margin-top: 10px; 
 
} 
 

 
.sub:after { 
 
    content: " "; 
 
    position: absolute; 
 
    top: 0; 
 
    left: -10px; 
 
    width: 170px; 
 
    height: 50px; 
 
    margin-top: -10px; 
 
    background-color: transparent; 
 
    transform: skewX(15deg); 
 
} 
 

 
.globalList:hover .sub { 
 
    display: block !important; 
 
} 
 

 
.globalList>div { 
 
    display: table-cell; 
 
    height: 50px; 
 
    width: 160px; 
 
    text-align: center; 
 
    transform: skewX(-15deg); 
 
    background-color: rgba(237, 237, 237, 1); 
 
    vertical-align: middle; 
 
} 
 

 
.globalList:hover>div:after { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 115px; 
 
    margin-left: -74px; 
 
    top: 50px; 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 40px solid transparent; 
 
    border-right: 40px solid transparent; 
 
    border-top: 10px solid rgba(157, 158, 159, 1); 
 
    clear: both; 
 
}

<ul class="MyList"> 
 
    <li class="globalList color1"> 
 
    <div>Menu1</div> 
 
    <ul class="sub"> 
 
     <li class="Sub1"> 
 
     <div>Sublist1</div> 
 
     </li> 
 
     <li class="Sub2"> 
 
     <div>Sublist2</div> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li> 
 
    <div>Menu2</div> 
 
    <ul> 
 
     <li></li> 
 
     <li></li> 
 
    </ul> 
 

 
    </li> 
 
</ul>

Quelle

2017-06-29 15:14:33 Gerard

Keep SubMenu Anzeige auf Hover leeren Raum

Antwort

Verwandte Themen