Im Moment habe ich eine Schaltfläche mit einem Dropdown-Menü, um zwei Schaltflächen darunter anzuzeigen. Mein Problem ist, dass es mit der Ausrichtung der anderen Tasten kollidiert, wenn das Drop-Down passiert.Schlechte Ausrichtung beim Ein- und Ausblenden von Divs im Schwebeflug
Eine Sache zu beachten ist, dass sie "Platz schaffen" müssen für die Dropdown-Menüs, wenn der Bildschirm mobil wird (weil die Tasten übereinander gestapelt sind).
Jetzt funktioniert es, wie ich im Mobile mag und ich suche nach einer Lösung für den Desktop, oder möglicherweise eine neue Lösung, die beide funktioniert.
Meine eine Wunschliste wäre ein Übergang für das Dropdown, aber meine aktuelle Lösung verwendet display: none aus zwei Gründen: weil die Schaltflächen transparent sind, kann ich nichts hinter ihnen verstecken, und in mobilen, ich kann den Raum darunter nicht bewahren, weil sie aufeinander gestapelt sind.
<style>
.wrapcenter{
text-align:center;
}
.homebox{
display:inline-block;
position:relative;
margin:25px;
border:1px;
border-style:solid;
border-color:white;
width:250px;
height:140px;
color:white;
background:rgba(255,255,255,.25);
transition: all 0.25s ease-in-out;
}
h4.homeboxtext{
position: absolute;
top: 27%;
left: 50%;
transform: translate(-50%, -50%);
}
.homebox:hover {
background:rgba(255,255,255,.4)
}
h4{
font-size: 25px;
text-transform: none;
font-family: "Abel";
line-height: 1.2em;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 400;
font-style: normal;
}
h5{
font-size: 18px;
text-transform: none;
font-family: "Abel";
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 400;
font-style: normal;
transform: translate(0%, -70%);
}
.submenu {
display: none;
margin:25px;
border:1px;
border-style:solid;
border-color:white;
width:250px;
height:50px;
color:white;
background:rgba(255,255,255,.25);
transition: all 0.25s ease-in-out;
z-index: 999;
}
.div_one:hover .submenu {
display: block;
}
.homeboxphotography_wrapper {
display:inline-block;
z-index: 1;
}
</style>
<div class="container wrapcenter">
<ul class="menu">
<li>
<a href="/professional-gallery">
<h5>Professional</h5>
</a>
</li>
<li>
<a href="/fun-gallery">
<h5>For Fun</h5>
</a>
</li>
<li>
<div id="menu1">
<h5>Travel</h5>
</div>
<ul class="submenu">
<li>
<a href="/europe-gallery">Mainland Europe</a>
</li>
<li>
<a href="/iceland-gallery">Iceland</a>
</li>
</ul>
</li>
</ul>
</div>
Vielen Dank im Voraus!
Zack
Bitte fügen Sie hier einen aussagekräftigen Code und eine Problembeschreibung hinzu. Verknüpfen Sie nicht einfach mit der Website , die behoben werden muss - andernfalls wird diese Frage an zukünftige Besucher verloren gehen, sobald das Problem gelöst ist oder wenn die Website, auf die Sie verlinken, nicht erreichbar ist. Wenn Sie ein [Minimales, vollständiges und verifizierbares Beispiel (MCVE)] (http://stackoverflow.com/help/mcve) schreiben, dass Ihr Problem demonstriert, können Sie bessere Antworten erhalten. Weitere Informationen finden Sie unter [Etwas auf meiner Website funktioniert nicht. Kann ich einfach einen Link einfügen?] (Http://meta.stackexchange.com/questions/125997/) Danke! – j08691