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.
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
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:
Search WWH ::

Custom Search