Join James Williamson for an in-depth discussion in this video Controlling submenu display, part of CSS: Styling Navigation.
- View Offline
- Exercise Files
- Code Practice
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…
- 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.