WebSiteDeveloper Menu1

by NinjaSk8ter

HTML

<script src="http://www.virtualpetstore.com/js/ddmegamenu.js"></script>
<ul id="solidmenu" class="solidblockmenu">
  <li><a href="#">Incinio</a></li>
  <li><a href="#" rel="jkmenu">Empresa</a></li>
  <li><a href="#">Deserollo</a></li>
  <li><a href="#">Diseno</a></li>
  <li><a href="#" rel="loginsubmenu[left]">Moviles</a></li>
  <li><a href="#">Asociados</a></li>
  <li><a href="#">Contacto</a></li>
</ul>

<!--First mega menu (1) -->
<div id="jkmenu" class="mega solidblocktheme">
    <p style="margin:5px 0 10px 0">
       <b>Visit the areas of JavaScript Kit:</b>
    </p>
    <div class="column">
    <ul>
        <li><a href="#"  rel="freescripts">Free</a></li>
        <li><a href="#">JavaScript Tutorials</a></li>
        <li><a href="#">Free Java Applets</a></li>
    </ul>
    </div>
    <div class="column">
    <ul>
        <li><a href="#">JavaScript</a></li>
        <li><a href="#">DHTML</a></li>
        <li><a href="#">Web Design</a></li>
    </ul>
    </div>
    <br style="clear:left" />
    <p>Need help?<a href="#">Coding Forums</a> Now!</p>
</div>

<!--Second  mega menu (2) -->
<div id="loginsubmenu" class="loginmenu loginblocktheme">
    <div class="column">
    <ul>
        <li><a href="#">Modificar Cuenta</a></li>
        <li><a href="#">Modificar Contrasena</a></li>
    </ul>
    </div>
    <br style="clear:left" />
</div>

CSS

#header {
    height: 100px;
    width: 750px;
    margin-left: 5px;
    position: relative;
    background-color:green;
}
#solidmenu{
    width: 675px;
    /*height: 34px;*/
    float: left;
    text-align: left;
    background-color:Orange;        
}

.solidblockmenu {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    float: left;
    font-weight: bold; 
    font-size: 14px;
    font-family: Arial;
    /*width: 100%;*/
    width: 675px;
    overflow: hidden;
    margin-bottom: 1em;
    border: 1px solid #625e00;
    border-width: 1px 0;
    background: black url("http://i.imgur.com/iTqzs.gif") center center repeat-x;
}

.solidblockmenu li {
    display: inline;
}

.solidblockmenu li a{
    float: left;
    color: red;
    padding: 8px 18px 8px  18px;
    text-decoration: none;
    border-right: 1px solid white;
}

.solidblockmenu li a:visited {
    color: green;
}

.solidblockmenu li a:hover, .solidblockmenu li a.selected{   
    color: white;
    background: transparent url("http://i.imgur.com/mjYcj.gif") center center repeat-x;
}

.solidblocktheme {                    
    border:5px solid #cd0000;
    padding:0;                                 
}

.solidblocktheme p, .solidblocktheme .column {
   padding:5px;                                       
   background-color: navy; 
   width:auto;
}

.mega{
    width:300px;       /*default width mega menu*/
    padding:10px;
    position:absolute;
    visibility:hidden;
    border:2px solid black;
    border-top-width:1px;
    background-color: yellow;
    -webkit-box-shadow: 5px 5px 5px #c8c8c8;    
    -moz-box-shadow: 5px 5px 5px #c8c8c8;
    box-shadow: 5px 5px 5px #c8c8c8;
}

.mega .column {   /*each link column mega menu*/
    float:left;
    width:49%;
    background-color:purple;
}

.mega a{
    text-decoration:none;
}

.mega a[rel]:after{    /*add "down.png" to anchors, those rel attribute */
    content:" " url("http://i.imgur.com/m07Sq.png");
}

.mega .column ul {
    margin:0;
    margin-left:5px;
   ...

JavaScript

ddmegamenu.docinit({
    menuid:'solidmenu',
    dur:200 
})