MEGA MENU No 5
.
.
.
.
.
<style>
{margin:0; padding:0;}
body {color:#fff;font:14px arial;}
.container {margin:0px auto;position:relative;width:1490px;height:42px;background:none;}
ul#nav {display:block;float:left;font-family:Arial;font-size:14px;padding:3px;}
ul#nav,ul#nav ul {list-style:none;margin:0;}
ul#nav,ul#nav .subs {background:#333;border:1px solid #00FF00;border-radius:5px;-moz-border-radius:9px;-webkit-border-radius:5px;}
ul#nav .subs {background:#333;border:1px solid #00FF00;display:none;float:left;left:0;padding:3px;position:absolute;top:100%;width:400px;
border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;}
ul#nav li:hover>* {display:block;}
ul#nav li:hover {position:relative;}
ul#nav ul .subs {left:100%;position:absolute;top:0;}
ul#nav ul {padding:3px;}
ul#nav .col {float:left;width:50%;}
ul#nav li {display:block;float:left;font-size:12px;white-space:nowrap;}
ul#nav>li,ul#nav li {margin: 3px;}
ul#nav ul>li {margin:3px;}
ul#nav a:active,ul#nav a:focus {outline-style:none;}
ul#nav a {border-style:none;border-width:0;color:#FFF;cursor:pointer;display:block;font-size:12px;font-weight:bold;padding:5px 5px;
text-align:left;text-decoration:none;vertical-align:middle;}
ul#nav ul li {float:none;margin:5px;}
ul#nav ul a {background:#333;border-color:#00FF00;border-style:solid;border-width:0 0 1px;color:#FFF;font:12px arial;
padding:5px;text-align:left;text-decoration:none;border-radius:0;-moz-border-radius:0;-webkit-border-radius:0;}
ul#nav li:hover>a {border-style:none;color:#FFF;font:12px arial;font-weight:bold;text-decoration:none;}
ul#nav img {border:none;margin-right:5px;vertical-align:middle;}
ul#nav span {background-position:right center;background-repeat:no-repeat;display:block;overflow:visible;padding-right:0;}
ul#nav ul span {background-image:url("../images/arrow.png");padding-right:5px;}
ul#nav ul li:hover>a {border-color:#00FF00;border-style:solid;color:#FFF;font:12px arial;text-decoration:none;}
ul#nav > li >a {background:transparent;height:25px;line-height:25px;border-radius:8px;-moz-border-radius:5px;-webkit-border-radius:5px;}
ul#nav > li:hover > a {background:#333;line-height:25px;}
</style>
<div class="container">
<ul id="nav">
<li><a href="#">HOME</a></li>
<li><a href="#">MY POSTS ▼</a>
<div class="subs">
<div class="col">
<ul>
<li><a href="#">LINK-1</a></li>
<li><a href="#">LINK-2</a></li>
<li><a href="#">LINK-3</a></li>
<li><a href="#">LINK-4</a></li>
<li><a href="#">LINK-5</a></li>
</ul></div>
<div class="col">
<ul>
<li><a href="#">LINK-6</a></li>
<li><a href="#">LINK-7</a></li>
<li><a href="#">LINK-8</a></li>
<li><a href="#">LINK-9</a></li>
<li><a href="#">LINK-10</a></li></li>
</ul></div>
</div>
<li><a href="#">MY LINKS ▼</a>
<div class="subs">
<div class="col">
<ul>
<li><a href="#">LINK-1</a></li>
<li><a href="#">LINK-2</a></li>
<li><a href="#">LINK-3</a></li>
<li><a href="#">LINK-4</a></li>
<li><a href="#">LINK-5</a></li>
</ul></div>
<div class="col">
<ul>
<li><a href="#">LINK-6</a></li>
<li><a href="#">LINK-7</a></li>
<li><a href="#">LINK-8</a></li>
<li><a href="#">LINK-9</a></li>
<li><a href="#">LINK-10</a></li></li>
</ul></div>
</div>
<li><a href="#">MY ARTICLES ▼</a>
<div class="subs">
<div class="col">
<ul>
<li><a href="#">LINK-1</a></li>
<li><a href="#">LINK-2</a></li>
<li><a href="#">LINK-3</a></li>
<li><a href="#">LINK-4</a></li>
<li><a href="#">LINK-5</a></li>
</ul></div>
<div class="col">
<ul>
<li><a href="#">LINK-6</a></li>
<li><a href="#">LINK-7</a></li>
<li><a href="#">LINK-8</a></li>
<li><a href="#">LINK-9</a></li>
<li><a href="#">LINK-10</a></li></li>
</ul>
</div>
</div>
<li><a href="#">MY PHOTOS ▼</a>
<div class="subs">
<div class="col">
<ul>
<li><a href="#">LINK-1</a></li>
<li><a href="#">LINK-2</a></li>
<li><a href="#">LINK-3</a></li>
<li><a href="#">LINK-4</a></li>
<li><a href="#">LINK-5</a></li>
</ul></div>
<div class="col">
<ul>
<li><a href="#">LINK-6</a></li>
<li><a href="#">LINK-7</a></li>
<li><a href="#">LINK-8</a></li>
<li><a href="#">LINK-9</a></li>
<li><a href="#">LINK-10</a></li></li>
</ul>
</div>
</div>
<li><a href="#">MY VIDEOS ▼</a>
<div class="subs">
<div class="col">
<ul>
<li><a href="#">LINK-1</a></li>
<li><a href="#">LINK-2</a></li>
<li><a href="#">LINK-3</a></li>
<li><a href="#">LINK-4</a></li>
<li><a href="#">LINK-5</a></li>
</ul></div>
<div class="col">
<ul>
<li><a href="#">LINK-6</a></li>
<li><a href="#">LINK-7</a></li>
<li><a href="#">LINK-8</a></li>
<li><a href="#">LINK-9</a></li>
<li><a href="#">LINK-10</a></li></li>
</ul>
</div>
</div>
<li><a href="#">MY FILES ▼</a>
<div class="subs">
<div class="col">
<ul>
<li><a href="#">LINK-1</a></li>
<li><a href="#">LINK-2</a></li>
<li><a href="#">LINK-3</a></li>
<li><a href="#">LINK-4</a></li>
<li><a href="#">LINK-5</a></li>
</ul></div>
<div class="col">
<ul>
<li><a href="#">LINK-6</a></li>
<li><a href="#">LINK-7</a></li>
<li><a href="#">LINK-8</a></li>
<li><a href="#">LINK-9</a></li>
<li><a href="#">LINK-10</a></li></li>
</ul>
</div>
</div>
<li><a href="#">MY E-BOOKS ▼</a>
<div class="subs">
<div class="col">
<ul>
<li><a href="#">LINK-1</a></li>
<li><a href="#">LINK-2</a></li>
<li><a href="#">LINK-3</a></li>
<li><a href="#">LINK-4</a></li>
<li><a href="#">LINK-5</a></li>
</ul></div>
<div class="col">
<ul>
<li><a href="#">LINK-6</a></li>
<li><a href="#">LINK-7</a></li>
<li><a href="#">LINK-8</a></li>
<li><a href="#">LINK-9</a></li>
<li><a href="#">LINK-10</a></li></li>
</ul>
</div>
</div>
<li><a href="#">MY PRESENTATIONS ▼</a>
<div class="subs">
<div class="col">
<ul>
<li><a href="#">LINK-1</a></li>
<li><a href="#">LINK-2</a></li>
<li><a href="#">LINK-3</a></li>
<li><a href="#">LINK-4</a></li>
<li><a href="#">LINK-5</a></li>
</ul></div>
<div class="col">
<ul>
<li><a href="#">LINK-6</a></li>
<li><a href="#">LINK-7</a></li>
<li><a href="#">LINK-8</a></li>
<li><a href="#">LINK-9</a></li>
<li><a href="#">LINK-10</a></li></li>
</ul>
</div>
</div>
<li><a href="#">MY MUSIC ▼</a>
<div class="subs">
<div class="col">
<ul>
<li><a href="#">LINK-1</a></li>
<li><a href="#">LINK-2</a></li>
<li><a href="#">LINK-3</a></li>
<li><a href="#">LINK-4</a></li>
<li><a href="#">LINK-5</a></li>
</ul></div>
<div class="col">
<ul>
<li><a href="#">LINK-6</a></li>
<li><a href="#">LINK-7</a></li>
<li><a href="#">LINK-8</a></li>
<li><a href="#">LINK-9</a></li>
<li><a href="#">LINK-10</a></li></li>
</ul>
</div>
</div>
<li><a href="#">MY E-MAGAZINES ▼</a>
<div class="subs">
<div class="col">
<ul>
<li><a href="#">LINK-1</a></li>
<li><a href="#">LINK-2</a></li>
<li><a href="#">LINK-3</a></li>
<li><a href="#">LINK-4</a></li>
<li><a href="#">LINK-5</a></li>
</ul></div>
<div class="col">
<ul>
<li><a href="#">LINK-6</a></li>
<li><a href="#">LINK-7</a></li>
<li><a href="#">LINK-8</a></li>
<li><a href="#">LINK-9</a></li>
<li><a href="#">LINK-10</a></li></li>
</ul>
</div>
</div>
<li><a href="#">MY WIDGETS ▼</a>
<div class="subs">
<div class="col">
<ul>
<li><a href="#">LINK-1</a></li>
<li><a href="#">LINK-2</a></li>
<li><a href="#">LINK-3</a></li>
<li><a href="#">LINK-4</a></li>
<li><a href="#">LINK-5</a></li>
</ul></div>
<div class="col">
<ul>
<li><a href="#">LINK-6</a></li>
<li><a href="#">LINK-7</a></li>
<li><a href="#">LINK-8</a></li>
<li><a href="#">LINK-9</a></li>
<li><a href="#">LINK-10</a></li></li>
</ul></div>
</div>
<li><a href="#">FORUM</a></li>
<li><a href="#">CHAT</a></li>
<li><a href="#">RSS</a></li>
</ul>
