I have a big problem with CSS Navigation, I use the Template Andreas01 and by default it shows me all the Levels of my Website, i only wann see the mainlevel and on klick one level under.
This is the original CSS from the Template:
/* MENU */
#sideMenu ul {
list-style:none;
width:150px;
padding:0;
}
#sideMenu a {
font-weight:bold;
height:20px;
text-decoration:none;
color:#505050;
display:block;
padding:2px 0 0 4px;
background:#f4f4f4;
border-left:4px solid #cccccc;
font-size:1.1em;
}
#sideMenu li.here a {
color:#3f729f;
}
#sideMenu div.subdiv a {
color:#505050;
}
#sideMenu div.subdiv li.here a {
color:#3f729f;
}
#sideMenu a:hover, #sideMenu div.subdiv a:hover, #sideMenu li.here a:hover {
background:#eaeaea;
color:#286ea0;
border-left:4px solid #286ea0;
}
#sideMenu ul li ul li a {
}
And this is the change i made (found in Forum), so i get the first level closed but after klicking a item with sublevels i get all sublevels under this point,
/* new */
#sideMenu li ul{
display:none;
}
#sideMenu li.here ul{
display:block;
}
#sideMenu li.here ul a{
color:#3f729f;
}
/* new */
/* old
#sideMenu li.here a {
color:#3f729f;
}
*/
Is there someone out on this november sunday, who can help me?
-
☆ A M B ☆
- 24,524 Posts
You just need to add another layer to the ul li ul li... instructions, as many as you have levels in the menu.
li.here li ul{
display:none;
}
li.here li.here ul{
display:block;
}
it does get a little confusing, but if you study the view source of the whole menu it begins to come clear.
Im really confused..... you mean like this?
/* MENU */
#sideMenu ul {
list-style:none;
width:150px;
padding:0;
}
#sideMenu a {
font-weight:bold;
height:20px;
text-decoration:none;
color:#505050;
display:block;
padding:2px 0 0 4px;
background:#f4f4f4;
border-left:4px solid #cccccc;
font-size:1.1em;
}
/* eingefuegt */
#sideMenu li ul{
display:none;
}
#sideMenu li.here ul{
display:block;
}
#sideMenu li ul{
display:none;
}
#sideMenu li.here ul{
display:block;
}
#sideMenu li.here ul a{
color:#3f729f;
}
/* eingefuegt */
/*
#sideMenu li.here a {
color:#3f729f;
}
*/
#sideMenu div.subdiv a {
color:#505050;
}
#sideMenu div.subdiv li.here a {
color:#3f729f;
}
#sideMenu a:hover, #sideMenu div.subdiv a:hover, #sideMenu li.here a:hover {
background:#eaeaea;
color:#286ea0;
border-left:4px solid #286ea0;
}
#sideMenu ul li ul li a {
}
is this the right way?
#sideMenu li ul{
display:none;
}
#sideMenu li.here ul{
display:block;
}
#sideMenu li.here ul a{
color:#3f729f;
}
#sideMenu li li ul{
display:none;
}
#sideMenu li.here li.here ul{
display:block;
}
#sideMenu li.here li.here ul a{
color:#3f729f;
}
#sideMenu li li li ul{
display:none;
}
#sideMenu li.here li.here li.here ul{
display:block;
}
#sideMenu li.here li.here li.here ul a{
color:#3f729f;
}
Anyone out there who can give me a little bit assistance with this css thing?
