Join James Williamson for an in-depth discussion in this video Stripping list styling, part of CSS: Styling Navigation.
In this chapter we're going to turn our attention to creating horizontal menus.…Although they're a little bit more complex than vertical menus, they actually use many of the same techniques.…That means that we're going to be covering a lot of those steps again in this chapter,…which is a good thing, because it reinforces the techniques themselves, and it highlights…the steps that are consistent regardless of which type of menu you're working with.…Knowing what's needed for both types of menus can really help you when you're planning out your global styles.…
As we start to build a horizontal menu, we're going to begin at the exact same place we…started with our vertical menus, which is to remove the default list styling.…Before we do that, however, I want to just take a look at what we're going to be building…over the course of this chapter.…So I have the finished version of our horizontal menu opened up in the browser, and as you…can see, it has a couple of things that the vertical menu did not.…The first is an indicator of the current page, so we're going to tackle how to indicate where…
- Organizing menus with lists
- Creating block-level links
- Styling links, link states, and image links
- Defining link dimensions
- Controlling link spacing in a menu
- Creating rollovers
- Clearing floats
- Indicating current pages
- Controlling cursor states
- Building dropdown menus
- Creating CSS-only buttons
Skill Level Beginner
1. Structuring Navigation
2. Link Styling Basics
3. Creating a Vertical Menu
4. Creating Horizontal Menus
5. Dropdown Menus
6. Enhancing Navigation with CSS
Additional resources6m 29s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.