Subtitles of the Movie

We conclude looking at our Lists and setting up our Navigation Bar. So here we do have an issue with our secondary tutorial list showing up underneath our Tutorials. Now that's actually because we have that unordered list showing up inside of our main navigation unordered list. So, we have an additional level that we're not taking into consideration yet. What we want to do is we want to go ahead and change this list of Gimp, Inkscape, Amaya, Blender, and Scribus, from being this type of horizontal list, into being a vertical list. So the first thing we need to do is set up an ID attribute in our HTML, so I'll go ahead and jump over to the HTML page, and then on our unordered list I'll go ahead and set this up so we have an ID set to submenu-contents. Alright. So now that we have that, I'll go ahead and save that, jump back over here into my CSS, and move to find where the rest of the navigation styles are; so there's the navigation, and I'm going to add in a new rule to target the subMenuContents inside of navigation, so subMenuContents and I'll set this up so that it will be a block element and I'll set up a border for now, a 1 pixel black solid, and I'm going to set up a background to use that kind of blue-gray color that we've already defined, and then I want to set up another rule here to target the subMenuContents list items, and before I add anything in there I just want to go ahead and save that, take a look in the browser here to see what has been affected so far. So, essentially all we have is this border being set up. Now our actual content is not being displayed inside of a border region because, well, it's basically taking up no space right now, however, whenever I jump back into my CSS and add in my declarations for the list items that will have them clear left; set the font-size to be .9m, and then set up padding to be 1m, go ahead and save that and jump back into my browser, Refresh, and here we now have our vertical list. However, we have some other interesting things going on here, so I want to jump back into my CSS and I want to change how the subMenuContents is being displayed. I'll do that by setting its positioning to be absolute, and because I want this to be on top of other items, I'll set the z-index to be 200, I'll go ahead and save, and I Refresh, and now I have the appropriate background. I did not have that background because originally it wasn't taking up any space because according to our structure we had our subMenuContents as being a nested list inside of a block level element that didn't really know anything about lists, so it just wasn't making any sense for our browser but now it is making some sense. So the next thing I want to do is target my nav bar links. Now we already have a rule set up that will be targeting those, and I'll just scroll up here to find that and I just want to add in a little bit more information here. I want the padding on the left to be 1.3m, and I just want to explicitly state that they are block as well. So now I'll save that and jump back in here and Refresh, and voila, everything looks great. Now, actually there's one last thing we need to do before we can leave this and that is hide this Menu. Now in an upcoming movie we will be able to show and hide that using JavaScript, but for now it just needs to be hidden by default. So I'll jump back into the subMenuContents rule for the navigation, and I'll set visibility to hidden. Save that, and Refresh, and there we go. So later on we'll add in a behavior using JavaScript so that whenever we move over this our list will show up. So that concludes looking at our Navigation List and converting it into a Horizontal Toolbar, and as you've seen, it was actually kind of easy to do especially once we know all of the little tricks about how to use CSS.