Page is a not externally linkable
- Code, Content, and Presentation
-- CSS
---- bgsleight css hover problem


theylan - 4:04 pm on Jun 28, 2006 (gmt 0)


the files I've got are:

#navbar {
background-image: url(../images/nav.jpg);
background-repeat: no-repeat;
width: 608px;
height: 75px;
margin: 0;
padding: 0;
position: relative;
}

#navbar ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;

}

#navbar ul li {
position: absolute;
}

#navbar li ul {
position: absolute;
left: 0px;
top: 55px;
display: none;
}

#navbar ul li a {
display: block;
height: 83px;
width: 131px;
text-indent: -5000px;
text-decoration: none;

text-decoration: none;
color: #777;
/*background: transparent; */
padding: 5px;
border: none;
border-bottom: 0;
}

/* Holly Hack. IE Requirement \*/
* html ul li { float: bottom; height: 1%; }
* html ul li a { height: 1%; }
/* End */

#navbar li:hover ul, li.over ul { display: block; } /* The magic */

#btn01 {left: 50px;background: transparent url(../images/HOME1.png) no-repeat; }
#btn01 a:hover {background: transparent url(../images/HOME.png) no-repeat; }

#btn02 {left: 150px;background: transparent url(../images/about1.png) no-repeat; }
#btn02 a:hover {background: transparent url(../images/about.png) no-repeat; }

#btn03 {left: 250px;background: transparent url(../images/events1.png) no-repeat; }
#btn03 a:hover {background: transparent url(../images/events.png) no-repeat; }

#btn04 {left: 350px;background: transparent url(../images/shop1.png) no-repeat; }
#btn04 a:hover {background: transparent url(../images/shop.png) no-repeat; }

#btn05 {left: 450px;background: transparent url(../images/contact1.png) no-repeat; }
#btn05 a:hover {background: transparent url(../images/contact.png) no-repeat; }

#btn06 {background: transparent url(../images/instructor1.png) no-repeat; }
#btn06 a:hover {background: transparent url(../images/instructor.png) no-repeat; }

#btn07 {background: transparent url(../images/swimschool1.png) no-repeat; }
#btn07 a:hover {background: transparent url(../images/swimschool.png) no-repeat; }

#btn08 {background: transparent url(../images/facilities1.png) no-repeat; }
#btn08 a:hover {background: transparent url(../images/facilities.png) no-repeat; }

#btn09 {background: transparent url(../images/clients1.png) no-repeat; }
#btn09 a:hover {background: transparent url(../images/clients.png) no-repeat; }

#btn10 {background: transparent url(../images/gladiators1.png) no-repeat; }
#btn10 a:hover {background: transparent url(../images/gladiators.png) no-repeat; }

#btn11 {background: transparent url(../images/termtimes1.png) no-repeat; }
#btn11 a:hover {background: transparent url(../images/termtimes.png) no-repeat; }

a cut down version of the index just showing the menu bit that needs to be formatted - this doesn't really look how it would as it is missing most of the pictures, but you get the idea! :)
Thanks for your time!

[edited by: jatar_k at 4:34 pm (utc) on June 28, 2006]
[edit reason] added css file, no urls thanks [/edit]


Thread source:: http://www.webmasterworld.com/css/9316.htm
Brought to you by WebmasterWorld: http://www.webmasterworld.com