css
@charset "UTF-8";
ul.MenuBarHorizontal{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
}
ul.MenuBarActive{
z-index: 1000;
}
ul.MenuBarHorizontal li{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: static;/*position: relative;*/
text-align: left;
cursor: pointer;
width: 8em;
float: left;
}
ul.MenuBarHorizontal ul{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 200px;
position: relative;
left: -1000em;
}
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible{
left: auto;
}
ul.MenuBarHorizontal ul li{
width: 200px;
}
ul.MenuBarHorizontal ul ul{
position: absolute;
margin: -5% 0 0 95%;
border: 1px solid #CCCCCC;
}
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible{
left: auto;
top: 0;
position: relative;
border: 1px solid #CCCCCC;
}
ul.MenuBarHorizontal ul{
border: 1px solid #CCCCCC;
}
ul.MenuBarHorizontal a{
display: block;
cursor: pointer;
background-color: #CCCCCC;
color: #666666;
text-decoration: none;
font-family:Verdana;
font-size: 10px;
height:auto;
}
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus{
background-color: #FFFFFF;
color: #0077c1;
}
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible{
background-color: #FFFFFF;
color: #0077c1;
}
ul.MenuBarHorizontal a.MenuBarItemSubmenu{
background-position: 666% 50%;
}
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover{
background-position: 666% 50%;
}
ul.MenuBarHorizontal iframe{
position: absolute;
z-index: 1010;
}
ul.MenuBarHorizontal .AzulNegrito{
background-color: #FFFFFF;
color: #0077c1;
text-decoration: none;
font-family:Verdana;
font-size: 11px;
font-weight:bold;
padding-top: 5px;
}
ul.MenuBarHorizontal .Cinza{
background-color: #FFFFFF;
color: ##0077c1;
text-decoration: none;
font-family:Verdana;
font-size: 10px;
padding-top: 5px;
padding-bottom: 5px;
}
ul.MenuBarHorizontal a.Cinza:hover, ul.MenuBarHorizontal a.Cinza:focus{
background-image: url(seta.gif);
background-repeat: no-repeat;
background-position: 10% 50%;
color: ##0077c1;
padding-top: 5px;
padding-bottom: 5px;
}
@media screen, projection{
ul.MenuBarHorizontal li.MenuBarItemIE{
display: inline;
f\loat: left;
background: #FFF;
}
}
.inicial{
background-image: url(separa.gif);
background-repeat: repeat-y;
background-position: right;
height: 15px;
}
#inicial{
width: 50px;
text-align:center;
padding-top: 3px;
}
.projeto{
background-image: url(separa.gif);
background-repeat: repeat-y;
background-position: right;
height: 15px;
}
#projeto{
width: 80px;
text-align:center;
padding-top: 3px;
}
.acompanhe{
background-image: url(separa.gif);
background-repeat: repeat-y;
background-position: right;
height: 15px;
}
#acompanhe{
width: 100px;
text-align:center;
padding-top: 3px;
}
.localize{
background-image: url(separa.gif);
background-repeat: repeat-y;
background-position: right;
height: 15px;
}
#localize{
width: 135px;
text-align:center;
padding-top: 3px;
}
.novidade{
background-image: url(separa.gif);
background-repeat: repeat-y;
background-position: right;
height: 15px;
}
#novidade{
width: 70px;
text-align:center;
padding-top: 3px;
}
.consulte{
background-image: url(separa.gif);
background-repeat: repeat-y;
background-position: right;
height: 15px;
}
#consulte{
width: 60px;
text-align:center;
padding-top: 3px;
}
.historico{
background-image: url(separa.gif);
background-repeat: repeat-y;
background-position: right;
height: 15px;
}
#historico{
width: 120px;
text-align:center;
padding-top: 3px;
}
#duvidas{
width: 140px;
text-align:center;
padding-top: 3px;
}
ul.MenuBarHorizontal a:hover.semDropDrown{
color:#FFFFFF;
background-color:#CCCCCC;
background-position: 666% 50%;
}html
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li id="inicial" class="inicial"><a href="#" class="semDropDrown">Inicial</a></li>
<li id="projeto" class="projeto"><a href="#">O Projeto</a>
<ul class="Azul">
<li class="Azul"><a class="Cinza" href="#"> 1</a></li>
<li class="Azul"><a class="Cinza" href="#"> 2</a></li>
</ul>
</li>
<li id="acompanhe" class="acompanhe"><a href="#">Acompanhe</a>
<ul>
<li class="AzulNegrito"> </li>
<li class="AzulNegrito"> Etapa 1:</li>
<li><a class="Cinza" href="?acompanhe=1"> 3</a></li>
<li><a class="Cinza" href="?acompanhe=2"> 4</a></li>
<li class="AzulNegrito"> </li>
<li class="AzulNegrito"> Etapa 2:</li>
<li><a class="Cinza" href="?acompanhe=11"> Aguarde</a></li>
</ul>
</li>
</ul>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
