auf Schwebeflug Anzeige div aus der Menüleiste

Question

Ich habe eine Menüleiste auf Hover-Anzeige Untermenü, nun, das Problem ist. Ich zeige das Untermenü an, aber es verschiebt das gesamte Hauptmenü zur Seite. Ich möchte das Untermenü aus dem Hauptmenü, neben Hauptmenü i image slider

meinen HTML-Code

<div class="MenuBar"> 
<ul> 

    <li><a href="#"><img src="#"><br>text1</a></li> 
     <div id="submenu"> 
      this is a test div 
     </div> 

    <li><a href="#"><img src="#"><br>text2</a></li> 

    <li><a href="#"><img src="#"><br>text3</a></li> 
</ul> 

css

#submenu { 
    display: none; 
} 

.MenuBar ul li a:hover #submenu { 
    display: block; 
    position: relative; 
    top: 20px; 
} 

Answer 1

Ich denke, das ist das, was Sie nach. Ich habe den Listen Klassen hinzugefügt, das ID-Untermenü in die Klasse geändert und allen Listen Untermenüs hinzugefügt.

.MenuBar ul li .submenu { 
 
    display: none; 
 
} 
 

 
.MenuBar ul li.men1:hover .submenu { 
 
    display: inline-block; 
 
    position: relative; 
 
    top: 20px; 
 
} 
 
    
 
.MenuBar ul li.men2:hover .submenu { 
 
    display: inline-block; 
 
    position: relative; 
 
    top: 20px; 
 
} 
 
    
 
.MenuBar ul li.men3:hover .submenu { 
 
    display: inline-block; 
 
    position: relative; 
 
    top: 20px; 
 
}

<div class="MenuBar"> 
 
<ul> 
 

 
    <li class="men1"><a href="#">text1</a> 
 
    <div class="submenu"> 
 
      hovered 1st 
 
     </div></li> 
 

 
    <li class="men2"><a href="#">text2</a> 
 
    <div class="submenu"> 
 
      hovered 2nd 
 
     </div></li> 
 

 
    <li class="men3"><a href="#">text3</a><div class="submenu"> 
 
      hovered 3rd 
 
     </div></li> 
 
</ul>

Lassen Sie mich wissen, ob dies war, was Sie nach waren.

Answer 2

ändern Html wie diese:

<li> 
    <a href="#"><img src="#"><br>text1</a> 
    <div id="submenu"><-----------------submenu must be child li 
     this is a test div 
    </div> 
</li> 

Und Css wie folgt aus:

.MenuBar ul li a:hover + #submenu {<--------------use + selector 
    display: block; 
    position: relative;<-----Remove This 
    top: 20px;<------Remove This 
    margin-top: 20px;<----------Add This 
    margin-bottom: 10px;<-------Add This 
} 

Voll Code:

#submenu { 
 
    display: none; 
 
} 
 

 
img { 
 
    width: 20px; 
 
} 
 

 
ul { 
 
    list-style: none; 
 
} 
 

 
.MenuBar ul li a:hover + #submenu { 
 
    display: block; 
 
    margin-top: 20px; 
 
    margin-bottom: 10px; 
 

 
}

<div class="MenuBar"> 
 
<ul> 
 
    <li> 
 
    <a href="#"> 
 
     <img src="https://www.seeklogo.net/wp-content/uploads/2012/12/apple-logo-eps-logo-vector-400x400.png"><br>text1 
 
     </a> 
 
     <div id="submenu"> 
 
     this is a test div 
 
     </div> 
 
    </li> 
 
    <li> 
 
    <a href="#"> 
 
     <img src="https://www.seeklogo.net/wp-content/uploads/2012/12/apple-logo-eps-logo-vector-400x400.png"><br>text2 
 
    </a> 
 
    </li> 
 

 
    <li> 
 
    <a href="#"> 
 
     <img src="https://www.seeklogo.net/wp-content/uploads/2012/12/apple-logo-eps-logo-vector-400x400.png"><br>text3 
 
    </a> 
 
    </li> 
 
</ul> 
 
</div>

Answer 3

Sie folgende CSS für diese verwenden:

, wenn Sie das Untermenü im unteren Teil des übergeordneten Menü

.MenuBar ul li { 
    position: relative; 
} 
.MenuBar ul li:hover #submenu { 
    display: block; 
    position: absolute; 
    top: 100%; 
    left: 0px; 
} 

oder wenn Sie wollen zeigen wollen Untermenü rechts zeigen, Elternmenü

.MenuBar ul li { 
    position: relative; 
} 
.MenuBar ul li:hover #submenu { 
    display: block; 
    position: absolute; 
    top: 0; 
    left: 100%; 
} 

Answer 4

Platzieren Sie das Untermenü div außerhalb Ihrer Listen. Wenn Sie das in ein Bündel von Listenelementen werfen und mit der Anzeigeeigenschaft spielen, wirkt sich dies auf die Listenstruktur aus. Platziere das div außerhalb des Listenelements, positioniere das Untermenü div mit css, so dass es immer auf den entsprechenden Menüpunkt ausgerichtet ist und sie deinen Hover-Effekt hinzufügen.