/* Our menu settings */ .menu { height:39px; float:left; background:url('../images/menu.jpg') no-repeat top left; } .menu span { display:none; } #m_home, #m_home_on { width:66px; background-position:0 0; } #m_home:hover { background-position:0 -39px; } #m_home_on { background-position:0 -39px; } #m_about, #m_about_on { width:62px; background-position:-66px 0; } /* Note that the 2nd row is sufficient but because of IE6 the first is required */ #m_about:hover { background-position:-66px -39px;width:62px; } #menu2 li:hover > a#m_about { background-position:-66px -39px;width:62px; } #m_about_on { background-position:-66px -39px; } #m_daybreaks, #m_daybreaks_on { width:91px; background-position:-128px 0; } #m_daybreaks:hover { background-position:-128px -39px; } #menu2 li:hover > a#m_daybreaks { background-position:-128px -39px; } #m_daybreaks_on { background-position:-128px -39px; } #m_holidays, #m_holidays_on { width:80px; background-position:-219px 0; } #m_holidays:hover { background-position:-219px -39px; } #menu2 li:hover > a#m_holidays { background-position:-219px -39px; } #m_holidays_on { background-position:-219px -39px; } #m_commuters, #m_commuters_on { width:97px; background-position:-299px 0; } #m_commuters:hover { background-position:-299px -39px; } #menu2 li:hover > a#m_commuters { background-position:-299px -39px; } #m_commuters_on { background-position:-299px -39px; } #m_coachhire, #m_coachhire_on { width:90px; background-position:-396px 0; } #m_coachhire:hover { background-position:-396px -39px; } #m_coachhire_on { background-position:-396px -39px; } #m_busservices, #m_busservices_on { width:106px; background-position:-486px 0; } #m_busservices:hover { background-position:-486px -39px; } #menu2 li:hover > a#m_busservices { background-position:-486px -39px; } #m_busservices_on { background-position:-486px -39px; } #m_garage, #m_garage_on { width:128px; background-position:-592px 0; } #m_garage:hover { background-position:-592px -39px; } #m_garage_on { background-position:-592px -39px; } #m_status, #m_status_on { width:109px; background-position:-720px 0; } #m_status:hover { background-position:-720px -39px; } #m_status_on { background-position:-720px -39px; } #m_news, #m_news_on { width:57px; background-position:-829px 0; } #m_news:hover { background-position:-829px -39px; } #m_news_on { background-position:-829px -39px; } #m_contact, #m_contact_on { width:65px; background-position:-886px 0; } #m_contact:hover { background-position:-886px -39px; } #m_contact_on { background-position:-886px -39px; } /* ### CSS PLAY settings ### */ /* ================================================================ This copyright notice must be kept untouched in the stylesheet at all times. The original version of this stylesheet and the associated (x)html is available at http://www.cssplay.co.uk/menu/pro_drop11.html Copyright (c) 2005-2007 Stu Nicholls. All rights reserved. This stylesheet and the associated (x)html may be modified in any way to fit your requirements. =================================================================== */ /* ## This code has been purchased and tidied for use in this website. You are NOT allowed to copy it unless we say so. ## */ .top { display:block; float:left;} /* Used for IE6 */ #menu2 table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0; } /* Define a hover - needed - something is overwriting this!*/ #menu2 a:hover { visibility:visible; position:relative; z-index:200; } /* Set all li:hovers to relative positioning */ #menu2 li:hover {position:relative; z-index:200;} /* Define the first level menu drop down and what happens when you hover */ #menu2 ul, #menu2 :hover ul { position:absolute; left:-9999px; top:-9999px; width:0; height:0; } /* Sub UL's */ #menu2 :hover ul.sub { left:0px; top:39px; white-space:nowrap; height:auto; z-index:300; margin-top:0px; } /* Sub UL and A */ #menu2 :hover ul.sub li, #menu2 :hover ul.sub li a { display:block; height:20px; width:160px; line-height:20px; } #menu2 :hover ul {left:120px; top:0; white-space:nowrap; width:120px; z-index:400; height:auto;} /* Different size sub uls */ #menu2 :hover ul.sub2 li, #menu2 :hover ul.sub2 li a { width:159px;} * html #menu2 :hover ul.sub2 li, #menu2 :hover ul.sub2 li a { width:152px;} #menu2 :hover ul.sub3 li, #menu2 :hover ul.sub3 li a { width:177px;} * html #menu2 :hover ul.sub3 li, #menu2 :hover ul.sub3 li a { width:170px;} #menu2 :hover ul.sub4 li, #menu2 :hover ul.sub4 li a { width:183px;} * html #menu2 :hover ul.sub4 li, #menu2 :hover ul.sub4 li a { width:177px;} #menu2 :hover ul.sub5 li, #menu2 :hover ul.sub5 li a { width:193px;} * html #menu2 :hover ul.sub5 li, #menu2 :hover ul.sub5 li a { width:187px;} #menu2 :hover ul.sub6 li, #menu2 :hover ul.sub6 li a { width:248px;} * html #menu2 :hover ul.sub6 li, #menu2 :hover ul.sub6 li a { width:233px;} /** * Had problems with this bit * Firstly don't just use #menu2 li - must use :hover ul.sub li * as it upsets the top LI in IE! * Secondly we are using a transparent PNG so no transparency needed **/ /* Sub UL li's */ #menu2 li { float:left; } /* Sub UL li's a's */ #menu2 :hover ul.sub li a { position:relative; font-size:12px; text-indent:10px; font-weight:bold; color:#cccccc; visibility:visible; z-index:200; } /* Set hover colour */ #menu2 :hover ul.sub li a:hover { text-decoration:none; font-weight:bold; color:white; } /* force height */ .subbot { padding-bottom:0px; } * html .subbot { padding-bottom:10px; } /* Will need refining! */ .subtop { padding-top:5px; } #menu2 ul.sub2 li.subtop { background:url('../images/men_top.png') no-repeat -42px 0;} #menu2 ul.sub3 li.subtop { background:url('../images/men_top.png') no-repeat -24px 0;} #menu2 ul.sub4 li.subtop { background:url('../images/men_top.png') no-repeat -18px 0;} #menu2 ul.sub5 li.subtop { background:url('../images/men_top.png') no-repeat -8px 0;} #menu2 ul.sub6 li.subtop { background:url('../images/men_top6.png') no-repeat 0 0;} #menu2 ul li { background: url('../images/men_back.png') repeat-y top left; } #menu2 ul.sub2 li { background: url('../images/men_back.png') repeat-y top right; } #menu2 ul.sub6 li { background: url('../images/men_back6.png') repeat-y top left; } #menu2 ul.sub2 li.subbot { height:35px; background:url('../images/men_bot_1.png') no-repeat -1px 0; } #menu2 ul.sub3 li.subbot { height:35px; background:url('../images/men_bot_2.png') no-repeat bottom right; } #menu2 ul.sub4 li.subbot { height:35px; background:url('../images/men_bot_3.png') no-repeat bottom right; } #menu2 ul.sub5 li.subbot { height:35px; background:url('../images/men_bot_4.png') no-repeat bottom right; } #menu2 ul.sub6 li.subbot { height:35px; background:url('../images/men_bot_6.png') no-repeat bottom left; }