Erledigt: Newbee: Wie finde ich Pseudoklasse heraus?
Hallo Leute,
ich habe unter Wordpress ein Thema angepasst. Weiß aber nicht, wie ich mit dem Inspector einen Hauptmenüpunkt untersuchen kann, wenn der sich beim Hovern verändert. .
Es geht darum, dass ich nicht weiß, wie die Pseudoklasse heißt, die die Eigenschaften des Hauptmenüpunktes bei aufgeklappten Pulldown-Menü definiert.
Sorry, ist wirklich ne Noob-Frage.
Hier die Site: Der Hauptmenüpunkt wird weiß unterlegt, sobald das Menü ausklappt.
Und bitte nichts zu der Site sagen, ist noch in der Entwicklung und daher sind da noch einige geschmacklose Effekte aktiv. :wacko:
Auch richtig: Habe ich noch nicht für Webkit angepasst, was aber nichts am Fehler ändern würde.
Danke im Voraus
Gruß
Michael
Der hier verwendete Code
<style>
*{
margin:0;
padding:0;
}
body {
background: #212121;
font-size:22px;
line-height: 32px;
color: #ffffff;
word-wrap:break-word !important;
font-family: 'Open Sans', sans-serif;
}
#container {
margin: 0 auto;
}
#container nav {
margin: 50px 0;
width:100%;
background-color: white;
}
#container nav > ul {
list-style: none;
display:flex;
}
#container nav > ul > li {
flex:1;
background-color:white;
}
#container nav a {
display:block;
padding:0 10px;
color:black;
font-size:20px;
line-height: 60px;
text-decoration:none;
}
#container nav a:hover {
background-color:#0d9baa;
}
#container nav ul li ul {
display: none;
position: absolute;
width:25%;
}
#container nav ul li:hover > ul {
display:flex;
flex-direction:column;
list-style:none;
flex:1;
background:yellow;
}
#container nav ul ul li {
width:100%;
display:block;
list-style:none;
}
/* menue unten */
#container1 {
margin: 0 auto;
}
#container1 nav {
margin: 50px 0;
width:100%;
background-color: white;
}
#container1 nav > ul {
list-style: none;
display:flex;
}
#container1 nav > ul > li {
flex:1;
background-color:white;
}
#container1 nav a {
display:block;
padding:0 10px;
color:black;
font-size:20px;
line-height: 60px;
text-decoration:none;
}
#container1 nav li:hover {
background-color:#0d9baa;
}
#container1 nav ul li ul {
display: none;
position: absolute;
width:25%;
}
#container1 nav ul li:hover > ul {
display:flex;
flex-direction:column;
list-style:none;
flex:1;
background:yellow;
}
#container1 nav ul ul li {
width:100%;
display:block;
list-style:none;
}
</style>
<h1>Das ist dein Menü</h1>
<div id="container">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">WordPress</a>
<!-- First Tier Drop Down -->
<ul>
<li><a href="#">Themes</a></li>
<li><a href="#">Plugins</a></li>
<li><a href="#">Tutorials</a></li>
</ul>
</li>
<li><a href="#">Web Design</a>
<!-- First Tier Drop Down -->
<ul>
<li><a href="#">Resources</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Tutorials</a>
</li>
</ul>
</li>
<li><a href="#">Graphic Design</a></li>
</ul>
</nav>
</div>
<h1>und so möchtest du es haben ?</h1>
<div id="container1">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">WordPress</a>
<!-- First Tier Drop Down -->
<ul>
<li><a href="#">Themes</a></li>
<li><a href="#">Plugins</a></li>
<li><a href="#">Tutorials</a></li>
</ul>
</li>
<li><a href="#">Web Design</a>
<!-- First Tier Drop Down -->
<ul>
<li><a href="#">Resources</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Tutorials</a>
</li>
</ul>
</li>
<li><a href="#">Graphic Design</a></li>
</ul>
</nav>
</div>