Dritte Navigationsebene CSS
Hallo zusammen,
ich bräuchte schnell eure Hilfe. Ich habe auf meiner Hompage www.schach-wolfsberg.at im Navigationslink "Archiv" unter "2012" eine dritte Ebene "Gallerie" in der Seitenstruktur erstellt. Mein Wunsch wäre ledeglich, dass sich "Gallerie" links um etwa 20px einrückt, ansonsten kann man ja nicht erkennen, dass dies eine Unterpunkt von "2012" ist. Da ich in CSS noch nicht so sattelfest bin, ersuche ich um ein kleine Hilfestellung, das navigation.css liegt bei:
Code:
@media screen {
/* ====================================
Horizontale Navigation – Erste Ebene
==================================== */
#header .mod_navigation {
background: #f1cf74;
color: #000;
padding: 0 18px;
margin-top: 4px;
font-weight: bold;
}
#header .mod_navigation ul {
float: left;
width: auto; /* schrumpft die Liste */
margin-bottom: 0;
}
#header .mod_navigation li {
float: left;
width: auto; /* schrumpft die Listenelemente */
list-style-type: none;
border-right: 2px solid #fefce6; /* Trennstriche rechts */
margin: 0 ;
}
#header .mod_navigation li.first {
border-left: 2px solid #fefce6; /* Trennstrich am Anfang */
}
#header .mod_navigation a,
#header .mod_navigation span {
display: block;
min-width: 78px;
background-color: transparent; color: #000;
text-align: center; text-decoration: none;
padding: 8px;
}
#header .mod_navigation .active,
#header .mod_navigation .trail {
background-color:#7F6E3D; color: #fff;
}
#header .mod_navigation a:hover,
#header .mod_navigation a:focus {
background-color: #7F6E3D; color: #fff;
}
/*====================================
Horizontale Navigation - Zweite Ebene
=====================================*/
/* Möglichkeit 1: Zwei horizontale Ebenen*/
#container {
padding-top: 1.5em;
}
#header ul.level_2 {
position: absolute;
left: auto;
top: auto;
background-color: #ac1f21;
}
#header .level_2 li,
#header .level_2 li.first { border: none; }
/*Möglichkeit 2: Dropdown-Navigation */
/* Listenelemente zweite Ebene untereinander */
#header .level_2 li {
clear: both;
border-top: 1px solid #fefce6;
}
/*Zweite Ebene ausblenden*/
#header .level_2 {
position: relative;
left: -9999px;
top: -9999px;
overflow: hidden;
display: inline;
width: 0;
height: 0;
z-index: 1; /* "nach vorne", über den Inhaltsbereich */
}
/* Zweite Ebene bei Mouseover einblenden */
#header li:hover .level_2 {
left: auto;
top: auto;
overflow: auto;
display: block;
width: auto;
min-width: 78px;
height: auto;
background-color: #F1CF74;
border-top: 2px solid #fefce6;
}
#header .level_2 li a { text-align: left; }
/* ==============
Metanavigation Header
============== */
#header .mod_customnav {
position: absolute;
right: 18px;
top: -32px;
font-size: 12px;
font-weight: bold;
}
#header .mod_customnav li {
float: left;
width: auto;
list-style-type: none;
margin: 0 ;
}
#header .mod_customnav a,
#header .mod_customnav span {
display: block;
text-decoration: underline;
color: #fff;
padding: 3px ;
margin-left: 9px;
}
#header .mod_customnav a:hover,
#header .mod_customnav a:focus {
margin-top:1px;
/*background: #F1CF74;*/
color: white;
}
#header .mod_customnav span.active {
/*background-color: #F1CF74;*/
color: #F1CF74;
margin-top: 0px;
}
/* =================
Sitemap gestalten
================= */
.mod_sitemap ul ul { margin-bottom: 0; }
.mod_sitemap li {
list-style-type: none;
margin-left: 0; /* 1. Ebene ohne Einzug links */
}
.mod_sitemap li li { margin-left: 1.5em; } /* linker Einzug */
.mod_sitemap a { text-decoration: none; }
.mod_sitemap .level_1 a { font-weight: bold; }
.mod_sitemap .level_2 a { font-weight: normal; }
} /* Ende @media */
vielen Dank und liebe Grüße
Ewaldo
