• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Project 6. CSS-Driven Drop-Down Menus > Reorienting the Menus

Reorienting the Menus

So far, we've managed to create a good multilevel menu system in which each submenu opens up to the right of its parent. That's great if the navigation is going to be in the sidebar, but what if it isn't? What if we want the main-level navigation to be a horizontal toolbar across the top of the page? Good news: With some small style adjustments and a few extra rules, we can do exactly that with the same markup we're already using.

Reorientation

Before anything else, let's rework the styles so that the main-level links are shown as a horizontal toolbar. This will require very few changes, as it happens. The first thing to do is strip out the width declarations from the div#nav and div#nav ul rules.


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint