Ich habe eine Navigationsleiste, die ich Dropdown-Menüs verwenden kann, aber die w3schools eins, das ich gefundene Elemente in der gleichen Zeile + Hover Hintergrundfarbe ändern ist zu breit. Könnte jemand es sich ansehen und mir sagen, was schief läuft?Dropdown-Elemente in der gleichen Zeile + Hover-Effekt geht zu weit nach rechts
https://fiddle.jshell.net/e7zLx39u/
.nav-item-holder a {display: inline}, wo eigentlich Sie dies durch display: block zu wollen;.nav-item-holder .dropdown-content a { padding-left: 0; padding-right: 0; } hinzufügen, um sicherzustellen, dass Sie keine Sprünge der Elemente haben, wenn Sie sie schweben.Hier ist eine funktionierende Version des Codes, fix (mit meinem 2-Vorschlag)
.nav-wrapper {
\t position: fixed;
\t color:#151618;
\t background-color:#151618;
\t width:100%;
\t border-bottom:4px solid #0bb1ff;
\t height:50px;
\t z-index:1;
\t margin-top:0 auto;
}
.nav-logo {
\t width:45px;
\t position:absolute;
\t z-index:2;
\t top:5%;
} \t
.nav-item {
\t float:left;
}
.dropbtn {
background-color: #151618;
display: inline-block;
height:100%;
\t padding-left:10px;
\t padding-right:10px;
\t color:#0bb1ff;
\t text-decoration: none;
border: none;
cursor: pointer;
}
.dropbtn:hover {
\t color:#fff;
\t height:100%;
\t background-color:#0bb1ff;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
background-color: #151618;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #151618;
border:3px solid #0bb1ff;
text-align: center;
width:180px;
}
/* Links inside the dropdown */
.dropdown-content a {
color: #0bb1ff;
text-decoration: none;
display: block;
padding: 0;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #0bb1ff; color:#fff; width:100%;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: inline-block;
clear:both;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: #0bb1ff;
}
.dropdown:hover .dropbtn {
\t color:#fff;
}
.nav-item-holder {
\t z-index:3;
\t color:#151618;
\t font:14px verdana;
\t line-height:50px;
\t left:50px;
\t position:absolute;
}
.nav-item-holder a {
\t display: block;
\t padding-left:10px;
\t padding-right:10px;
\t color:#0bb1ff;
\t text-decoration: none;
}
.nav-item-holder a:hover {
\t position:relative;
\t color:#fff;
\t text-decoration: none;
\t background-color:#0bb1ff;
\t height:100%;
}
.nav-item-holder .dropdown-content a {
padding-left: 0;
padding-right: 0;
}
.active {
\t position:relative;
\t color:#fff;
\t text-decoration: none;
\t background-color:#0bb1ff;
\t height:100%;
}
.user-image {
\t width: 30px;
\t height: 30px;
\t position:absolute;
\t background-size: cover;
\t background-repeat: no-repeat;
\t background-position: center center;
\t -webkit-border-radius: 99em;
\t -moz-border-radius: 99em;
\t border-radius: 99em;
\t border: 2px solid #0bb1ff;
\t top:8px;
\t right:30px;
}
.nav-user {
\t line-height: 50px;
\t color:#fff;
\t position:absolute;
\t right:0;
}
.nav-user span {
\t display:inline-block;
\t position: absolute;
\t right:70px;
}
.nav-user-drop {
\t position:absolute;
\t display:none;
}
.nav-user:hover .nav-user-drop {
\t display:block;
}
.user-drop {
\t padding:5px;
\t text-align: center;
\t background-color:#151618;
\t color:#0bb1ff;
}<div class="nav-wrapper">
<div class="nav-content">
<a class="nav-logo" href="/"><img src="/assets/images/templates/volcan.png" class="nav-logo"/></a>
<div class="nav-item-holder">
<div class="nav-item"><a href="" >Forum</a></div>
<div class="nav-item"><a href="" >Article</a></div>
<div class="dropdown">
<div class="dropbtn">Discover</div>
<div class="dropdown-content">
<a href="#">Top</a>
<a href="#">Recent</a>
<a href="#">Verified</a>
</div>
</div>
</div>
<form>
<!--Gone add search bar-->
</form>
</div>
<div class="nav-user-drop">
<a href="" class="user-drop">Profile</a>
<a href="" class="user-drop">Inbox</a>
<a href="" class="user-drop">Settings</a>
<a href="" class="user-drop">Sign Out</a>
</div>
</div>
</div>Die Unterpunkte gesetzt sind Inline-Block. Wenn Sie die folgende Zeile auskommentieren, sollte das das aussortieren, und sie werden alle untereinander gestapelt.
.nav-item-holder a {
/* display: inline-block; */
}
Nicht sicher, ob das alles abdeckt; lass es mich wissen und ich werde die Antwort erweitern.
Versuchen Sie es:
* {
box-sizing: border-box;
}
.nav-wrapper {
\t position: fixed;
\t color:#151618;
\t background-color:#151618;
\t width:100%;
\t border-bottom:4px solid #0bb1ff;
\t height:50px;
\t z-index:1;
\t margin-top:0 auto;
}
.nav-logo {
\t width:45px;
\t position:absolute;
\t z-index:2;
\t top:5%;
} \t
.nav-item {
\t float:left;
}
.dropbtn {
background-color: #151618;
display: inline-block;
height:100%;
\t padding-left:10px;
\t padding-right:10px;
\t color:#0bb1ff;
\t text-decoration: none;
border: none;
cursor: pointer;
}
.dropbtn:hover {
\t color:#fff;
\t height:100%;
\t background-color:#0bb1ff;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
background-color: #151618;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #151618;
border:3px solid #0bb1ff;
text-align: center;
width:180px;
}
/* Links inside the dropdown */
.nav-item-holder .dropdown-content a {
color: #0bb1ff;
text-decoration: none;
display: block !important;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #0bb1ff; color:#fff; width:100%;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: inline-block;
clear:both;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: #0bb1ff;
}
.dropdown:hover .dropbtn {
\t color:#fff;
}
.nav-item-holder {
\t z-index:3;
\t color:#151618;
\t font:14px verdana;
\t line-height:50px;
\t left:50px;
\t position:absolute;
}
.nav-item-holder a {
\t display: inline-block;
\t padding-left:10px;
\t padding-right:10px;
\t color:#0bb1ff;
\t text-decoration: none;
}
.nav-item-holder a:hover {
\t position:relative;
\t color:#fff;
\t text-decoration: none;
\t background-color:#0bb1ff;
\t height:100%;
}
.active {
\t position:relative;
\t color:#fff;
\t text-decoration: none;
\t background-color:#0bb1ff;
\t height:100%;
}
.user-image {
\t width: 30px;
\t height: 30px;
\t position:absolute;
\t background-size: cover;
\t background-repeat: no-repeat;
\t background-position: center center;
\t -webkit-border-radius: 99em;
\t -moz-border-radius: 99em;
\t border-radius: 99em;
\t border: 2px solid #0bb1ff;
\t top:8px;
\t right:30px;
}
.nav-user {
\t line-height: 50px;
\t color:#fff;
\t position:absolute;
\t right:0;
}
.nav-user span {
\t display:inline-block;
\t position: absolute;
\t right:70px;
}
.nav-user-drop {
\t position:absolute;
\t display:none;
}
.nav-user:hover .nav-user-drop {
\t display:block;
}
.user-drop {
\t padding:5px;
\t text-align: center;
\t background-color:#151618;
\t color:#0bb1ff;
}<div class="nav-wrapper">
<div class="nav-content">
<a class="nav-logo" href="/"><img src="/assets/images/templates/volcan.png" class="nav-logo"/></a>
<div class="nav-item-holder">
<div class="nav-item"><a href="" >Forum</a></div>
<div class="nav-item"><a href="" >Article</a></div>
<div class="dropdown">
<div class="dropbtn">Discover</div>
<div class="dropdown-content">
<a href="#">Top</a>
<a href="#">Recent</a>
<a href="#">Verified</a>
</div>
</div>
</div>
<form>
<!--Gone add search bar-->
</form>
</div>
<div class="nav-user-drop">
<a href="" class="user-drop">Profile</a>
<a href="" class="user-drop">Inbox</a>
<a href="" class="user-drop">Settings</a>
<a href="" class="user-drop">Sign Out</a>
</div>
</div>
</div>die Breite von Hover-Zustand entfernen und Anzeige an die Klasse subtrahieren auch padding Sie ihr die Probe
gab.dropdown-content a {
color: #0bb1ff;
text-decoration: none;
display: block;
width: calc(100% - 20px);
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #0bb1ff; color:#fff;}
First off, Ich weiß nicht, ob das ein Duplikat ist, also setze einfach den Link here
Als nächstes änderte ich die Breite der Box von 180px auf 80px, und das Problem wurde gelöst. Aber im Allgemeinen möchten Sie möglicherweise .nav-holder-item {display : inline; } zu { display: block; } in der CSS ändern.
Hoffe, das hilft.