/* client: Arsenal FC design: Rippleffect */ /** navigation **/ #mainnav-topshadow { background-image:url('http://www.arsenal.com/assets/images/nav/mainnav-topshadow.png'); background-repeat:repeat-x; height:8px; width:972px; padding:0; margin-left:2px; margin-right:0px; margin-top:1px; margin-bottom:0px; background-position-y:50% } #mainnav-bottomshadow { background-image:url('http://www.arsenal.com/assets/images/nav/mainnav-bottomshadow.png'); background-repeat:repeat-x; height:7px; width:972px; padding:0; margin-left:2px; margin-right:0px; margin-top:0px; margin-bottom:2px; background-position-y:50% } #mainnav { background-image:url('http://www.arsenal.com/images/nav/mainnav-background2.png'); background-repeat:repeat; width:972px; padding:0; position:relative; z-index:100; margin-left:2px; margin-right:0; margin-top:0; margin-bottom:1px; background-position-y:50% } #mainnav ul { margin:0 0 0 -1px; padding:0; float:left; } #mainnav ul li { float:left; margin:0 auto; padding:0 0 0 0; list-style-type:none; border-left:1px solid #ffffff; } #mainnav ul li a { background-image:url('http://www.arsenal.com/assets/images/nav/mainnav-background.png'); background-repeat:repeat-x; background-color:#dedede; float:left; border-top:2px solid #cccccc; margin:0; text-transform:uppercase; color:#000000; font-size:1em; padding-left:12px; padding-right:12px; padding-top:4px; padding-bottom:4px; background-position-y:50% } #mainnav ul li a.active { border-top:2px solid #083e86; } #mainnav ul li a.last3 { padding-left:10px; } #mainnav ul li a.last4 { padding-left:13px; } #mainnav ul li a:hover { border-top:2px solid #083e86; color:#000000; text-decoration:none; } #mainnav ul li ul li { border:1px solid #cccccc; background-color:#f2f2f2; display:inline; background-image:url('http://www.arsenal.com/assets/images/nav/dropdown.gif'); background-repeat:no-repeat; background-position: left 50%; position:relative; z-index:20; margin-left:-1px; margin-right:0; margin-top:-1px; margin-bottom:0; padding-left:4px; padding-right:0; padding-top:0; padding-bottom:0 } #mainnav ul li ul li.first { border-top:none; } #mainnav ul li ul li a { border-left:0px none; background-color:transparent; background-image:url('http://www.arsenal.com/assets/Q3FZ94F5/none'); float:none; border-top:1px solid #fff; border-bottom:1px solid #fff; border-right:1px solid #fff; margin-left:-4px; text-transform:none; color:#000000; font-size:1.1em; width:129px; display:block; padding-left:9px; padding-right:8px; padding-top:1px; padding-bottom:2px } #mainnav ul li ul li a.drop { background-image:url('http://www.arsenal.com/assets/images/nav/bullet9px.gif'); background-repeat:no-repeat; background-position: right 50%; border-top:1px solid #fff } #mainnav ul li ul li a:hover { color:#115a88; text-decoration:none; border-top:1px solid #fff; } /* drop down */ /* Get rid of the margin, padding and bullets in the unordered lists */ #dropnav, #dropnav ul { position:relative; z-index:10; } /* Set up the link size, color and borders */ #dropnav a, #dropnav a:visited { display:block; text-decoration:none; } /* For Non-IE browsers and IE7 */ #dropnav li:hover { position:relative; } /* Make the hovered list color persist */ #dropnav li:hover > a { border-top:2px solid #083e86; } #dropnav li li:hover > a { border-top:1px solid #fff; color:#083e86; } /* Set up the sublevel lists with a position absolute for flyouts and overrun padding. The transparent gif is for IE to work */ #dropnav li ul { display:none; } /* For Non-IE and IE7 make the sublevels visible on list hover. This is all it needs */ #dropnav li:hover > ul { display:block; position:absolute; top:0px; left:119px; padding:0 30px 30px 30px; margin:14px 0 0 -1px; } #dropnav li:hover > ul ul { margin-top:0; } /* Position the first sub level beneath the top level liinks */ #dropnav > li:hover > ul { left:-30px; top:10px; } /* get rid of the table */ #dropnav table { position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em; } /* For IE5.5 and IE6 give the hovered links a position relative and a change of background and foreground color. This is needed to trigger IE to show the sub levels */ * html #dropnav li a:hover { position:relative; } /* This lot is for IE5.5 and IE6 ONLY and is necessary to make the sublevels appear */ /* change the drop down levels from display:none; to visibility:hidden; */ * html #dropnav li ul { visibility:hidden; display:block; position:absolute; } /* keep the third level+ hidden when you hover on first level link */ #dropnav li a:hover ul ul{ visibility:hidden; } /* keep the fourth level+ hidden when you hover on second level link */ #dropnav li a:hover ul a:hover ul ul{ visibility:hidden; } /* keep the fifth level hidden when you hover on third level link */ #dropnav li a:hover ul a:hover ul a:hover ul ul{ visibility:hidden; } /* keep the sixth level hidden when you hover on fourth level link */ #dropnav li a:hover ul a:hover ul a:hover ul a:hover ul ul { visibility:hidden; } /* make the second level visible when hover on first level link and position it */ #dropnav li a:hover ul { visibility:visible; left:0px; top:17px; lef\t:0px; to\p:17px; padding-top:5px; } /* make the third level visible when you hover over second level link and position it and all further levels */ #dropnav li a:hover ul a:hover ul { visibility:visible; top:-6px; left:149px; } /* make the fourth level visible when you hover over third level link */ #dropnav li a:hover ul a:hover ul a:hover ul { visibility:visible; } /* make the fifth level visible when you hover over fourth level link */ #pmenu li a:hover ul a:hover ul a:hover ul a:hover ul { visibility:visible; } /* make the sixth level visible when you hover over fifth level link */ #pmenu li a:hover ul a:hover ul a:hover ul a:hover ul a:hover ul { visibility:visible; }