HTML and CSS Reference
In-Depth Information
First, we've defined a height and width for our overall tab area and matched the total height
and width of all five tabs, so that we can position the dropdown correctly. Next, we've defined
position:relative
for the tab wrapper, which will allow us to position the dropdown
absolutely.
Then, we added
list-style:none
to the list wrapper, and
display:inline
to each list item,
to eliminate any list styling.
Finally, we floated all of the tab links to the left.
BUILDING THE DROPDOWN
Now, let's build the dropdown mark-up in one of our tab wrappers:
<
li
class
="
main-nav-item
">
<
a
href
="
#
"
class
="
main-nav-tab
">
Tab 1
</
a
>
<
div
class
="
main-nav-dd
">
<
div
class
="
main-nav-dd-column
">
Column content here
</
div
>
</
div
>
<
div
class
="
main-nav-dd
">
<
div
class
="
main-nav-dd-column
">
Column content here
</
div
>
</
div
>
<
div
class
="
main-nav-dd
">
<
div
class
="
main-nav-dd-column
">
Column content here
</
div
>
</
div
>
</
li
>
Next, let's style this dropdown:
