Hola a todos,
Aprovecho para presentarme en el foro y de paso felicitares por este magnifico foro.
Bien nauix26 creo que te falta un script.js que haga funcionar el menú, te dejo 3 scripts para que los estudies haber que te parecen.
index.html
<head>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
</head>
<body>
<div class="nav">
<ul class="artmenu">
<li><a href="#" class="{ActiveItem}"><span><span>Home</span></span></a></li>
<li><a href="#"><span><span>About</span></span></a>
<ul>
<li><a href="#">Photos</a></li>
<li><a href="#">Press</a></li>
</ul>
</li>
<li><a href="#"><span><span>Services</span></span></a></li>
<li><a href="#"><span><span>Solutions</span></span></a>
<ul>
<li><a href="#">Consulting</a>
<ul>
<li><a href="#">Lorem ipsum</a> </li>
<li><a href="#">Dolor sit amet</a> </li>
<li><a href="#">Consectetuer</a> </li>
</ul>
</li>
<li><a href="#">Training</a></li>
<li><a href="#">Analisys</a></li>
</ul>
</li>
<li><a href="#"><span><span>Contact</span></span></a></li>
</ul>
<div class="l">
</div>
<div class="r">
<div>
</div>
</div>
</div>
</body>
</html>
script.js
/* begin Menu */
function Insert_Separators()
{
var menus = xGetElementsByClassName("artmenu", document);
for (var i = 0; i < menus.length; i++) {
var menu = menus[i];
var childs = menu.childNodes;
var listItems = [];
for (var j = 0; j < childs.length; j++){
var el = childs[j];
if (String(el.tagName).toLowerCase() == "li")listItems.push(el);
}
for (var j = 0; j < listItems.length - 1; j++){
var span = document.createElement('span');
span.className = 'separator';
var li = document.createElement('li');
li.appendChild(span);
listItems[j].parentNode.insertBefore(li, listItems[j].nextSibling);
}
}
}
artLoadEvent.add(Insert_Separators);
/* end Menu */
style.css
/* begin Page */
body
{
margin: 0 auto;
padding: 0;
background-color: #39413D;
background-image: url('images/Page-BgTexture.jpg');
background-repeat: repeat-x;
background-attachment: fixed;
background-position: bottom left;
}
.Main
{
position: absolute;
width: 100%;
left: 0;
top: 0;
}
.cleared
{
float: none;
clear: both;
margin: 0;
padding: 0;
border: none;
font-size:1px;
}
.artmenu a, .artmenu a:link, .artmenu a:visited, .artmenu a:hover
{
text-align:left;
text-decoration:none;
outline:none;
letter-spacing:normal;
word-spacing:normal;
}
.artmenu, .artmenu ul
{
margin: 0;
padding: 0;
border: 0;
list-style-type: none;
display: block;
}
.artmenu li
{
margin: 0;
padding: 0;
border: 0;
display: block;
float: left;
position: relative;
z-index: 5;
background:none;
}
.artmenu li:hover
{
z-index: 10000;
white-space: normal;
}
.artmenu li li
{
float: none;
}
.artmenu ul
{
visibility: hidden;
position: absolute;
z-index: 10;
left: 0;
top: 0;
background:none;
}
.artmenu li:hover>ul
{
visibility: visible;
top: 100%;
}
.artmenu li li:hover>ul
{
top: 0;
left: 100%;
}
.artmenu:after, .artmenu ul:after
{
content: ".";
height: 0;
display: block;
visibility: hidden;
overflow: hidden;
clear: both;
}
.artmenu, .artmenu ul
{
min-height: 0;
}
.artmenu ul
{
background-image: url(images/spacer.gif);
padding: 10px 30px 30px 30px;
margin: -10px 0 0 -30px;
}
.artmenu ul ul
{
padding: 30px 30px 30px 10px;
margin: -30px 0 0 -10px;
}
/* menu structure */
.nav
{
position: relative;
margin: 0 auto;
width: 1000px;
height: 25px;
z-index: 100;
}
.artmenu
{
padding: 0px 0px 0px 0px;
}
.nav .l, .nav .r, .nav .r div
{
top: 0;
position: absolute;
z-index: -1;
overflow: hidden;
height: 25px;
}
.nav .l
{
left: 0;
right: 0px;
}
.nav .r
{
right: 0;
width: 0px;
}
.nav .r div
{
width: 1000px;
right: 0;
}
.nav .l, .nav .r div
{
background-position: left top;
background-repeat: no-repeat;
background-image: url('images/nav.png');
}
/* end Menu */
/* begin MenuItem */
.artmenu ul li
{
clear: both;
}
.artmenu a , .artmenu a span
{
height: 25px;
display: block;
}
.artmenu a
{
cursor: pointer;
text-decoration: none;
margin-right: 0px;
margin-left: 0px;
}
.artmenu a span span
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
color: #FE9D5D;
padding: 0 22px;
margin: 0 0px;
line-height: 25px;
text-align: center;
background-image: url('images/item-center.png');
background-position: left top;
background-repeat: repeat-x;
}
.artmenu a:hover span span
{
color: #EFF1F0;
background-position: left -25px;
}
.artmenu li:hover a span span
{
color: #EFF1F0;
background-position: left -25px;
}
/* end MenuItem */
/* begin MenuSeparator */
.nav .separator
{
display: block;
width: 1px;
height: 25px;
background-image: url('images/item-separator.png');
}
/* end MenuSeparator */
/* begin MenuSubItem */
.artmenu ul a
{
display:block;
text-align: center;
white-space: nowrap;
height: 21px;
width: 176px;
overflow:hidden;
line-height: 21px;
margin-right: auto;
background-image: url('images/subitem-bg.png');
background-position: left top;
background-repeat: repeat-x;
border-width: 1px;
border-style: solid;
border-color: #FE6601;
}
.nav ul.artmenu ul span, .nav ul.artmenu ul span span
{
display: inline;
float: none;
margin: inherit;
padding: inherit;
background-image: none;
text-align: inherit;
text-decoration: inherit;
}
.artmenu ul a, .artmenu ul a:link, .artmenu ul a:visited, .artmenu ul a:hover, .artmenu ul a:active, .nav ul.artmenu ul span, .nav ul.artmenu ul span span
{
text-align: left;
text-indent: 12px;
text-decoration: none;
line-height: 21px;
color: #000000;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
}
.artmenu ul ul a
{
margin-left: auto;
}
.artmenu ul li a:hover
{
color: #E9ECEB;
border-color: #FE8534;
background-position: 0 -21px;
}
.artmenu ul li:hover>a
{
color: #E9ECEB;
border-color: #FE8534;
background-position: 0 -21px;
}
.nav .artmenu ul li a:hover span, .nav .artmenu ul li a:hover span span
{
color: #E9ECEB;
}
.nav .artmenu ul li:hover>a span, .nav .artmenu ul li:hover>a span span
{
color: #E9ECEB;
}
/* end MenuSubItem */
Copialos en el mismo directorio y prueba.
salu2