From the course: Creating a Responsive Web Design

Unlock this course with a free trial

Join today to access over 22,600 courses taught by industry experts.

Showing and hiding the nav submenus

Showing and hiding the nav submenus - CSS Tutorial

From the course: Creating a Responsive Web Design

Start my 1-month free trial Buy for my team

Showing and hiding the nav submenus

“

- So now, we're going to hide those sub-menus and then show them when somebody hovers over those top level list items. So, back to the CSS, let's find our navigation section of our CSS document, let's scroll down, I'm going to come down here to before the top level rules. We want to keep the top level rules after all of these other contents, just in case any of these rules aren't quite as specific as any of the rules down here, since they'll be defined after all of the other nav elements, they will still take precedence in the browser. So, down here, after nav ul li, let's define unordered lists, which are inside of other unordered lists. So, I'll type nav ul ul. Put in our brackets, we're going to set position to absolute, we're going to set a top property of 100%. And then we're gonna set a background color, which is going to be the color of the submenus, #2b0306: So that's going to be that same dark red color. Now, the reason we want to position the nested unordered list, is…

Contents