Join James Williamson for an in-depth discussion in this video Solution: Creating a vertical menu, part of CSS: Styling Navigation.
- View Offline
- Exercise Files
- Code Practice
I hope you had fun going through the Vertical Menu Lab.…Let's compare your finished files with mine, and discuss each of the steps for a lab as…we go through the code.…So I have actually opened up the index.htm and the main.css file from the finished_files…folder of the 03_09.…And remember, the CSS file, the main.css is actually in the _css subdirectory.…So we're just going to jump right in and go through all of these steps.…All right, so for the first step, you needed to go into the CSS reset and add the ul and…li elements to eliminate any of the default margins and padding from those lists.…
So to do that, you were going to go down into the CSS reset, which is right here on about line 98 or so.…I just went ahead and added the ul and li element selectors to the existing CSS reset.…Now, if you put yours at the end and not right here, there is nothing wrong with that.…I just like grouping elements together.…Since I already had the ordered list there, I just went ahead and put those two right…there in order as well.…
- 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.