DD MegaMenu1

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="#" class="modifyuser"><span>Hola! John</span></a>
    </li>
    
    <!--<li><span>
        <a href="#" class="modifyuser">
            Hola! John
        </a>
        </span>
    </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>

CSS

#header {
    height: 100px;
    width: 750px;
    margin-left: 5px;
    position: relative;
    background-color:green;
}
#solidmenu{
    width: 450px;
    /*height: 34px;*/
    float: left;
    text-align: left;
    background-color:Orange;        
}
a.modifyuser span {
    background: url("http://i.imgur.com/XCpC4.png") no-repeat scroll 2px -1px transparent;
    margin-left: -12px;     
    padding: 0 0 0 30px;
    font-size: 13px     
}
.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: white;
    padding: 8px 18px 8px  18px;
    text-decoration: none;
    border-right: 1px solid white;
}

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

.solidblockmenu li a:hover, .solidblockmenu li a.selected {         /*Selected Tab style*/
    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;                                     
   width:auto;
}

.mega{
    width:300px;       /*default width mega menu*/
    padding:10px;
    position:absolute;
    visibility:hidden;
    border:2px solid black;
    border-top-width:1px;
    background:white;
    -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 within a mega menu*/
    float:left;
    width:49%;
}

.mega a{
   ...

JavaScript

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