Как мога да направя така,че от това меню да излиза подменю?

TheGreatG

Registered
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>template_01</title>
<link rel="stylesheet" href="css/site.css">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>New Document</title>
<style type="text/css">
html, body {
color: #fff; background: inherit;
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
}

#menu {
width: 120px;
list-style-type: none;
margin: 0;
padding: 0;
}
#menu li {
height: 20px;
background-color: red;
cursor: pointer;
color: #fff;
padding-left: 5px;
}
#second {
display: none;
}
#second a {
display: block;
height: 20px;
background-color: darkred;
color: #fff;
padding-left: 5px;
}

</style>
<script type="text/javascript">
// JavaScript Document

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes;
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
</script>
<style type="text/css">
body {
font: normal 11px verdana;
}

ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}

ul li {
position: relative;
}

li ul {
position: absolute;
left: 149px; /* Set 1px less than menu width */
top: 0;
display: none;
}

/* Styles for Menu Items */
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */

li ul li a { padding: 2px 5px; } /* Sub Menu Styles */

li:hover ul, li.over ul { display: block; } /* The magic */
</style>
<style type="text/css">
html, body {
color: #fff; background: inherit;
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
}

#menu {
width: 120px;
list-style-type: none;
margin: 0;
padding: 0;
}
#menu li {
height: 20px;
background-color: red;
cursor: pointer;
color: #fff;
padding-left: 5px;
}
#second {
display: none;
}
#second a {
display: block;
height: 20px;
background-color: darkred;
color: #fff;
padding-left: 5px;
}

</style>

</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="780" border="0" align="center" cellpadding="10" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" background="images/h_bg.gif">
<tr>
<td width="12%" align="left" valign="top"><img src="images/h_1.jpg" alt="" width="103" height="183"></td>
<td width="79%" align="left" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="50"> </td>
</tr>
<tr>
<td><span class="style8">Company Name</span></td>
</tr>
<tr>
<td><span class="style5">Company's Slogan </span></td>
</tr>
</table></td>
<td width="9%" align="left" valign="top"><img src="images/h_2.jpg" alt="" width="190" height="183"></td>
</tr>

<tr>
<td colspan="3" align="left" valign="top" bgcolor="#FFFFFF"><img src="images/spacer.gif" alt="" width="1" height="7"></td>
</tr>
</table></td>
</tr>
<tr>
<td align="left" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/box_top.jpg" width="769" height="13" alt=""></td>
</tr>
<tr>
<td background="images/box_bg.jpg"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="160" align="center" valign="top"><table width="155" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><table width="100%" border="0" cellspacing="4" cellpadding="0">
<tr>
<td><table width="100%" border="0" cellpadding="0" cellspacing="0" class="bottomline" style="border-collapse:collapse">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="28" align="center"><img src="images/bullet.gif" width="14" height="14" alt=""></td>
<td><span class="style1"><a href="#">
Начало</a></span></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td><table width="100%" border="0" cellpadding="0" cellspacing="0" class="bottomline" style="border-collapse:collapse">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="28" align="center"><img src="images/bullet.gif" width="14" height="14" alt=""></td>
<td><span class="style1"><a href="www.sport1.bg">
Семейство котки</a></span></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td><table width="100%" border="0" cellpadding="0" cellspacing="0" class="bottomline" style="border-collapse:collapse">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="28" align="center"><img src="images/bullet.gif" width="14" height="14" alt=""></td>
<td><span class="style1"><a href="#">Reviews</a></span></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td><table width="100%" border="0" cellpadding="0" cellspacing="0" class="bottomline" style="border-collapse:collapse">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="28" align="center"><img src="images/bullet.gif" width="14" height="14" alt=""></td>
<td><span class="style1"><a href="#">Site Map </a></span></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td><table width="100%" border="0" cellpadding="0" cellspacing="0" class="bottomline" style="border-collapse:collapse">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="28" align="center"><img src="images/bullet.gif" width="14" height="14" alt=""></td>
<td><span class="style1"><a href="#">About Us </a></span></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td><table width="100%" border="0" cellpadding="0" cellspacing="0" class="bottomline" style="border-collapse:collapse">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="28" align="center"><img src="images/bullet.gif" width="14" height="14" alt=""></td>
<td><span class="style1"><a href="#">Contact Us </a></span></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="top"><table width="95%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2" align="center" valign="middle"><img src="images/spacer.gif" alt="" width="1" height="10"></td>
</tr>
<tr>
<td align="center" valign="middle"><img src="images/bullet1.gif" width="16" height="16" alt=""></td>
<td width="133"><span class="style2"> Latest News</span></td>
</tr>
<tr>
<td colspan="2" align="center" valign="middle"><img src="images/spacer.gif" alt="" width="1" height="10"></td>
</tr>
<tr>
<td colspan="2" align="center" valign="middle" background="images/dots.gif"><img src="images/spacer.gif" alt="" width="1" height="1"></td>
</tr>
<tr>
<td colspan="2" align="center" valign="middle"><img src="images/spacer.gif" alt="" width="1" height="8"></td>
</tr>
</table></td>
</tr>
<tr>
<td><span class="style4">Lorem ipsum dolor</span><span class="style11"> sit amet, consectetuer adipiscing elit. Cum sociis natoque adipi scing elit. Cum<br>
</span><span class="style4">                 <a href="#" class="orange_link">more info »</a></span></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td background="images/dots.gif"><img src="images/spacer.gif" alt="" width="1" height="1"></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td><span class="style4">Lorem ipsum dolor</span><span class="style11"> sit amet, consectetuer adipiscing elit. Cum sociis natoque adipi scing elit. Cum<br>
</span><span class="style4">                 <a href="#" class="orange_link">more info »</a></span></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td background="images/dots.gif"><img src="images/spacer.gif" alt="" width="1" height="1"></td>
</tr>
<tr>
<td> </td>
</tr>

<tr>
<td><span class="style4">Lorem ipsum dolor</span><span class="style11"> sit amet, consectetuer adipiscing elit. Cum sociis natoque adipi scing elit. Cum<br>
</span><span class="style4">                 <a href="#" class="orange_link">more info »</a></span></td>
</tr>
<tr>
<td class="bottomline"> </td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="top"><table width="95%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2" align="center" valign="middle"><img src="images/spacer.gif" alt="" width="1" height="10"></td>
</tr>
<tr>
<td align="center" valign="middle"><img src="images/bullet1.gif" width="16" height="16" alt=""></td>
<td width="133"><span class="style2"> Latest News</span></td>
</tr>
<tr>
<td colspan="2" align="center" valign="middle"><img src="images/spacer.gif" alt="" width="1" height="10"></td>
</tr>
<tr>
<td colspan="2" align="center" valign="middle" background="images/dots.gif"><img src="images/spacer.gif" alt="" width="1" height="1"></td>
</tr>
<tr>
<td colspan="2" align="center" valign="middle"><img src="images/spacer.gif" alt="" width="1" height="8"></td>
</tr>
</table></td>
</tr>
<tr>
<td><div align="justify" class="style11">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penat ibus et magnis dis parturient montes, nascetur ridiculus mus. Sed nonummy, sem rhoncus tempor.</div></td>
</tr>
<tr>
<td> </td>
</tr>
</table></td>
</tr>
</table></td>
<td align="center" valign="top"><table width="92%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="35"><span class="style10">Welcome To Our Company</span></td>
</tr>
<tr>
<td background="images/dots.gif"><img src="images/spacer.gif" alt="" width="1" height="1"></td>
</tr>
<tr>
<td><img src="images/spacer.gif" alt="" width="1" height="6"></td>
</tr>
<tr>
<td class="style3"><strong>Lorem ipsum dolor sit amet,</strong> consec tetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculusmus. Sed nonummy, sem rhoncus tempor accumsan, justo enim bibendum ipsum, eget sagittis nunc felis sed orci. Morbi mi eros, ultrices<br>
vitae, consequat nec, consequat at, augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Fuscedapibus sapien eu nunc. Sed wisi odio, lobortis id, sagittis eque penatibus et magnis dis parturient montes, nascetur ridiculusmus. Sed nonummy, sem rhoncus tempor accumsan, justo enim bibendum ipsum, eget sagittis nunc felis sed orci. Morbi mi eros, ultrices<br>
vitae, consequat nec, consequat at, augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Fuscedapibus sapien eu nunc. Sed wisi odio, lobortis id, sagittis eget.<br>
sapien, volutpat in, rhoncus a, laoreet quis, est. Fusce massa sem, malesuada eget, condimentum vel, suscipit in, justo. Cum sociis natoquepenatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas a ante a sem pretium fermentum. Sed lacinia magna eget urna</span><br>
<br>
<strong>Lorem ipsum dolor sit amet</strong><br>
consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculusmus. Sed nonummy, sem rhoncus tempor accumsan, justo enim bibendum ipsum, eget sagittis nunc felis sed orci. Morbi mi eros, ultrices<br>
vitae, consequat nec, consequat at, augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Fuscedapibus sapien eu nunc. Sed wisi odio, lobortis id, sagittis eget, semper accumsan, augue. Etiam et augue. In viverra semper eros. Nunc diam

sapien, volutpat in, rhoncus a, laoreet quis, est. Fusce massa sem, malesuada eget, condimentum vel, suscipit in, justo. Cum sociis natoquepenatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas a ante a sem pretium fermentum. Sed lacinia magna eget urna<br>
Fusce ut purus quis odio vehicula ornare. Duis bibendum justo nec tortor. Sed neque wisi, gravida sit amet, fringilla eu, consectetuer suscipit,pede. Ut tristique leo eu quam. Fusce nunc lacus, ultricies sed, tincidunt sed, hendrerit quis, ante. In imperdiet. Sed quis leo. Nullam mollis nim vel odio. Cras tincidunt elementum massa. Phasellus consequat, ligula id aliquam tempor, pede mauris fermentum velit, non dignissim <br>
apien neque ut justo. Nulla mauris ipsum, lacinia eu, consectetuer ut, tincidunt ac, mi. Integer ut sapien ut diam tristique ornare. Sed iaculis <br>
urpis sit amet orci. <br>
</p>
<br></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td><img src="images/box_bottom.jpg" width="769" height="18" alt=""></td>
</tr>
</table></td>
</tr>
<tr>
<td align="center"><img src="images/spacer.gif" alt="" width="1" height="5"></td>
</tr>
<tr>
<td height="30" align="center" bgcolor="#CCCFBC"><span class="style12">Copyright © 2006 Company Name Inc. All rights reserved. </span></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
 

Back
Горе