Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Join James Williamson, as he shows you how to create elegant menus, links, and buttons that help visitors navigate your site faster and more intuitively. The course covers creating structured navigation that is accessible and clean, styling links, and building horizontal and vertical menus with rollover effects. The last chapter reveals how to create stylish buttons with special effects and CSS sprites.
We're now ready to modify the display of our dropdown menus so that they're hidden until somebody mouses over the appropriate menu item. I mentioned earlier that there are several methods for controlling the display of your dropdowns, and I want to take just a moment to go over a couple those again. Probably the most common one that I see is to set the initial display property of the submenus say none so it will just display none and then change it back to either block or whatever you need when a user interacts with the top level menu item. There are a couple of variations on these. Some folks will use visibility hidden and bring it back or an opacity of 0 and then bring that property back.
Those techniques usually work just fine, but these approaches lack a good bit of accessibility. Screen readers typically ignore elements that are set to not display, and that lack of accessibility is why I really prefer using absolute positioning to hide and show the submenus. Now the downside of that is if you've never worked with absolute positioning before, or if you're not familiar with it, it can be really hard to control that can lead to some really unexpected results. So if you're not familiar with absolute positioning and you haven't worked with it a lot, I really recommend that you read up on it, you study it, you experiment with it a little bit before you begin starting to integrate it into your own dropdown menus.
So I have the dropdown.htm file open from the 05_06 directory and a couple things are going on here. You're going to notice, for example, that I do have the top property here set for UL submenu and the absolute positioning that was set earlier, but there's no left value. So what I'm going to do is I'm going to go write down the next line, and I'm going to type in left, and I'm going to set that left value to -9000 ems. Now feel free to use whatever ridiculous number you want. 9000 ems is probably somewhere over to the left of me in the next building.
But the nice thing is that it won't show up on my screen. Now you do have to be kind of careful about that. I remember setting some to smaller numbers like 500 ems or 2000 pixels. Well, now we have a lot of displays that can handle that. So make sure you're pushing it far enough away to where you're not going to see it. So if I save this, and I preview this in my browser, refresh the page, the submenu is gone. It's still there, it's just way off the screen, which is nice. Screen readers will still see. They'll still read it. So we need to bring it back.
Obviously, we want to bring it back when somebody mouses over this menu item. This is really where the magic of CSS-driven dropdown menus come in. What I'm going to do is just below this ul.submenu li selector I'm going to create a brand-new selector, and I want you to really pay attention to how this selector is crafted. I'm going to type in .topmenu. So remember, we're targeting the Main Menu bar up top. Remember, it has that class of top menu. We haven't been that specific lately, but there's a reason why we're being that specific now.
I'm going to type in li:hover ul. I'm going to go ahead and finish the curly brackets here, and I want to talk about what this is doing. So it's saying, okay, look inside the top menu. Anytime you find a list item that's being hovered over, if that has an unordered list inside that, I want to target this unordered list. Now what's really interesting about this is this is actually going to work regardless of how many levels deep your unordered lists go. Right now we're only dealing with a one-level-deep dropdown menu, but you may actually have submenus that in turn have their own submenus.
This will still work, because it's finding any list item inside a top menu and then any unordered list inside of that. As your menu structure gets a lot more complex, you're going to need to take a look at how you write that selector, and you might even need to be more specific in order to keep certain ones from triggering. The real key to this is the fact that we're triggering in it when somebody hovers over the list item. People get so caught up in doing the hover pseudo-class selector with links that they think that it can't be applied to anything else, but it can. It can be applied to any element you want.
So by applying it to the list item, we're saying when somebody hovers over that list item, look inside of it. That works great because, remember, there is nothing inside the link other than text. The unordered list, the submenus are inside list items. So the way this selector is written is very, very important. Inside that, we only have one property to give it, and that's going to be a left offset, and we're going to return that to 0. The default display for the menu is -9000 ems, off the screen. But when somebody hovers over one of the list items that contains an unordered list, that unordered list left value is suddenly going to change to 0, and that'll make it reappear.
So I'm going to save this, go back into my browser, and Refresh the page. Sure enough, now when I hover over products, the menu comes back, and there's our submenu. There's still a little cosmetic issue with this top-level menu. You'll notice that as we start browsing the submenu that top-level rollovers, this one right here, goes away. That's really less than ideal. I would like to give the indication that they're still in the products section and not have that go away. So in our next exercise we're going to explore how to create a persistent hover state for those top-level links.
There are currently no FAQs about CSS: Styling Navigation.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.