Tento kód vlož niekde do súboru s CSS - ak ho nemáš vytvorený, tak si ho vytvor, pomeuj ho
style.css a doň vlož tento kod čo som ti sem napísal.
Kód:
#hlavni
{
border: solid #333 1px;
background: url('96-1.jpg') left top no-repeat;
width: 800px;
height: 230px;
color: white;
font-size: 20px;
font-family: sans-serif;
}
ul, li
{
list-style: none;
margin: 0;
padding: 0;
}
ul.uroven1
{
width: 150px;
margin: 20px;
}
ul.uroven2
{
position: absolute;
width: 600px;
left: 149px;
top: -1px;
visibility: hidden;
}
li.uroven1
{
position: relative;
border: solid white 1px;
background: transparent url('96-3.png') left top repeat;
margin-bottom: -1px;
width: 149px;
margin-bottom: 3px;
behavior: url(hovermenu.htc);
}
li.uroven2
{
float: left;
width: 180px;
border: solid white 1px;
background: transparent url('96-2.png') left top repeat;
margin-right: -1px;
filter:alpha(opacity=80);
behavior: url(hovermenu.htc);
}
li a
{
display: block;
color: white;
text-decoration: none;
padding: .2em .5em;
_width: 149px; /* IE */
_height: 29px; /* IE */
}
li.uroven2 a
{
_width: 179px; /* IE */
}
li.uroven1:hover, li.uroven1Hover
{
background-image: url('96-2.png');
}
li.uroven2:hover, li.uroven2Hover
{
background-image: url('96-4.png');
}
ul.uroven1 li.uroven1Hover ul.uroven2,
ul.uroven1 li.uroven1:hover ul.uroven2
{
visibility: visible;
}
Tento kod vlož do svojho html súboru. Samozrejme si cesty uprav podla seba.
Kód:
<html>
<body>
<div id="hlavni">
<ul class="uroven1">
<li class="uroven1"><a href="#">sekce 1</a>
<ul class="uroven2">
<li class="uroven2"><a href="#">podsekce 1.1</a></li>
<li class="uroven2"><a href="#">podsekce 1.2</a></li>
</ul>
</li>
<li class="uroven1"><a href="#">sekce 2</a>
<ul class="uroven2">
<li class="uroven2"><a href="#">podsekce 2.1</a></li>
<li class="uroven2"><a href="#">podsekce 2.2</a></li>
<li class="uroven2"><a href="#">podsekce 2.3</a></li>
</ul>
</li>
<li class="uroven1"><a href="#">sekce 3</a>
<ul class="uroven2">
<li class="uroven2"><a href="#">podsekce 3.1</a></li>
</ul>
</li>
<li class="uroven1"><a href="#">sekce 4</a>
<ul class="uroven2">
<li class="uroven2"><a href="#">podsekce 4.1</a></li>
<li class="uroven2"><a href="#">podsekce 4.2</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Všetko to spolu nakopíruj na FTP spolu so súborom
hovermenu.htc
