basti1012.bplaced.net

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. . <div class="prehelp"> <pre class="html_code"> <style> main-navigation .main-nav a:hover{} </style> </pre></div> 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. <a href="https://hessburg.de/">Hier die Site: Der Hauptmenüpunkt wird weiß unterlegt, sobald das Menü ausklappt.</a> 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

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>