Ich arbeite an einem Top-Navigationsmenü, das auch Drop-Down-Inhalte enthält. Im Moment wird der gesamte Stil, den ich für das Menü verwende, auf den Inhalt im Dropdown-Menü angewendet, obwohl ich dafür einen eigenen Stil erstellt habe. Ich glaube, es besteht ein Konflikt darin, wie die beiden Klassen, die ich für den Dropdown-Inhalt zugewiesen habe, miteinander interagieren, aber die Wege, die ich bisher versucht habe, waren nicht erfolgreich.CSS-Dropdown-Menü mit falschem Stil
/*Standard text formatting*/
body {
font-family: "Lucida Console";
}
/*Main Navigation for website*/
ul.MainNav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li.MainNavItem {
float: left;
}
li.MainNavItem.right {
float: right;
}
/*Causing problems with items in dropdown; color is applied everywhere*/
li.MainNavItem a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li.MainNavItem a.active {
background-color: #4CAF50;
}
li.MainNavItem a:hover:not(.active),
.DropDown:hover {
background-color: #111;
}
/*Makes Main Navigation responsive*/
@media screen and (max-width: 800px) {
ul.MainNav li.MainNavItem.right,
ul.MainNav li.MainNavItem {
float: none;
}
}
/*Dropdown for Main Navigation*/
li.MainNavItem.DropDown {
display: inline-block;
}
/*Color style that should be used*/
.DropDown-Content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.DropDown-Content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.DropDown-Content a:hover {
background-color: #f1f1f1;
}
.DropDown:hover .DropDown-Content {
display: block;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="StyleSheet.css">
<title></title>
</head>
<body>
<ul class="MainNav">
<li class="MainNavItem"><a class="active" href="Index.html">Home</a>
</li>
<li class="MainNavItem DropDown"><a href="News.html">News</a>
<div class="DropDown-Content">
<a href="#CurrentProjects">Current Projects</a>
<a href="#Events">Events</a>
</div>
</li>
<li class="MainNavItem"><a href="Contact.html">Contact</a>
</li>
<li class="MainNavItem right"><a href="About.html">About</a>
</li>
</ul>
</body>
</html>Ich bin mir auch bewusst, dass dies nicht richtig angezeigt wird, wenn die Bildschirmgröße für mobile schrumpft, aber ich werde auch weiterhin auf die separat zu arbeiten. Im Moment konzentriere ich mich darauf, den Stil zum Laufen zu bringen, bevor ich versuche, die Reaktionsfähigkeit des Menüs zu korrigieren.
in Ihrem Stylesheet haben Sie diese Notation: 'element.classname' (zB' li.MainNavItem {...} ') ... in Ihrem HTML haben Sie diese Notation:' '.... ... so ist also Ihre Stylesheet-Notation unnötig ... Sie brauchen nicht den' element.classname' ... Sie brauchen nur '.classname' ... –
dsdsdsdsd
auch eine gute Idee, ein Link zu einem [selector reference] (http://www.w3schools.com/cssref/css_selectors.asp) – dsdsdsdsd
Außerdem benötigen Sie Kommas, wo Sie mehrere Selektoren in Ihrem Stylesheet haben, wie zum Beispiel '.DropDown: hover .DropDown- Inhalt '----> ändere es in' .DropDown: Hover, .DropDown-Content '... kann es mehr geben ... – dsdsdsdsd