krad
05-04-2008, 08:25 AM
Ok so heres the issue.
I created a web template using Photoshop,
I'm trying to code a drop down menu using pre made images as the main menu.
The drop down background is another image.
I am having a hard time getting the whole thing to stay together. Heres my code.
---------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>Menu</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
font-family: Arial, sans-serif;
}
body {
margin: 20px;
font-size: 10px;
}
body {
behavior: url(csshover.htc);
}
ul {
list-style: none;
}
ul a {
color: #FFF;
text-decoration: none;
display: block;
padding: 5px 5px 5px 10px;
width: 100px;
background-image:url('images/bg.jpg')
}
ul a:hover {
color: #4BD8FF;
text-decoration: none;
background: #0c4065;
}
ul li {
border-bottom: 1px solid #FFF;
border-right: 1px solid #FFF;
float: left;
position: relative;
}
ul li ul {
list-style: none;
position: absolute;
left: 0;
top: 100%;
display: none;
width: 100px;
border-top: 1px solid #FFF;
}
ul li:hover ul li ul { display: none; }
ul li ul li:hover ul {
display: block;
position: absolute;
left: 115px;
top: -1px;
border-left: 1px solid #FFF;
}
ul li:hover ul { display: block; }
</style>
</head>
<!--Menu Start -->
<!-- Facility -->
<ul>
<li><a href="facility.html"><img border="0" src=images/Menu2_Facility.gif></a>
<ul>
<li><a href="#">Hour of Operation</a></li>
<li><a href="#">Access Requirements</a></li>
<li><a href="#">Amenities</a></li>
<li><a href="#">Reservations ></a>
<ul>
<li><a href="#">Facility Request Form</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<!-- Aquatics -->
<ul>
<li><a href="aquatics.html"><img border="0" src=images/Menu2_Aquatics.gif></a>
<ul>
<li><a href="#">Pool Hours</a></li>
<li><a href="#">Neptune Swimming & Diving</a></li>
<li><a href="#">Private Lessons</a></li>
<li><a href="#">AMR Classes</a></li>
</ul>
</li>
</ul>
------------------------------------------------------------------
I will appreciate any help or tips I can get.
I created a web template using Photoshop,
I'm trying to code a drop down menu using pre made images as the main menu.
The drop down background is another image.
I am having a hard time getting the whole thing to stay together. Heres my code.
---------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>Menu</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
font-family: Arial, sans-serif;
}
body {
margin: 20px;
font-size: 10px;
}
body {
behavior: url(csshover.htc);
}
ul {
list-style: none;
}
ul a {
color: #FFF;
text-decoration: none;
display: block;
padding: 5px 5px 5px 10px;
width: 100px;
background-image:url('images/bg.jpg')
}
ul a:hover {
color: #4BD8FF;
text-decoration: none;
background: #0c4065;
}
ul li {
border-bottom: 1px solid #FFF;
border-right: 1px solid #FFF;
float: left;
position: relative;
}
ul li ul {
list-style: none;
position: absolute;
left: 0;
top: 100%;
display: none;
width: 100px;
border-top: 1px solid #FFF;
}
ul li:hover ul li ul { display: none; }
ul li ul li:hover ul {
display: block;
position: absolute;
left: 115px;
top: -1px;
border-left: 1px solid #FFF;
}
ul li:hover ul { display: block; }
</style>
</head>
<!--Menu Start -->
<!-- Facility -->
<ul>
<li><a href="facility.html"><img border="0" src=images/Menu2_Facility.gif></a>
<ul>
<li><a href="#">Hour of Operation</a></li>
<li><a href="#">Access Requirements</a></li>
<li><a href="#">Amenities</a></li>
<li><a href="#">Reservations ></a>
<ul>
<li><a href="#">Facility Request Form</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<!-- Aquatics -->
<ul>
<li><a href="aquatics.html"><img border="0" src=images/Menu2_Aquatics.gif></a>
<ul>
<li><a href="#">Pool Hours</a></li>
<li><a href="#">Neptune Swimming & Diving</a></li>
<li><a href="#">Private Lessons</a></li>
<li><a href="#">AMR Classes</a></li>
</ul>
</li>
</ul>
------------------------------------------------------------------
I will appreciate any help or tips I can get.