Menüpunkt auf dem man sich befindet farbig hinterlegen
Hallo Community ich habe mir vor kurzem ein Code für ein Menü geholt und es für mich angepasst. Jetzt möchte ich nur noch, dass der Menüpunkt auf dem man sich befindet nicht nur wenn man mit der Maus drüber geht farbig unterlegt wird sondern auch wenn man sich auf der Seite befindet, dass der Menüpunkt dann farbig unterlegt bleibt ...
Hier mein HTML Quellcode:
HTML-Code:
<div id="navi">
<nav>
<ul>
<li class = "cat1">
<a href="index.php">Home</a>
</li>
<li class = "cat2">
<a href="über uns.php">Über uns</a>
</li>
<li class = "cat3">
<a href="forum.php">Forum</a>
</li>
<li class = "cat4">
<a href="events.php">Events</a>
</li>
<li class = "cat5">
<a href="kontakt.php">Kontakt</a>
</li>
</ul>
</nav>
</div>
und hier mein CSS Code:
HTML-Code:
nav {
width: 1000px;
}
nav ul {
padding: 0%;
margin: 0%;
}
nav ul:after {
clear: both;
content: " ";
display: block;
font-size: 0;
height: 0;
visibility: hidden;
}
nav ul,nav ul li{
background-color: lightgrey;
}
nav ul li {
list-style: none;
float:left;
}
nav ul li a {
text-decoration: none;
display: block;
color: #333;
padding: 14px 34px 14px 34px;
}
nav ul li:hover > ul {
visibility: visible;
}
nav ul li ul{
display: inline;
visibility: hidden;
position: absolute;
padding:0px;
}
nav ul li ul li{
float: none;
}
nav ul li ul li a:hover{
color: #333;
}
nav ul {
padding: 0px;
margin: 0px;
box-shadow: 2px 2px 2px #dfdfdf;
-moz-box-shadow: 2px 2px 2px #dfdfdf;
-webkit-box-shadow: 2px 2px 2px #dfdfdf;
}
nav ul li {
list-style: none;
float:left;
border-right: 1px solid #dfdfdf;
}
nav ul li a {
text-decoration: none;
display: block;
color: #333;
padding: 14px 34px 14px 34px;
-webkit-transition: background 0.3s ease-out 0s;
-moz-transition: background 0.3s ease-out 0s;
-o-transition: background 0.3s ease-out 0s;
transition: background 0.3s ease-out 0s;
}
nav ul li.cat1:hover a, nav ul li.cat1:hover > ul li a {
background-color: dimgray;
}
nav ul li.cat2:hover a, nav ul li.cat2:hover > ul li a {
background-color: dimgray;
}
nav ul li.cat3:hover a, nav ul li.cat3:hover > ul li a {
background-color: dimgray;
}
nav ul li.cat4:hover a, nav ul li.cat4:hover > ul li a {
background-color: dimgray;
}
nav ul li.cat5:hover a, nav ul li.cat5:hover > ul li a {
background-color: dimgray;
}
nav ul li:hover > a {
color: #FAFAFA;
}
nav ul li ul li a {
color: #FAFAFA;
}
nav ul li ul li a:hover {
color: #333;
background-color: #FAFAFA !important;
}
Ich bedanke mich jetzt schonmal für die hoffentlich nützlichen antworten und ich denke, dass man zu meinem jetzigen Quellcode nur etwas dazu schreiben muss um das zu bekommen was ich gerne hätte. :D |
