#navigation {
clear: both;
float: left;
width: 100%;
background-image: url("../img/nav-border-oben.png");
background-position: 0px 0px;
background-repeat: repeat-x;
position: relative;
background-color: #313131;
}
#navigation ul {
float: left;
width: 100%;
overflow: hidden;
background-image: url("../img/navi-sub.png");
background-position: 0px bottom;
background-repeat: repeat-x;
}
#navigation ul li {
float: left;
}
#navigation ul li a {
vertical-align: middle;
display: block;
padding: 1.6em 1.8em 1.5em 1.8em;
font-weight: 700;
color: #fff;
text-transform: uppercase;
background-image: url("../img/nav-punkt-border-oben.png");
background-position: 0px 6px;
background-repeat: repeat-x;
}
#navigation ul li.aktiv {
background-image: url("../img/navi-sub-pfeil.png");
background-position: center bottom;
background-repeat: repeat-x;
padding-bottom: 10px;
}
#navigation ul li.aktiv a {
border-color: #6392a9;
background-position: 0px 0px;
border-top: 6px solid #517C8F;
padding: 1.2em 1.8em 1.5em 1.8em;
background-color: #535353;
}
#navigation ul li a:hover,
#navigation ul li a:focus,
#navigation ul li a:active {
padding: 1.15em 1.8em 1.5em 1.8em;
background-color: #535353;
border-top: 6px solid #517C8F;
background-position: 0px 0px;
}
#navigation ul li.aktiv a:hover,
#navigation ul li.aktiv a:focus,
#navigation ul li.aktiv a:active {
padding: 1.2em 1.8em 1.5em 1.8em;
background-color: #535353;
border-top: 6px solid #ddd;
background-position: 0px 0px;
}
Dieses Beispiel stammt aus dem Buch Barrierefreiheit verstehen und umsetzen.