/* Step 10 - Clearing the float */ #divMenu {display:block; width:1024; height:130px;overflow:hidden;margin:0px 0px 0px 0px;} /* Step 3 - get rid of the bullets and margin */ #divMenu ul {margin:0; padding:0; list-style-type:none;} /* Step 4 and 7 - make the list horizontal and giving a 1px gap */ #divMenu li {float:left; margin-right:0px;display:block;height:30px;overflow:hidden;} /* Step 5 - Adding the initial images */ /* SUBPAGE MENU ITEMS */ #divMenu li.list1 {background:transparent url(/assets/templates/default/img/paintings.gif) no-repeat top left;} #divMenu li.list2 {background:transparent url(/assets/templates/default/img/installations.gif) no-repeat top left;} #divMenu li.list3 {background:transparent url(/assets/templates/default/img/photos.gif) no-repeat top left;} #divMenu li.list4 {background:transparent url(/assets/templates/default/img/drawings.gif) no-repeat top left;} #divMenu li.list5 {background:transparent url(/assets/templates/default/img/prints.gif) no-repeat top left;} #divMenu li.list6 {background:transparent url(/assets/templates/default/img/videos.gif) no-repeat top left;} #divMenu li.list7 {background:transparent url(/assets/templates/default/img/collaborations.gif) no-repeat top left;} #divMenu li.list8 {background:transparent url(/assets/templates/default/img/latest.gif) no-repeat top left;} #divMenu li.list9 {background:transparent url(/assets/templates/default/img/profile.gif) no-repeat top left;} #divMenu li.list10 {background:transparent url(/assets/templates/default/img/pr.gif) no-repeat top left;} #divMenu li.list11 {background:transparent url(/assets/templates/default/img/collaborators.gif) no-repeat top left;} #divMenu li.list12 {background:transparent url(/assets/templates/default/img/contact.gif) no-repeat top left;} #divMenu li.list13 {background:transparent url(/assets/templates/default/img/mailing.gif) no-repeat top left;} /* Step 6 - General link styling */ #divMenu a {display:block; height:0; padding-top:30px; color:#000; overflow:hidden;} #divMenu li.list1 a {width:100px;} #divMenu li.list2 a {width:100px;} #divMenu li.list3 a {width:100px;} #divMenu li.list4 a {width:100px;} #divMenu li.list5 a {width:100px;} #divMenu li.list6 a {width:100px;} #divMenu li.list7 a {width:100px;} #divMenu li.list8 a {width:100px;} #divMenu li.list9 a {width:100px;} #divMenu li.list10 a {width:100px;} #divMenu li.list11 a {width:100px;} #divMenu li.list12 a {width:100px;} #divMenu li.list13 a {width:100px;} /* hack for older versions of IE with incorrect box model */ * html #divMenu a:link, * html #divMenu a:visited {height:33px; height:0;} /* Step 8 - Adding the background images to the link tags */ #divMenu a#item1 {background:transparent url(/assets/templates/default/img/paintings.gif) no-repeat -200px -100px;} #divMenu a#item2 {background:transparent url(/assets/templates/default/img/installations.gif) no-repeat -200px -100px;} #divMenu a#item3 {background:transparent url(/assets/templates/default/img/photos.gif) no-repeat -200px -100px;} #divMenu a#item4 {background:transparent url(/assets/templates/default/img/drawings.gif) no-repeat -200px -100px;} #divMenu a#item5 {background:transparent url(/assets/templates/default/img/prints.gif) no-repeat -200px -100px;} #divMenu a#item6 {background:transparent url(/assets/templates/default/img/videos.gif) no-repeat -200px -100px;} #divMenu a#item7 {background:transparent url(/assets/templates/default/img/collaborations.gif) no-repeat -200px -100px;} #divMenu a#item8 {background:transparent url(/assets/templates/default/img/latest.gif) no-repeat -200px -100px;} #divMenu a#item9 {background:transparent url(/assets/templates/default/img/profile.gif) no-repeat -200px -100px;} #divMenu a#item10 {background:transparent url(/assets/templates/default/img/pr.gif) no-repeat -200px -100px;} #divMenu a#item11 {background:transparent url(/assets/templates/default/img/collaborators.gif) no-repeat -200px -100px;} #divMenu a#item12 {background:transparent url(/assets/templates/default/img/contact.gif) no-repeat -200px -100px;} #divMenu a#item13 {background:transparent url(/assets/templates/default/img/mailing.gif) no-repeat -200px -100px;} /* Step 9 - Adding the :hover and selected style style #divMenu a#item1:hover{background-position:top left; z-index:50;} #divMenu a#item2:hover {background-position:top left; z-index:50;} #divMenu a#item4:hover {background-position:top left; z-index:50;} */ /* Add teh selected items */ #divMenu a#item1Selected {background:transparent url(/assets/templates/default/img/paintings.gif) no-repeat top left;z-index:50;} #divMenu a#item2Selected {background:transparent url(/assets/templates/default/img/installations.gif) no-repeat top left;z-index:50;} #divMenu a#item3Selected {background:transparent url(/assets/templates/default/img/photos.gif) no-repeat top left;z-index:50;} #divMenu a#item4Selected {background:transparent url(/assets/templates/default/img/drawings.gif) no-repeat top left;z-index:50;} #divMenu a#item5Selected {background:transparent url(/assets/templates/default/img/prints.gif) no-repeat top left;z-index:50;} #divMenu a#item6Selected {background:transparent url(/assets/templates/default/img/videos.gif) no-repeat top left;z-index:50;} #divMenu a#item7Selected {background:transparent url(/assets/templates/default/img/collaborations.gif) no-repeat top left;z-index:50;} #divMenu a#item8Selected {background:transparent url(/assets/templates/default/img/latest.gif) no-repeat top left;z-index:50;} #divMenu a#item9Selected {background:transparent url(/assets/templates/default/img/profile.gif) no-repeat top left;z-index:50;} #divMenu a#item10Selected {background:transparent url(/assets/templates/default/img/pr.gif) no-repeat top left;z-index:50;} #divMenu a#item11Selected {background:transparent url(/assets/templates/default/img/collaborators.gif) no-repeat top left;z-index:50;} #divMenu a#item12Selected {background:transparent url(/assets/templates/default/img/contact.gif) no-repeat top left;z-index:50;} #divMenu a#item13Selected {background:transparent url(/assets/templates/default/img/mailing.gif) no-repeat top left;z-index:50;} * html #divMenu a:hover {height:30px; he\ight:0;} /* Step 6 - General link styling */ #divHomeMenu{margin:40px 10px 70px 0px;width:130px;float:left;clear:left;} #divHomeMenu li {float:left;clear:left;} #divHomeMenu a {display:block;float:none; width:130px; height:0px; padding-top:78px; color:#000; overflow:hidden;} /* hack for older versions of IE with incorrect box model */ * html #divHomeMenu a:link, * html #divHomeMenu a:visited {height:78px; he\ight:0;} /* Step 8 - Adding the background images to the link tags */ /* HOMEPAGE LINKS */ #divHomeMenu a#item1 {background:transparent url(/assets/templates/default/img/paintings.gif) 0px 0px no-repeat;} #divHomeMenu a#item2 {background:transparent url(/assets/templates/default/img/installations.gif) 0px 0px no-repeat;} #divHomeMenu a#item3 {background:transparent url(/assets/templates/default/img/photos.gif) 0px 0px no-repeat;} #divHomeMenu a#item4 {background:transparent url(/assets/templates/default/img/drawings.gif) 0px 0px no-repeat;} #divHomeMenu a#item5 {background:transparent url(/assets/templates/default/img/prints.gif) 0px 0px no-repeat;} #divHomeMenu a#item6 {background:transparent url(/assets/templates/default/img/videos.gif) 0px 0px no-repeat;} #divHomeMenu a#item7 {background:transparent url(/assets/templates/default/img/collaborations.gif) 0px 0px no-repeat;} #divHomeMenu a#item8 {background:transparent url(/assets/templates/default/img/latest.gif) 0px 0px no-repeat;} #divHomeMenu a#item9 {background:transparent url(/assets/templates/default/img/profile.gif) 0px 0px no-repeat;} #divHomeMenu a#item10 {background:transparent url(/assets/templates/default/img/pr.gif) 0px 0px no-repeat;} #divHomeMenu a#item11 {background:transparent url(/assets/templates/default/img/collaborators.gif) 0px 0px no-repeat;} #divHomeMenu a#item12 {background:transparent url(/assets/templates/default/img/contact.gif) 0px 0px no-repeat;} #divHomeMenu a#item13 {background:transparent url(/assets/templates/default/img/mailing.gif) 0px 0px no-repeat;} * html #divHomeMenu a:hover {height:40px; he\ight:0;}