Tohle horizontální menu jsme používal. + malý JavaScript. Moc se mi však nelíbilo:
<!-- [Horizontální menu] -->
<SCRIPT type=text/javascript>
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</SCRIPT>
<STYLE type=text/css>BODY {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: white; PADDING-BOTTOM: 0px; MARGIN: 0px; FONT: 80% verdana, arial, sans-serif; PADDING-TOP: 0px
}
DL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
DT {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
DD {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
UL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
LI {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
#menu {
Z-INDEX: 100; LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px
}
#menu DL {
FLOAT: left; WIDTH: 15em
}
#menu DT {
BORDER-RIGHT: gray 1px solid; BORDER-TOP: gray 1px solid; FONT-WEIGHT: bold; BACKGROUND: #ccc; MARGIN: 1px; BORDER-LEFT: gray 1px solid; CURSOR: pointer; BORDER-BOTTOM: gray 1px solid; TEXT-ALIGN: center
}
#menu DD {
BORDER-RIGHT: gray 1px solid; BORDER-TOP: gray 1px solid; BORDER-LEFT: gray 1px solid; BORDER-BOTTOM: gray 1px solid
}
#menu LI {
BACKGROUND: #fff; TEXT-ALIGN: center
}
#menu LI A {
BORDER-RIGHT: 0px; BORDER-TOP: 0px; DISPLAY: block; BORDER-LEFT: 0px; COLOR: #000; BORDER-BOTTOM: 0px; HEIGHT: 100%; TEXT-DECORATION: none
}
#menu DT A {
BORDER-RIGHT: 0px; BORDER-TOP: 0px; DISPLAY: block; BORDER-LEFT: 0px; COLOR: #000; BORDER-BOTTOM: 0px; HEIGHT: 100%; TEXT-DECORATION: none
}
#menu LI A:hover {
BACKGROUND: #eee
}
#menu DT A:hover {
BACKGROUND: #eee
}
#site {
BORDER-RIGHT: gray 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: gray 1px solid; PADDING-LEFT: 5px; Z-INDEX: 1; LEFT: 10px; PADDING-BOTTOM: 5px; BORDER-LEFT: gray 1px solid; COLOR: #000; PADDING-TOP: 5px; BORDER-BOTTOM: gray 1px solid; POSITION: absolute; TOP: 70px; BACKGROUND-COLOR: #ddd
}
A {
COLOR: #222; TEXT-DECORATION: none
}
</STYLE>
</head>
<BODY>
<DIV id=menu>
<DL>
<DT onmouseover="javascript:montre('smenu1');">Menu 1
<DD id=smenu1>
<UL>
<LI><A
href="http://www.#">Sous-Menu
1.1</A>
<LI><A
href="http://www.#">Sous-Menu
1.2</A>
<LI><A
href="http://www.#">Sous-Menu
1.3</A>
<LI><A
href="http://www.#">Sous-Menu
1.4</A>
<LI><A
href="http://www.#">Sous-Menu
1.5</A>
<LI><A
href="http://www.#">Sous-Menu
1.6</A> </LI></UL></DD></DL>
<DL>
<DT onmouseover="javascript:montre('smenu2');">Menu 2
<DD id=smenu2>
<UL>
<LI><A
href="http://www.#">Sous-Menu
2.1</A>
<LI><A
href="http://www.#">Sous-Menu
2.2</A>
<LI><A
href="http://www.#">Sous-Menu
2.3</A>
<LI><A
href="http://www.#">Sous-Menu
2.4</A> </LI></UL></DD></DL>
<DL>
<DT onmouseover="javascript:montre('smenu3');">Menu 3
<DD id=smenu3>
<UL>
<LI><A
href="http://www.#">Sous-Menu
3.1</A>
<LI><A
href="http://www.#">Sous-Menu
3.2</A>
<LI><A
href="http://www.#">Sous-Menu
3.3</A>
<LI><A
href="http://www.#">Sous-Menu
3.4</A>
<LI><A
href="http://www.#">Sous-Menu
3.5</A> </LI></UL></DD></DL>
</DIV>
[
http://www.pc-politika.com]