
If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!
The end result with a little mod will look like this:
#topbar .subwrap {
background: #fff;
height: 51px;
width: 958px
}
.submenu {
background: #fff;
height: 34px;
line-height: 34px;
padding: 0;
margin: 0;
}
.submenu a {
color : #790000;
background : inherit;
text-decoration : none;
padding: 0 10px 0 10px;
line-height : 23px;
}
.submenu a:hover, .submenu .current {
color : #000;
background : inherit;
height : 23px;
text-decoration: underline
}
.submenu ul {
list-style : none;
padding : 0;
margin : 0;
}
.submenu li {
float : left;
margin : 0 0 0 0px;
display: inline;
}
/* Override Children */
.children {display: none;}
Note how I made a few changes to .subwrap and .submenu to differential it from the main menu, very subtle change though. Also note how I added a style at the very end to prevent the child(ren) category(ies) from being displayed.
That’s it, check the result, a second level menu using categories.
Next time, we will discuss conditional and dropdown/slidedown menus.
November 6th, 2008 at 2:15 pm
[...] will use the same demo theme we created during the previous tutorial. As you can see it has conditional page tags built in, just like many of our other new [...]
September 16th, 2008 at 10:38 pm
brilliant. So simple and easy, and explained well. So, I expect the conditional explanation involves how to target related pages? Looking forward to more.
September 1st, 2008 at 7:17 pm
[...] Part 3.1 — Navigation – Second Lavel Menu [...]