HTML and CSS Reference
In-Depth Information
#main-nav .main-nav-item-active .main-nav-tab
{
background-color
:
#FFF
;
color
:
#f60
;
-webkit-border-top-left-radius
:
5px
;
-webkit-border-top-right-radius
:
5px
;
-moz-border-radius-topleft
:
5px
;
-moz-border-radius-topright
:
5px
;
border-top-left-radius
:
5px
;
border-top-right-radius
:
5px
;
}
Here, we've changed the background and text colors and rounded the top corners (in
supported browsers).
POSITIONING THE DROPDOWN
Now the basic mouse interaction has been built and the dropdown displays on mouseover.
Unfortunately, it is still not positioned correctly under each tab, so let's add some more code to
our hover events:
$
(
function
() {
var
$mainNav
=
$
(
'#main-nav'
);
$mainNav
.
children
(
'.main-nav-item'
).
hover
(
function
(
ev
) {
var
$this
=
$
(
this
),
$
dd
=
$this
.
find
(
'.main-nav-dd'
);
// get the left position of this tab
var
leftPos
=
$this
.
find
(
'.main-nav-tab'
).
position
().
left
;
// position the dropdown
$
dd
.
css
(
'left'
,
leftPos
);
// show the dropdown
$this
.
addClass
(
'main-nav-item-active'
);
},
function
(
ev
) {
