Five Useful Interactive CSS/jQuery Techniques Deconstructed - Practical JavaScript Techniques - page 26

#main-nav .main-nav-dd {
position : absolute ;
top : 50px ;
left : 0 ;
margin : 0 ;
padding : 0 ;
background-color : #FFF ;
border-bottom : 4px solid #f60 ;

}

#main-nav .main-nav-dd-column {
width : 130px ;
padding : 15px 20px 8px ;
display : table-cell ;
border-left : 1px solid #ddd ;
* float : left ;
* border-left : 0 ;

}

#main-nav .main-nav-dd-column:first-child {
border-left : 0 ;

}

Here, we've positioned the dropdown absolutely, directly beneath the first tab.

Let's set display:table-cell on all of the column wrappers, so that they display next to
each other. But table-cell is not supported in IE6 or 7, so we've used an attribute hack as

17

an alternative for IE6 and 7. This hack places an asterisk ( * ) before each of the attributes that
are specific to IE6 and 7.

Thus, we've defined a backup for unsupported IEs, which is simply float:left . This works
almost as well as display:table-cell , except that the floated elements don't match each
other's height, so the borders between columns don't line up. To avoid this minor issue, we
simply remove the border-left using the same asterisk hack.