Gibt es eine Möglichkeit, ein Dropdown-Menü unter der ausgewählten Schaltfläche im Navigationsmenü zu positionieren?CSS

CSS verstehen
Guest
 Gibt es eine Möglichkeit, ein Dropdown-Menü unter der ausgewählten Schaltfläche im Navigationsmenü zu positionieren?

Post by Guest »

Anfänger in CSS, ich habe kürzlich ein Navigationsmenü erstellt und möchte jetzt einer der Schaltflächen ein Dropdown-Menü hinzufügen. Es scheint jedoch, dass das Dropdown-Menü falsch ausgerichtet ist und ich nicht sicher bin, was ich tun kann. Ich möchte, dass es sich unter der von mir ausgewählten Schaltfläche befindet.
Das Navigationsmenü
Das Dropdown-Menü (falsch ausgerichtet)
HTML

Code: Select all

[list]
[*]Главная
[*]Проекты
[*]DanganAwful
[*]Неоморфизм
[*]Стилизация
[*]CSS
[/list]
CSS (.neu-button-Klasse ist der Button-Stil, nicht relevant, aber nur für den Fall enthalten)

Code: Select all

.neu-button {
border: none;
background-color: #f0f0f3; /* 1 white */
height:77px;
width:280px;
filter: drop-shadow(-2px -2px 7px rgba(255,255,255,0.75)) drop-shadow(4px 4px 15px rgba(0,0,0,0.125));
border-radius: 16px;
text-align: center;
font-size: 1.5em;
color: #C590EF; /* 400 violet */
transition: 0.3s;
margin-left: 10px;
user-select: none;
overflow: hidden;
}
.neu-button:hover {
filter: drop-shadow(-1px -1px 5px rgba(255,255,255,1)) drop-shadow(2px 2px 10px rgba(0,0,0,0.5));
}
.neu-navmenu {
display: block;
justify-content: center;
align-items: center;
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
position: relative;
}
.neu-navmenu li {
display: inline-flex;
justify-content: center;
align-items: center;
margin: 10px;
width: 170px;
}
.neu-button + .dropdown {
display: none;
position: absolute;
}
.neu-button:hover + .dropdown {
display: block;
}
Ich habe versucht, den Navigationsmenücontainer relativ zu machen, aber es hat nicht funktioniert. Ich habe es geschafft, es mit JavaScript und absoluter Positionierung zum Laufen zu bringen, aber das Ziel ist, es mit reinem CSS zu erstellen.

Quick Reply

Change Text Case: 
   
  • Similar Topics
    Replies
    Views
    Last post