http://store.picbg.net/pubpic/D4/AB/4863406d4142d4ab.png
Кодът на страницата:
Кодът на страницата:
HTML:
<!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></TITLE>
<script type="text/javascript">
<![CDATA[//><!]]>
</script>
<style type="text/css">
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:x-small;
}
* html body{
font-size:xx-small;
f\ont-size:x-small;
}
nav_vertical ul {
margin: 0;
padding: 0;
list-style: none;
width:173px
float: left;
margin: 14px 0 0 7px;
display: inline;
padding: 0;
list-style-type: none;
}
ul li {
position: relative;
width:171px;
border: none
}
/* keep folowing styles together..........................*/
* html ul ul {
margin-left:-16px;/* ie5 fix */
voice-family: "\"}\"";
voice-family: inherit;
}
* html ul li {float:left;/* hide float from ie5*/}
* html ul ul {
width:173px;
w\idth:171px;
voice-family: "\"}\"";
voice-family: inherit;
}
* html ul ul {margin-left:0;/* hide margin from ie5*/}
/* keep above styles together .............*/
li ul {
position: relative;
display:none;
}
li ul li {
width:171px;
border: none
}
/* Styles for Menu Items */
ul li a {
display:block;
text-decoration: none;
background: #ccdbe9; /* IE6 Bug */
border-bottom: 1px solid #ccdbe9;
font-size: 12px;
padding-top: 7px;
padding-left: 21px;
padding-right: 8px;
padding-bottom: 7px;
color: Black;
border-left: 1px solid #ecf3f9;
border-right: 1px solid #ecf3f9;
}
li li a { background:#ecf3f9; }
ul li.level1 { border-top: 1px solid white; }
/* set dropdown to default */
li:hover li a {
background-color: #ecf3f9;
font-size: 12px;
padding-top: 7px;
padding-left: 21px;
padding-right: 8px;
padding-bottom: 7px;
color: Black;
border-left: 1px solid #ecf3f9;
border-right: 1px solid #ecf3f9;
}
/* this sets all hovered lists to red */
li a:hover { background-color: #ccdbe9; }
li:hover li a:hover {
color: #494848;
background-color: white;
border-left: 1px solid #ccdbe9;
border-right: 1px solid #ccdbe9;
}
li ul li { } /* Sub Menu Styles */
li.on ul { display:block } /* The magic */
li.off ul{display:none}
</style>
</head>
<body>
<ul id="nav_vertical">
<li class='level1'><a href='#'>Име на категорията 1 ></a>
<ul>
<li class='level2'><a href='view.php?pages=1'>страница 1</a></li>
</ul>
<ul>
<li class='level2'><a href='view.php?pages=7'>страница 2</a></li>
</ul>
<ul>
<li class='level2'><a href='view.php?pages=8'>страница 3</a></li>
</ul>
<li class='level1'><a href='#'>Име на категорията 2 ></a>
<ul>
<li class='level2'><a href='view.php?pages=6'>страница 1</a></li>
</ul>
</ul>