Witam mam pytanie , co do danego menu w css czy ma ktoś pomysł jak zrobić by było ono rozwijane ?
// Mam nadzieje ze dobry dział
HTML
<dl id="menudemo11">
<dd><a href="#">1st menu link</a><span class="pointer"><img src="img/menupointer.gif" alt="pointer" /></span></dd>
<dd><a href="#">2nd menu link</a><span class="pointer"><img src="img/menupointer.gif" alt="pointer" /></span></dd>
<dd><a href="#">another link</a><span class="pointer"><img src="img/menupointer.gif" alt="pointer" /></span></dd>
<dd><a href="#">the last link</a><span class="pointer"><img src="img/menupointer.gif" alt="pointer" /></span></dd>
<dt>navigate<span class="pointer"><img src="img/menupointer.gif" alt="pointer" /></span></dt>
</dl>
* {
margin: 0;
padding: 0;
}
#menudemo11 {
list-style: none;
width: 100%;
height: 100%;
background: #000;
overflow: hidden;
position: relative;
}
#menudemo11 dd,
#menudemo11 dt {
font-family: arial, sans-serif;
font-size: 10px;
letter-spacing: 1px;
color: #fff;
float: left;
padding: 16px 0 32px 0;
margin: 0 -16px 0 0;
background: url('img/menushadow.gif') bottom no-repeat;
position: relative;
/* little something for IE */
display: inline;
}
#menudemo11 dd:hover {
z-index: 1;
}
#menudemo11 a {
text-decoration: none;
color: #fff;
line-height: 16px;
float: left;
padding: 0 16px;
border-bottom: 1px solid #fff;
outline: none;
}
#menudemo11 a:hover {
color: #4CCED1;
}
#menudemo11 dd .pointer {
display: none;
}
#menudemo11 dd:hover .pointer,
#menudemo11 dt .pointer {
display: block;
position: absolute;
z-index: 1;
left: 50%;
top: 32px;
width: 2000px;
padding: 3px 0 0 0;
background: url('img/menudots.gif') repeat-x;
}
#menudemo11 dt {
line-height: 16px;
border-bottom: 1px solid #fff;
padding: 16px 16px 0 16px;
color: #4CCED1;
background: none;
}
#menudemo11 dt .pointer {
display: block;
border-top: 1px solid #4CCED1;
padding: 2px 0 0 0;
background: none;
z-index: 2;
}
#menudemo11 dd img,
#menudemo11 dt img {
display: block;
border: 0;
position: relative;
left: -3px;
}
#menudemo11 dt:hover img {
display: block;
}