Join Joseph Lowery for an in-depth discussion in this video Working with submenus (CSS), part of Site Navigation with CSS in Dreamweaver.
We are at the stage in the development of our horizontal navigation bar now where we've added the subnavigation text and it's time to start styling it. And somewhat perversely, the very first thing we need to do is hide it. So, as you can see, we have lots of problems going on here with the subnavigation, including it being outsized off to one side, and we also have the background image repeating--not to mention that it's exposed right from the outset. So, let's go over to Split view, and I have my nav.css file open.
I will go down to the bottom here, and now we will create a rule that will hide the nested unordered list. So, we start off by targeting nav li.subNav, and that will select only those list items which have a class of subNav, but we want to target specifically the unordered list found under those. So, I will add in a ul there and open and close in curly brace. Now, we put in a display none property, and if I click over into Live view, it disappears.
So, of course the next thing to do is to define a rule that reveals the subnav when the top navigation item--again with the class of subnav--is hovered over. So, let's add a new rule. It goes nav li class subNav. Now, we are going to put in the hover state, so we put in colon and then the hover and again the ul tag. So, we want to bring this back into view and you do that by using a display property set to block.
And we want to make sure that there's no border underneath this ul, so we will type in border: none. And I also want to move over the subnavigation so that it lines up properly. If you recall, we put in a left margin of 40 pixels. We are now going to use that value again by putting in a margin-left of 40 pixels and finally a 0 padding. So, let's take a look and see how things are shaping up. Well, we are getting a little bit better.
Things have now a little bit more in alignment, but we still need to add a background color, so back to the nav.css, and we are going to target just the list items that are within the nested ul now. So, that's going to be nav li, class of subNav ul li, and let's shrink down the height a bit by giving each item a height of 1.2 ems.
And I am going to go ahead and set a darker green background color here, and the value I am going to put in is one that I picked up from my design. So it starts off with 759B46, and let's add in some padding to separate each of the items. We will do 3 pixels from the top, 0 on the right, 3 pixels on the bottom, and 5 pixels from the left.
Finally, we're going to align the text to the left. Okay, one more rule that will reduce the size of the subnav items and give a nice contrasting color, and we are going to apply this to the anchor tag. So, nav li:subNav:hover ul li a. So, we will give it an initial color of white and a font size of .75em, and again zero out that padding. Okay.
So let's take a look and see how things are going. Well, they look a lot more reasonable now, don't they? So, the next task is to add some proper interactivity.
- Using icons
- Navigating with Spry widgets
- Styling Spry menus
- Working with background images
- Implementing sprites
- Designing navigation with accessibility in mind
- Adding drop-down menus
- Developing graphical navigation with jQuery
- Creating pop-out vertical navigation
- Exploring CSS3 and HTML5 enhancements