HTML and CSS Reference
In-Depth Information
Finally, we remove the left border from the first column for all browsers. Although the
:first-child
pseudo-class doesn't work properly in IE6, fortunately it doesn't make a
difference, because we've already hidden the borders in these browsers.
ADDING THE INTERACTION
We've built the mark-up and styles for our dropdown, but we still need to make the menu
interactive. Let's use jQuery to add a class to show and hide the dropdown:
$
(
function
() {
var
$mainNav
=
$
(
'#main-nav'
);
$mainNav
.
children
(
'.main-nav-item'
).
hover
(
function
(
ev
) {
// show the dropdown
$
(
this
).
addClass
(
'main-nav-item-active'
);
},
function
(
ev
) {
// hide the dropdown
$
(
this
).
removeClass
(
'main-nav-item-active'
);
});
});
Here, we've attached a
hover listener
to each list item, which adds and removes the class
18
main-nav-item-active
. Attach this to the list item rather than the tab itself, or else the
dropdown will disappear when the user mouses off the tab and into the dropdown area.
Now we can use this class hook to hide and show the dropdown with CSS:
#main-nav .main-nav-dd
{
display
:
none
;
}
#main-nav .main-nav-item-active .main-nav-dd
{
display
:
block
;
}
Let's use the
active
class to style the active tab:
