131 lines
4.0 KiB
HTML
Executable File
131 lines
4.0 KiB
HTML
Executable File
<!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>
|
|
<style type="text/css" media="screen">
|
|
/**************** menu coding *****************/
|
|
#menu {
|
|
width: 100%;
|
|
background: #eee;
|
|
float: left;
|
|
}
|
|
|
|
#menu ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 12em;
|
|
float: left;
|
|
border:1px solid #66667E;
|
|
border:1px solid #919B9C;
|
|
}
|
|
|
|
#menu a, #menu h2 {
|
|
font: normal 8pt sans-serif;
|
|
display: block;
|
|
margin: 0;
|
|
padding: 2px 3px;
|
|
}
|
|
|
|
#menu a {
|
|
color: #000;
|
|
background: #efefef;
|
|
text-decoration: none;
|
|
}
|
|
|
|
#menu a:hover {
|
|
color: #a00;
|
|
background: #fff;
|
|
}
|
|
|
|
#menu li {position: relative;}
|
|
|
|
#menu ul ul {
|
|
position: absolute;
|
|
z-index: 500;
|
|
}
|
|
|
|
#menu ul ul ul {
|
|
position: absolute;
|
|
top: 5px;
|
|
left: 99%;
|
|
}
|
|
.bdLeft
|
|
{
|
|
border:4px solid red;
|
|
}
|
|
div#menu ul ul, div#menu ul li:hover ul ul, div#menu ul ul li:hover ul ul
|
|
{
|
|
display: none;
|
|
}
|
|
|
|
div#menu ul li:hover ul, div#menu ul ul li:hover ul, div#menu ul ul ul li:hover ul
|
|
{
|
|
display: block;
|
|
}
|
|
|
|
</style><!--[if IE]>
|
|
<style type="text/css" media="screen">
|
|
#menu ul li {float: left; width: 100%;}
|
|
</style>
|
|
<![endif]-->
|
|
</head>
|
|
<body>
|
|
<div id="menu">
|
|
<ul>
|
|
<li><h2>Padre</h2>
|
|
<ul>
|
|
<li><a href="#">Hijo</a>
|
|
<ul>
|
|
<li><a href="#">Nieto1</a></li>
|
|
<li><a href="#">Nieto2</a></li>
|
|
<li><a href="#">Nieto3</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
<ul>
|
|
<li><h2>Vertical CSS Pop-Out Menu</h2>
|
|
<ul>
|
|
<li><a href="http://www.seoconsultants.com/css/menus/vertical/" title="SEO Consultants Vertical Example">SEO Consultants Sample</a></li>
|
|
<li><a href="http://www.tanfa.co.uk/css/examples/menu/vs7.asp" title="Complete Example">tanfa Demo example</a>
|
|
<ul>
|
|
<li><a href="http://www.tanfa.co.uk/css/examples/menu/tutorial-v.asp" title="Vertical Menu Tutorial">tanfa Tutorial</a>
|
|
<ul>
|
|
<li><a href="http://www.tanfa.co.uk/css/examples/menu/vs1.asp" title="Vertical Menu - Page 1">Stage 1</a></li>
|
|
<li><a href="http://www.tanfa.co.uk/css/examples/menu/vs2.asp" title="Vertical Menu - Page 2">Stage 2</a></li>
|
|
<li><a href="http://www.tanfa.co.uk/css/examples/menu/vs3.asp" title="Vertical Menu - Page 3">Stage 3</a></li>
|
|
<li><a href="http://www.tanfa.co.uk/css/examples/menu/vs4.asp" title="Vertical Menu - Page 4">Stage 4</a></li>
|
|
<li><a href="http://www.tanfa.co.uk/css/examples/menu/vs5.asp" title="Vertical Menu - Page 5">Stage 5</a></li>
|
|
<li><a href="http://www.tanfa.co.uk/css/examples/menu/vs6.asp" title="Vertical Menu - Page 6">Stage 6</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
|
|
<ul>
|
|
<li><h2>Horizontal Drop & Pop Menu</h2>
|
|
<ul>
|
|
<li><a href="http://www.seoconsultants.com/css/menus/horizontal/" title="SEO Consultants Directory Example">SEO Consultants Sample</a></li>
|
|
<li><a href="http://www.tanfa.co.uk/css/examples/menu/hs7.asp">tanfa Demo example</a><!-- fully working sample -->
|
|
<ul>
|
|
<li><a href="http://www.tanfa.co.uk/css/examples/menu/tutorial-h.asp" title="Horizontal Menu Tutorial">tanfa Tutorial</a>
|
|
<ul>
|
|
<li><a href="http://www.tanfa.co.uk/css/examples/menu/hs1.asp" title="Horizontal Menu - Page 1">Stage 1</a></li>
|
|
<li><a href="http://www.tanfa.co.uk/css/examples/menu/hs2.asp" title="Horizontal Menu - Page 2">Stage 2</a></li>
|
|
<li><a href="http://www.tanfa.co.uk/css/examples/menu/hs3.asp" title="Horizontal Menu - Page 3">Stage 3</a></li>
|
|
<li><a href="http://www.tanfa.co.uk/css/examples/menu/hs4.asp" title="Horizontal Menu - Page 4">Stage 4</a></li>
|
|
<li><a href="http://www.tanfa.co.uk/css/examples/menu/hs5.asp" title="Horizontal Menu - Page 5">Stage 5</a></li>
|
|
<li><a href="http://www.tanfa.co.uk/css/examples/menu/hs6.asp" title="Horizontal Menu - Page 6">Stage 6</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</body></html> |