Inline-Untermenü mit Hover

Dies ist mein aktuelles Menü:Inline-Untermenü mit Hover

Und hier, was ich will:

Erstes Untermenü ist inline, und das Kind ist Dropdown-Menü.

Ich versuche, die ul li adisplay zu inline-block zu ändern, scheint aber wie es überhaupt nicht funktioniert. Wie nehme ich an, um das Untermenü zu bewegen inline, und das Kind des Untermenüs Drop-Down?

Vielen Dank.

#info { 
 
top: 8%; 
 
color: #fff; 
 
height: auto; 
 
font-family: arial; 
 
left: 0px; 
 
position: absolute; 
 
width: 72px; 
 
z-index: 40; 
 
border-radius: 4px; 
 
background: dimgrey; 
 

 
} 
 

 
nav ul ul { 
 
display: none; 
 
} 
 
nav ul li:hover > ul { 
 
display: block; 
 
} 
 
nav ul { 
 
background: #efefef; 
 
padding: 0; 
 
list-style: none; 
 
position: relative; 
 
display: inline-table; 
 
} 
 
nav ul:after { 
 
content: ""; 
 
clear: both; 
 
display: inline; 
 
} 
 
nav ul li { 
 
position:relative; 
 
width:70px; 
 
} 
 
nav ul li:hover { 
 
background: #4b4b4b; 
 
} 
 
nav ul li:hover a { 
 
color: #fff; 
 
} 
 
nav ul li:hover button{ 
 
color: #fff; 
 
} 
 
nav ul li a { 
 
display: block; 
 
padding: 12px 20px; 
 
color: #757575; 
 
text-decoration: none; 
 
} 
 
nav ul li button{ 
 
display: block; 
 
padding: 12px 25px; 
 
color: #757575; 
 
text-decoration: none; 
 
} 
 
nav ul ul { 
 
background: #5f6975; 
 
border-radius: 0px; 
 
padding: 0; 
 
position: absolute; 
 
top:0; 
 
left:100%; 
 
} 
 
nav ul ul li { 
 
float: none; 
 
position: relative; 
 
} 
 
nav ul ul li a { 
 
padding: 12px 25px; 
 
color: #fff; 
 
} 
 
nav ul ul li button{ 
 
padding: 12px 25px; 
 
color: #fff; 
 
height: 50px; width: 100px; margin-bottom: 2px; font-size: 18px; 
 
} 
 
nav ul ul li a:hover { 
 
background: #4b4b4b; 
 
} 
 

 
nav ul ul ul { 
 
position: absolute; 
 
left: 100%; 
 
top:0; 
 
} 
 

 
.menu-container {padding: 19px 0; width: 70px; float: left;} 
 
.clear {clear: both;} 
 
ul{list-style:none; 
 
border:0;outline:none;margin:0;padding:0;} 
 
/* Vertical Mega Menu Styles */ 
 
.mega-menu{ 
 
font: bold 13px Arial, sans-serif; 
 
line-height: 16px; 
 
background: #333; 
 
border-left: 1px solid #1B1B1B; 
 
position: relative; /* Required */ 
 
} 
 
.mega-menu li a { 
 
display: block; 
 
color: #fff; 
 
padding: 12px 20px 12px 20px; 
 
text-shadow: 1px 1px 1px #000; 
 
text-decoration: none; 
 
border-top: 1px solid #555; 
 
border-bottom: 1px solid #222; 
 
border-right: 1px solid #1B1B1B; 
 
} 
 
.mega-menu li button { 
 
display: block; 
 
color: #fff; 
 
text-shadow: 1px 1px 1px #000; 
 
text-decoration: none; 
 
border-top: 1px solid #555; 
 
border-bottom: 1px solid #222; 
 
border-right: 1px solid #1B1B1B; 
 
} 
 
.mega-menu li a:hover, .mega-menu li.mega-hover a { 
 
background: #4b4b4b; 
 
color: #fff; 
 
border-right: 1px solid #4b4b4b; 
 
}

<div id="info"> 
 
    \t <!-- 
 
     <li><button id="FreehandPolyline">Freehand Polyline</button></li> 
 
     <li><button id="Triangle">Triangle</button></li> 
 
     <li><button id="Extent">Rectangle</button></li> 
 
     <li><button id="Circle">Circle</button></li> 
 
     <li><button id="Ellipse">Ellipse</button></li> 
 
     <li><button id="Polygon">Polygon</button></li> 
 
     <li><button id="FreehandPolygon">Freehand Polygon</button></li> --> 
 
\t \t <!-- <div id="menu_plotting" >Menu plotting</div> --> 
 
\t \t <nav class="menu-container clear"> 
 
\t \t \t <ul id="mega-1" class="mega-menu"> 
 
\t \t \t 
 
         <li> 
 
         \t <a title="Plotting Toolbar"><img src="assets/icon/pencil.png" width="30" height="30"></a> 
 
         \t <ul> 
 
         \t \t <li><a title="Arrows"><img src="assets/icon/arrow.png" width="30" height="30"></a> 
 
           <ul> 
 
           <li> 
 
            <a title="Straight Arrow" onClick="urlicon('arrow','')" style="cursor: pointer;"> 
 
            <img src="assets/icon/arrow0.png" width="30" height="30"></a> 
 

 
            <!-- <a id="a" class="btn btn-info" onclick="arrow_('arrow')" style="cursor: pointer;"> 
 
            <img src="icon/arrow.png" width="30" height="30"></a> --> 
 
           </li> 
 
           <li> 
 
            <a title="Down Arrow" onClick="urlicon('arrow_l','')" style="cursor: pointer;"> 
 
            <img src="assets/icon/bawah.png" width="30" height="30"></a> 
 
           </li> 
 
           <li> 
 
            <a title="Up Arrow" onClick="urlicon('arrow_a','')" style="cursor: pointer;"> <img src="assets/icon/atas.png" width="30" height="30"></a> 
 
           </li> 
 
           </ul> 
 
          \t \t </li> 
 
          \t \t <li><a title="Polyline"><img src="assets/icon/polyline-48.png" width="30" height="30"></a> 
 
          \t \t <ul> 
 
          \t \t \t <li><a title="Polyline" id="Polyline" onClick="urlicon('polyline','')"><img src="assets/icon/polyline.png" width="30" height="30"> 
 
\t \t       \t \t </a> 
 
\t \t      \t \t </li> 
 
\t \t      \t \t <li><a title="Freehand Polyline" id="FreehandPolyline"><img src="assets/icon/freepolyline.png" width="30" height="30"></a></li> 
 
          \t \t </ul> 
 
\t \t       
 
\t \t       </li> 
 
\t \t       <li><a title="Polygon"><img src="assets/icon/polygon.png" width="30" height="30"></a> 
 
\t \t       \t <ul> 
 
\t \t \t \t       <li><a title="Polygon" id="Polygon" onClick="urlicon('polygon','')"> 
 
\t \t \t \t        <img src="assets/icon/polygon.png" width="30" height="30"> 
 
\t \t \t \t       </a> 
 
\t \t \t      \t \t </li> 
 
\t \t \t      \t \t <li><a title="Triangle" id="Triangle"><img src="assets/icon/triangle.png" width="30" height="30"></a></li> 
 
\t \t \t \t \t \t \t \t \t  <li><a title="Rectangle" id="Extent"><img src="assets/icon/rectangle.png" width="30" height="30"></a></li> 
 
\t \t \t \t \t \t \t \t \t  <li><a title="Circle" id="Circle"><img src="assets/icon/circle.png" width="30" height="30"></a></li> 
 
\t \t \t \t \t \t \t \t \t  <li><a title="Ellipse" id="Ellipse"><img src="assets/icon/ellips.png" width="30" height="30"></a></li> 
 
\t \t \t \t \t \t \t \t \t  <li><a title="Freehand Polygon" id="FreehandPolygon"><img src="assets/icon/freepolygon.png" width="30" height="30"></a></li> 
 
\t \t \t       </ul> 
 
\t \t       </li> 
 
\t \t       <li> 
 
\t \t \t \t \t \t \t \t \t <a title="Text" onClick="select_text()"> <img src="assets/icon/font.png" alt="Text" width="30" height="30"> </a> 
 
\t \t \t \t \t \t \t \t </li> 
 
\t \t \t \t \t \t \t \t 
 
         \t </ul> 
 
         </li> 
 
         <li><a title="Radar"><img src="assets/icon/radar.png" width="30" height="30"></a></li> 
 
         <li><a title="Manuver"><img src="assets/icon/airplane.png" width="30" height="30"></a></li> 
 
          
 
         
 
      <!-- ASOPS --> 
 
     <?php } if ($list['asisten']==1 || $list['asisten']==6) {?> 
 
\t \t \t <li> 
 
\t \t \t \t <a title="Obstacle" onClick="select_obst()"><img src="assets/icon/obstacle.png" width="30" height="30"></a> 
 
\t \t \t </li> 
 
\t \t \t <li> 
 
\t \t \t \t <a title="Strength" onClick="select_kekuatan()"><img src="assets/icon/streng.png" width="30" height="30"></a> 
 
\t \t \t </li> 
 
\t \t \t <li> 
 
\t \t \t \t <a title="Unit" onClick="select_unit()"><img src="assets/icon/icons8-Org Unit-48.png" width="30" height="30"></a> 
 
\t \t \t </li> 
 
\t \t \t <li> 
 
\t \t \t \t <a title="Situation" onClick="select_situasi()"><img src="assets/icon/warning.png" width="30" height="30"></a> 
 
\t \t \t </li> 
 
\t \t \t \t 
 
\t \t \t \t <?php if($list['asisten']==6 && $_SESSION['menu_'] == "menu"){ ?> 
 
\t \t \t \t <script type="text/javascript"> 
 
\t \t \t \t \t document.getElementById("info3").style.display = "block"; 
 
\t \t \t \t </script> 
 
\t \t \t \t <?php 
 
\t \t \t \t \t } 
 
\t \t \t \t } 
 
\t \t \t \t } ?> 
 
\t \t \t </ul> 
 
\t \t </nav> 
 
\t \t <div style="font-size: 13px; margin-left: -20px;" id="nm_scen"><?php echo $_SESSION['scen1']; ?></div> 
 

 
    </div>

Quelle

2017-10-04 Putri Dewi Purnamasari

Hier stelle ich die https://jsfiddle.net/qw8vpsbb/1/ –

Bitte geben Sie eine [MCVE] – ncardeli

Ich schlage vor, Sie stark den Link zu der Geige auf die Frage hinzuzufügen, nicht die Kommentare. – ncardeli

Sie sind fast da. Sie müssen eine feste Breite für das innere UL angeben, da es standardmäßig 100% der Breite des zugehörigen übergeordneten Vorfahren hat und diese Breite nicht ausreicht, um mehr als ein Element pro Zeile in der zweiten Menüebene zu haben.

nav>ul>li>ul { 
    width: 291px 
}

Hoffe, das hilft.

#info { 
 
    top: 8%; 
 
    color: #fff; 
 
    height: auto; 
 
    font-family: arial; 
 
    left: 0px; 
 
    position: absolute; 
 
    width: 72px; 
 
    z-index: 40; 
 
    border-radius: 4px; 
 
    background: dimgrey; 
 
} 
 

 
nav ul ul { 
 
    display: none; 
 
} 
 

 
nav ul li:hover>ul { 
 
    display: block; 
 
} 
 

 
nav ul { 
 
    background: #efefef; 
 
    padding: 0; 
 
    list-style: none; 
 
    position: relative; 
 
    display: inline-table; 
 
} 
 

 
nav ul:after { 
 
    content: ""; 
 
    clear: both; 
 
    display: inline; 
 
} 
 

 
nav ul li { 
 
    position: relative; 
 
    width: 70px; 
 
} 
 

 
nav ul li:hover { 
 
    background: #4b4b4b; 
 
} 
 

 
nav ul li:hover a { 
 
    color: #fff; 
 
} 
 

 
nav ul li:hover button { 
 
    color: #fff; 
 
} 
 

 
nav ul li a { 
 
    display: block; 
 
    padding: 12px 20px; 
 
    color: #757575; 
 
    text-decoration: none; 
 
} 
 

 
nav ul li button { 
 
    display: block; 
 
    padding: 12px 25px; 
 
    color: #757575; 
 
    text-decoration: none; 
 
} 
 

 
nav ul ul { 
 
    background: #5f6975; 
 
    border-radius: 0px; 
 
    padding: 0; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 100%; 
 
} 
 

 
nav ul ul li { 
 
    float: none; 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
nav ul ul li a { 
 
    padding: 12px 25px; 
 
    color: #fff; 
 
} 
 

 
nav ul ul li button { 
 
    padding: 12px 25px; 
 
    color: #fff; 
 
    height: 50px; 
 
    width: 100px; 
 
    margin-bottom: 2px; 
 
    font-size: 18px; 
 
} 
 

 
nav ul ul li a:hover { 
 
    background: #4b4b4b; 
 
} 
 

 
nav ul ul ul { 
 
    position: absolute; 
 
    left: 100%; 
 
    top: 0; 
 
} 
 

 
nav>ul>li>ul>li>ul { 
 
    top: 100%; 
 
    left: 0; 
 
} 
 

 
nav>ul>li>ul { 
 
    width: 291px 
 
} 
 

 
.menu-container { 
 
    padding: 19px 0; 
 
    width: 70px; 
 
    float: left; 
 
} 
 

 
.clear { 
 
    clear: both; 
 
} 
 

 
ul { 
 
    list-style: none; 
 
    border: 0; 
 
    outline: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 

 
/* Vertical Mega Menu Styles */ 
 

 
.mega-menu { 
 
    font: bold 13px Arial, sans-serif; 
 
    line-height: 16px; 
 
    background: #333; 
 
    border-left: 1px solid #1B1B1B; 
 
    position: relative; 
 
    /* Required */ 
 
} 
 

 
.mega-menu li a { 
 
    display: block; 
 
    color: #fff; 
 
    padding: 12px 20px 12px 20px; 
 
    text-shadow: 1px 1px 1px #000; 
 
    text-decoration: none; 
 
    border-top: 1px solid #555; 
 
    border-bottom: 1px solid #222; 
 
    border-right: 1px solid #1B1B1B; 
 
} 
 

 
.mega-menu li button { 
 
    display: block; 
 
    color: #fff; 
 
    text-shadow: 1px 1px 1px #000; 
 
    text-decoration: none; 
 
    border-top: 1px solid #555; 
 
    border-bottom: 1px solid #222; 
 
    border-right: 1px solid #1B1B1B; 
 
} 
 

 
.mega-menu li a:hover, 
 
.mega-menu li.mega-hover a { 
 
    background: #4b4b4b; 
 
    color: #fff; 
 
    border-right: 1px solid #4b4b4b; 
 
}

<div id="info"> 
 
    <!-- 
 
     <li><button id="FreehandPolyline">Freehand Polyline</button></li> 
 
     <li><button id="Triangle">Triangle</button></li> 
 
     <li><button id="Extent">Rectangle</button></li> 
 
     <li><button id="Circle">Circle</button></li> 
 
     <li><button id="Ellipse">Ellipse</button></li> 
 
     <li><button id="Polygon">Polygon</button></li> 
 
     <li><button id="FreehandPolygon">Freehand Polygon</button></li> --> 
 
    <!-- <div id="menu_plotting" >Menu plotting</div> --> 
 
    <nav class="menu-container clear"> 
 
    <ul id="mega-1" class="mega-menu"> 
 

 
     <li> 
 
     <a title="Plotting Toolbar"><img src="assets/icon/pencil.png" width="30" height="30"></a> 
 
     <ul> 
 
      <li> 
 
      <a title="Arrows"><img src="assets/icon/arrow.png" width="30" height="30"></a> 
 
      <ul> 
 
       <li> 
 
       <a title="Straight Arrow" onClick="urlicon('arrow','')" style="cursor: pointer;"> 
 
        <img src="assets/icon/arrow0.png" width="30" height="30"></a> 
 

 
       <!-- <a id="a" class="btn btn-info" onclick="arrow_('arrow')" style="cursor: pointer;"> 
 
            <img src="icon/arrow.png" width="30" height="30"></a> --> 
 
       </li> 
 
       <li> 
 
       <a title="Down Arrow" onClick="urlicon('arrow_l','')" style="cursor: pointer;"> 
 
        <img src="assets/icon/bawah.png" width="30" height="30"></a> 
 
       </li> 
 
       <li> 
 
       <a title="Up Arrow" onClick="urlicon('arrow_a','')" style="cursor: pointer;"> <img src="assets/icon/atas.png" width="30" height="30"></a> 
 
       </li> 
 
      </ul> 
 
      </li> 
 
      <li> 
 
      <a title="Polyline"><img src="assets/icon/polyline-48.png" width="30" height="30"></a> 
 
      <ul> 
 
       <li> 
 
       <a title="Polyline" id="Polyline" onClick="urlicon('polyline','')"><img src="assets/icon/polyline.png" width="30" height="30"> 
 
       </a> 
 
       </li> 
 
       <li> 
 
       <a title="Freehand Polyline" id="FreehandPolyline"><img src="assets/icon/freepolyline.png" width="30" height="30"></a> 
 
       </li> 
 
      </ul> 
 

 
      </li> 
 
      <li> 
 
      <a title="Polygon"><img src="assets/icon/polygon.png" width="30" height="30"></a> 
 
      <ul> 
 
       <li> 
 
       <a title="Polygon" id="Polygon" onClick="urlicon('polygon','')"> 
 
        <img src="assets/icon/polygon.png" width="30" height="30"> 
 
       </a> 
 
       </li> 
 
       <li> 
 
       <a title="Triangle" id="Triangle"><img src="assets/icon/triangle.png" width="30" height="30"></a> 
 
       </li> 
 
       <li> 
 
       <a title="Rectangle" id="Extent"><img src="assets/icon/rectangle.png" width="30" height="30"></a> 
 
       </li> 
 
       <li> 
 
       <a title="Circle" id="Circle"><img src="assets/icon/circle.png" width="30" height="30"></a> 
 
       </li> 
 
       <li> 
 
       <a title="Ellipse" id="Ellipse"><img src="assets/icon/ellips.png" width="30" height="30"></a> 
 
       </li> 
 
       <li> 
 
       <a title="Freehand Polygon" id="FreehandPolygon"><img src="assets/icon/freepolygon.png" width="30" height="30"></a> 
 
       </li> 
 
      </ul> 
 
      </li> 
 
      <li> 
 
      <a title="Text" onClick="select_text()"> <img src="assets/icon/font.png" alt="Text" width="30" height="30"> </a> 
 
      </li> 
 

 
     </ul> 
 
     </li> 
 
     <li> 
 
     <a title="Radar"><img src="assets/icon/radar.png" width="30" height="30"></a> 
 
     </li> 
 
     <li> 
 
     <a title="Manuver"><img src="assets/icon/airplane.png" width="30" height="30"></a> 
 
     </li> 
 

 

 
     <!-- ASOPS --> 
 
     <?php } if ($list['asisten']==1 || $list['asisten']==6) {?> 
 
     <li> 
 
     <a title="Obstacle" onClick="select_obst()"><img src="assets/icon/obstacle.png" width="30" height="30"></a> 
 
     </li> 
 
     <li> 
 
     <a title="Strength" onClick="select_kekuatan()"><img src="assets/icon/streng.png" width="30" height="30"></a> 
 
     </li> 
 
     <li> 
 
     <a title="Unit" onClick="select_unit()"><img src="assets/icon/icons8-Org Unit-48.png" width="30" height="30"></a> 
 
     </li> 
 
     <li> 
 
     <a title="Situation" onClick="select_situasi()"><img src="assets/icon/warning.png" width="30" height="30"></a> 
 
     </li> 
 

 
     <?php if($list['asisten']==6 && $_SESSION['menu_'] == "menu"){ ?> 
 
     <script type="text/javascript"> 
 
     document.getElementById("info3").style.display = "block"; 
 
     </script> 
 
     <?php 
 
\t \t \t \t \t } 
 
\t \t \t \t } 
 
\t \t \t \t } ?> 
 
    </ul> 
 
    </nav> 
 
    <div style="font-size: 13px; margin-left: -20px;" id="nm_scen"> 
 
    <?php echo $_SESSION['scen1']; ?> 
 
    </div> 
 

 
</div>

Quelle

2017-10-04 02:52:19 ncardeli

Oh mein Gott, danke! Es ist sehr hilfreich! Ich werde bald abstimmen, wenn mein Ruf genug ist: D –

Inline-Untermenü mit Hover

Antwort

Verwandte Themen