HTML and CSS Reference
In-Depth Information
multi-column dropdown
. This approach not only looks great, but provides an opportunity to
group the links and highlight the most important ones.
Let's recreate this menu using CSS and jQuery.
•
BUILDING THE TABS
Ideally, we would start with a lean and simple mark-up…
<
nav
>
<
li
><
a
href
="
#
">
Tab 1
</
a
></
li
>
<
li
><
a
href
="
#
">
Tab 2
</
a
></
li
>
<
li
><
a
href
="
#
">
Tab 3
</
a
></
li
>
<
li
><
a
href
="
#
">
Tab 4
</
a
></
li
>
<
li
><
a
href
="
#
">
Tab 5
</
a
></
li
>
</
nav
>
…and use
navlia
,
nav>li
or
navli
to style the list items in the navigation. The child
selector doesn't work in IE6 and
navli
would cause problems since there are additional LIs
nested in the content area of the dropdown. If you absolutely need the site to work for IE6
users as well (and that's what you sometimes will have to do), you'll need to have markup
similar to the original mark-up in this example:
<
ul
id
="
main-nav
">
<
li
class
="
main-nav-item
">
<
a
href
="
#
"
class
="
main-nav-tab
">
Tab 1
</
a
>
</
li
>
<
li
class
="
main-nav-item
">
<
a
href
="
#
"
class
="
main-nav-tab
">
Tab 2
</
a
>
</
li
>
<
li
class
="
main-nav-item
">
<
a
href
="
#
"
class
="
main-nav-tab
">
Tab 3
</
a
>
</
li
>
