hallo zusammen
bin gerade beim erstellen der navigation (benutzerdefiniertes menu) und bin mit meinen bescheidenen css-kenntnissen auf folgendes problem gestossen:
die subnavigation wird nicht korrekt dargestellt, bzw. die folgende hauptnavigation schwebt darüber (siehe screenshot).
was habe ich falsch gemacht? hier mein css-code:
Code
/* ----------------------------------
NAVIGATION
ACHTUNG!!!!!!!!!
Der CSS-Code für die Navigation wurde neu angepasst und ist jetzt im Plugin "jquery-vertical-accordion-menu" platziert > siehe "skins" > "sicherzufuss.css" & die entsprechenden Bilder im Ordner "images"
---------------------------------- */
/* ---- This is the CSS code used for styling the first menu:
In this portion we style the main DIV containing the menu, everything that represents our menu resides in this box.
For the purpose of this tutorial we are floating the menus right so they can stay aligned next to each other. ---- */
#nav {
float: right;
width: 290px;
}
#nav h1 {
display: none;
}
/* ---- In this portion we style the actual list, containing the list items. ---- */
#nav ul {
display: block;
padding: 0 0 0 0;
margin: 0 0 0 0;
}
/* ---- In this portion we apply a CSS property to our List elements that makes our menu look the same on Internet Explorer and other browsers. ---- */
#nav ul li {
display: inline;
/* for IE5 and IE6 */
height: 43px;
list-style: none;
float: right;
width: 290px;
}
/* ---- In this portion we style the LINK that is reside inside the list element. The reason we are not styling the LI element is that by styling the LINK (a href) we can make the clickable menu area spread along the whole list element, using display: block; ---- */
#nav ul a {
font-family: "Courier New", Courier, monospace;
font-weight: bold;
font-size: 1.5em;
line-height: 1em;
letter-spacing: 0.1em;
text-align: right;
display: block;
height: 43px;
padding: 6px 25px 0px 20px;
float: right;
}
#nav ul li a span {
padding: 5px 0px 16px 20px;
background-image: url(images/zettelnav_left.png);
background-repeat: no-repeat;
background-position: left top;
}
/* ---- In this portion we style visited and active state of our links (menu items, a href). ---- */
#nav ul a:link,
#nav ul a:visited {
color: #283d86;
text-decoration: none;
text-shadow: 1px 1px 2px #999;
background-image: url(images/zettelnav_right.png);
background-repeat: no-repeat;
background-position: right top;
}
/* ---- In this portion (1. line!) we style the hover state of our links (menu items). The attributes we use here are applied to the a menu item when we move our mouse cursor over it. ---- */
/* ---- In this portion (2. and 3. line!) we style the current state of our link (menu item). If we click the Contact menu item (link) and are now browsing the contact page, we need our menu to always highlight the page we are currently browsing. This attributes are applied to the a href containing the additional id="current" <a href="item-one.html" id="current"> ---- */
#nav ul a:hover,
#nav ul li.current_page_item a,
#nav ul li.current_page_parent a {
color: #cc0000;
text-decoration: none;
text-shadow: 1px 1px 2px #999;
padding: 6px 30px 0px 30px;
}
/* ---- Subnavigation ---- */
/* ---- In this portion we style the actual list, containing the list items. This is the place were we decide on our font-type, size, margin, padding and of course the list style. We are using list-style-type:none; so our list items wont display anything in front of them. ---- */
#nav ul ul {
display: block;
padding: 0 0 0 0;
margin: 0 0 0 0;
}
/* ---- In this portion we apply a CSS property to our List elements that makes our menu look the same on Internet Explorer and other browsers. ---- */
#nav ul ul li {
display: block;
/* for IE5 and IE6 */
height: 22px;
list-style: none;
float: right;
background-image: none;
}
/* ---- In this portion we style the LINK that is reside inside the list element. The reason we are not styling the LI element is that by styling the LINK (a href) we can make the clickable menu area spread along the whole list element, using display: block; ---- */
#nav ul ul a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 1.1em;
letter-spacing: 0.1em;
text-align: right;
display: block;
height: 22px;
padding: 0px 30px 0px 0px;
}
/* ---- In this portion we style visited and active state of our links (menu items, a href). ---- */
#nav ul ul a:link,
#nav ul ul a:visited {
color: #FFF;
letter-spacing: 0em;
text-decoration: none;
text-shadow: 1px 1px 2px #000;
background-image: none;
padding: 0px 30px 0px 0px;
}
/* ---- In this portion we style the hover state of our links (menu items). The attributes we use here are applied to the a menu item when we move our mouse cursor over it. ---- */
#nav ul ul a:hover {
color: #FFF;
font-weight: bold;
letter-spacing: 0em;
text-decoration: none;
text-shadow: 1px 1px 2px #000;
background-image: none;
padding: 0px 30px 0px 0px;
}
/* ---- In this portion we style the current state of our link (menu item). If we click the Contact menu item (link) and are now browsing the contact page, we need our menu to always highlight the page we are currently browsing. This attributes are applied to the a href containing the additional id="current" <a href="item-one.html" id="current"> ---- */
#nav ul ul li.current_page_item a {
color: #FFF;
font-weight: bold;
letter-spacing: 0em;
text-decoration: none;
text-shadow: 1px 1px 2px #000;
background-image: none;
padding: 0px 30px 0px 0px;
}
Alles anzeigen