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
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
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>