Menu
Ok, I’m very much new to this stuff, the following code is the first I’ve ever written. Please be kind… I get the logic of what I’m doing and how web sites work, but nowhere near enough experience to do things ‘the right way’!
Anyway I am trying to create a drop down ‘mega menu’ element using only CSS and html, with each drop down containing images, text and crucially links. I have created the effect I’m happy with, but as soon as I try and add links into the drop down divs the whole effect corrupts.
Is this even possible the way I have started to do this?
Here is the code (once working I’ll add to the main site and pop the CSS into the associated CSS for that site).
Effect working as should do:
[CODE]<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<style type=”text/css”>
<!–
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#apDiv4 {
position:relative;
width:375px;
height:115px;
z-index:1;
background-color:#FF33FF;
}
–>
</style>
</head>
<body>
<style type=”text/css”>
<!–
#apDiv1 {
position:absolute;
top:0px;
text-align:center;
font-family: tahoma;
font-size:12px;
font-weight:bold;
background-color:inherit;
border-right-width:1px;
border-right-style:groove;
width:149px;
border-right-color:#0390c8;
padding-right:-1px;
height:1em;
padding-bottom:1em;
padding-top:.7em;
z-index:1;
}
#apDiv2 {
position:absolute;
top:0px;
text-align:center;
font-family: tahoma;
font-size:12px;
font-weight:bold;
background-color:#009ddc;
border-right-width:1px;
border-right-style:groove;
width:9px;
border-right-color:#0390c8;
padding-right:-1px;
height:1em;
padding-bottom:1em;
padding-top:.7em;
z-index:1;
-moz-border-radius-topleft:4px;
-moz-border-radius-bottomleft:4px;
border-bottom-left-radius: 4px 4px;
border-bottom-left-radius: 4px 4px;
border-top-left-radius: 4px 4px;
border-top-left-radius: 4px 4px;
}
#apDiv3 {
position:absolute;
top:0px;
text-align:center;
font-family: tahoma;
font-size:12px;
font-weight:bold;
background-color:#009ddc;
border-right-width:1px;
border-right-style:groove;
width:9px;
border-right-color:#0390c8;
padding-right:-1px;
height:1em;
padding-bottom:1em;
padding-top:.7em;
z-index:1;
-moz-border-radius-topright:4px;
-moz-border-radius-bottomright:4px;
border-bottom-right-radius: 4px 4px;
border-bottom-right-radius: 4px 4px;
border-top-right-radius: 4px 4px;
border-top-right-radius: 4px 4px;
}
–>
</style>
<table width=”920px” border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td width=”10px”><p><a href=”#”><div id=”apDiv2″></div></td>
<td><p><a class=”style1″><div id=”apDiv1″>Aquarium</div><span class=”style1″>Pond stuff edf ewf ewfkew fe wf ewjfehfehuf ewhfehwofheohfoehwfo hewfew fhewfhoewhfoehwfo hwofheow hfoewhfewfhewhfo ewofh oewhfoe whf hewohfoewh fo ew </span></a>.</td>
<td><p><a href=”#” class=”style1″><div id=”apDiv1″>Pond</div><span class=”style1″>Pond stuff edf ewf ewfkew fe wf ewjfehfehuf ewhfehwofheohfoehwfo hewfew fhewfhoewhfoehwfo hwofheow hfoewhfewfhewhfo ewofh oewhfoe whf hewohfoewh fo ew fhehw f hewhf oewh fehwof heowih foehwfo hewofhoewhofihewi fhewih fioe wfo iew hfewioh fioew hfew hfoehfeowhfew hofi</span></a>.</td>
<td><p><a href=”#” class=”style1″><div id=”apDiv1″>Complete Aquariums</div><span class=”style1″>Pond stuff edf ewf ewfkew fe wf ewjfehfehuf ewhfehwofheohfoehwfo hewfew fhewfhoewhfoehwfo hwofheow hfoewhfewfhewhfo ewofh oewhfoe whf hewohfoewh fo ew fhehw f hewhf oewh fehwof heowih foehwfo hewofhoewhofihewi fhewih fioe wfo iew hfewioh fioew hfew hfoehfeowhfew hofi</span></a>.</td>
<td><p><a href=”#” class=”style2″><div id=”apDiv1″>Water Features</div><span class=”style1″>Pond stuff edf ewf ewfkew fe wf ewjfehfehuf ewhfehwofheohfoehwfo hewfew fhewfhoewhfoehwfo hwofheow hfoewhfewfhewhfo ewofh oewhfoe whf hewohfoewh fo ew fhehw f hewhf oewh fehwof heowih foehwfo hewofhoewhofihewi fhewih fioe wfo iew hfewioh fioew hfew hfoehfeowhfew hofi</span></a>.</td>
<td><p><a href=”#” class=”style2″><div id=”apDiv1″>Books</div><span class=”style1″>Pond stuff edf ewf ewfkew fe wf ewjfehfehuf ewhfehwofheohfoehwfo hewfew fhewfhoewhfoehwfo hwofheow hfoewhfewfhewhfo ewofh oewhfoe whf hewohfoewh fo ew fhehw f hewhf oewh fehwof heowih foehwfo hewofhoewhofihewi fhewih fioe wfo iew hfewioh fioew hfew hfoehfeowhfew hofi</span></a>.</td>
<td><p><a href=”#” class=”style2″><div id=”apDiv1″>biOrb</div><span class=”style1″>text text text text text text</span></a>
.</td>
<td width=”10px”><p><a href=”#”><div id=”apDiv3″></div></td>
</tr>
</table>
<style type=”text/css”>
<!–
.style1 {background-color: inherit;}
a.style1 {
text-decoration: none;
display:block;
color:#FFFFFF;
background-color: #009ddc;
}
a.style1:hover {
position: absolute;
top: 0px;
display:block;
color:#FFFFFF;
background-color: #0062a6;
}
a.style1 span {
display: none;
}
a.style1:hover span {
display: block;
position: absolute;
top: -1em;
/* formatting only styles */
padding: 5px; left: 0px; width:400px; margin-top:3em; z-index: 100;
background: #0062a6;
-moz-border-radius-bottomleft:12px;
-moz-border-radius-bottomright:12px;
-moz-border-radius-topleft:0px;
-moz-border-radius-topright:12px;
border-bottom-left-radius: 12px 12px;
border-bottom-left-radius: 12px 12px;
border-bottom-right-radius: 12px 12px;
border-bottom-right-radius: 12px 12px;
border-top-right-radius: 12px 12px;
border-top-right-radius: 12px 12px;
/* end formatting */
}
–>
</style>
<style type=”text/css”>
<!–
.style2 {background-color: inherit;}
a.style2 {
text-decoration: none;
display:block;
color:#FFFFFF;
background-color: #009ddc;
}
a.style2:hover {
position: absolute;
top: 0px;
display:block;
color:#FFFFFF;
background-color: #0062a6;
}
a.style2 span {
display: none;
}
a.style2:hover span {
display: block;
position: absolute;
top: -1em;
/* formatting only styles */
padding: 5px; right: -149px; width:400px; margin-top:3em; z-index: 100;
background: #0062a6;
-moz-border-radius-bottomleft:12px;
-moz-border-radius-bottomright:12px;
-moz-border-radius-topleft:12px;
-moz-border-radius-topright:0px;
border-bottom-left-radius: 12px 12px;
border-bottom-left-radius: 12px 12px;
border-bottom-right-radius: 12px 12px;
border-bottom-right-radius: 12px 12px;
border-top-left-radius: 12px 12px;
border-top-left-radius: 12px 12px;
/* end formatting */
}
–>
</style>
</p>
</body>
</html>
My problem is I cannot add any links into those hovering drop down boxes without losing everything – any help much appreciated in advance!
Thanks