0
Guten Tag! Wenn ich schwebe, gibt es oben einen Raum. Wenn Sie in Fiddle schauen, werden Sie sehen, dass nicht alle schweben. Es sieht nicht gut aus. Ich habe versucht, in .show-menu setzen, aber es funktioniert nicht. Was muss in meinem Code hinzugefügt oder geändert werden? Alle Hilfe wird geschätzt.Wie behebe ich die Breite des Mauszeigers meiner Navbar?
https://jsfiddle.net/view02/jfcboyw3/1/
a:hover, a:visited, a:link, a:active {
text-decoration: none;
color: white;
}
#wrap {
max-width: 100%; /* Spans the width of the page */
height: 40px;
/* margin-left:50px;
margin-right: 50px;*/
margin: 0 auto; /* Ensures there is no space between sides of the screen and the menu */
z-index: 99; /* Makes sure that your menu remains on top of other page elements */
position: relative;
background-color: #D00000;
text-align: center;
display: flex;
justify-content: center;
padding-top: 14px;
}
/*#wrap ul li:hover a:hover { background-color:black; height: 40px;
}*/
ul {
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
}
/*Create a horizontal list with spacing*/
ul li {
display: inline-block;
/* margin-left: 90px;*/
margin-top: -5px;
margin-right: 1px;
height: 100%;
}
/*Style for menu links*/
li a {
display: block;
min-width: 140px;
height: 40px;
text-align: center;
line-height: 50px;
font: bold 2.00vw Helvetica, Sans-Serif;
color: #fff;
background: #d00000;
text-decoration: none;
line-height: 20px;
}
/*Hover state for top level links*/
ul li:hover a {
background-color: black;
height: 40px;
bottom: 10px;
top: -105%;
display: block;
}
/*Style for dropdown links*/
li:hover ul a {
background: #d00000;
color: white;
height: 40px;
line-height: 40px;
}
/*Hover state for dropdown links*/
li:hover ul a:hover {
background: black;
color: #fff;
}
/*Hide dropdown links until they are needed*/
li ul {
display: none;
}
/*Make dropdown links vertical*/
li ul li {
display: block;
float: none;
}
/*Prevent text wrapping*/
li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
display: block;
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
font: bold 2.00vw Helvetica, Sans-Serif;
text-decoration: none;
color: #fff;
background: #d00000;
text-align: center;
padding-top: 10 px;
margin-top: 0;
display: none;
}
/*Hide checkbox*/
input[type=checkbox] {
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu {
display: block;
}
/*Responsive Styles*/
@media screen and (max-width : 760px) {
/*Make dropdown links appear inline*/
ul {
position: static;
display: none;
}
/*Create vertical spacing*/
li {
margin-bottom: 1px;
}
/*Make all menu links full width*/
ul li, li a {
width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
display: block;
}
}
ul li { margin-top:-1px;}<div id="wrap">
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li class="selected"><a href="home.html">Home</a></li>
<li>
<a href="#">Cars</a>
<ul class="hidden">
<li><a href="cars.html">Categories</a></li>
<li><a href="faqs.html">FAQs</a></li>
</ul>
</li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
Vielen Dank! Glaubst du, es ist eine gute Idee, wenn die Farbe meines Schwebefluges ist: ul li: schweben a { background-color: \t # A9A9A9; \t Farbe: #fff ;. Wenn es ausgewählt wurde: .selected li, .selected a {min-width: 140px; Rand rechts: 1px; Farbe: # 686868; Hintergrundfarbe: # ffdbc3; ? Also, ich habe zwei Farben verwendet. Pfirsichhauch, wenn es ausgewählt ist, dann dunkelgrau, wenn es für Hover ist. – view