CSS3 Mega levels Menu.txt

<style>
#menu {
z-index: 999;
	list-style:none;
	width:920px;
	margin:0 auto;
	height:45px;
	padding:5px 30px;
	/* rounded corners for different browser support */

    border-radius:5px 5px 0 0;
	-moz-border-radius:5px 5px 0 0;/*mozilla suport */
	-webkit-border-radius:5px 5px 0 0;/*Chrome and safari browsers*/
	/* css3 gradient */
    background:#444444;/**/
	background: -moz-linear-gradient(#444444, #111111) repeat scroll 0 0 transparent;
/*mozilla suport */
	background:-webkit-gradient(linear, left top, left bottom, from(#444444), to(#111111));
/*Chrome and safari browsers*/
	/* css3 borders */

    border: 1px solid #9C9C9C;
	box-shadow:inset 0px 0px 1px #e8edf0;/*general browsers supporting css3*/
	-moz-box-shadow:inset 0px 0px 3px #e8edf0;
/*mozilla suport */
	-webkit-box-shadow:inset 0px 0px 1px #e8edf0;
/*Chrome and safari browsers*/
}
#menu li {
z-index: 999;
	float:left;
	display:block;
	position:relative;
	text-align:center;
	padding:4px 10px;
	margin:7px 30px 0 0;
	border:none;
}

#menu li:hover {
z-index: 999;
	border:1px solid #b7b7b7;
	padding:4px 9px;
	/*rounded corners to the top left and right */
   border-radius:5px 5px 0 0;
	-moz-border-radius:5px 5px 0 0;
	-webkit-border-radius:5px 5px 0 0;
	/* css 3 gradient */
    background:#fff;/*a white background for browsers with no css3 support*/
	background: -moz-linear-gradient(center top, #FFFFFF, #EDEDED) repeat scroll 0 0 transparent;
/*Firefox browser */
	background:-webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#EDEDED));
/*Chrome and Safari browser */
}
#menu li a {
z-index: 999;
	font-size:14px;
	color: #999999;
	display:block;
	outline:0;
	text-decoration:none;
}
#menu li:hover a {
z-index: 999;
	color:#161616;
}

.menu-container-1, .menu-container-2, .menu-container-3, .menu-container-4 {
	margin:4px auto;
	float:left;
	position:absolute;
	left:-999em;
	text-align:left;
	padding:10px 5px;
	border:1px solid #b7b7b7;
	border-top:none;
	/* rounded corners */

    border-radius:0 5px 5px 5px;
	-moz-border-radius:0 5px 5px 5px;
	-webkit-border-radius:0 5px 5px 5px;
	/* gradient */
    background:#444444;
	background: -moz-linear-gradient(center top, #444444, #111111) repeat scroll 0 0 transparent;
	background:-webkit-gradient(linear, left top, left bottom, from(#444444), to(#111111));
}
.menu-container-1 {
z-index: 999;
	width:140px;
}
.menu-container-2 {
z-index: 999;
	width:280px;
}
.menu-container-3 {
z-index: 999;
	width:420px;
}
.menu-container-4 {
z-index: 999;
	width:560px;
}
#menu li:hover .menu-container-1, #menu li:hover .menu-container-2, #menu li:hover .menu-container-3, #menu li:hover .menu-container-4 {
z-index: 999;
	top:auto;
	left:-1px;
}
/* columns ici */

.column-1, .column-2 {
z-index: 999;
	display:inline;
	float:left;
	position:relative;
	margin:0 5px;
}
.column-1 {
z-index: 999;
	width:130px;
}
.column-2 {
z-index: 999;
	width:260px;
}
#menu .column-3 {
z-index: 999;
	width:390px;
}
#menu .column-4 {
z-index: 999;
	width:520px;
}
/* right menu */

#menu .menu-right {
z-index: 999;
	float:right;
	margin-right:0px;
}
#menu li .align-right {
	/*rounded corners */
    
    border-radius:5px 0 5px 5px;
	-moz-border-radius:5px 0 5px 5px;
	-webkit-border-radius:5px 0 5px 5px;
}
#menu li:hover .align-right {
z-index: 999;
	left:auto;
	right:-1px;
	top:auto;
}
/* menu h2, h3, p, etc.... */

#menu p, #menu h2, #menu h3, #menu ul li {
z-index: 999;
	line-height:21px;
	font-size:12px;
	text-align:left;
}
#menu p {
z-index: 999;
	line-height:18px;
	margin-bottom:10px;
	color:#F2E8E8;
}
#menu h3, #menu h2 {
z-index: 999;
	font-size:11px;
	margin:7px 0 14px 0;
	padding-bottom:5px;
	text-transform:uppercase;
	color: #999999;
}
#menu li:hover div a {
z-index: 999;
	box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
	color: #666666;
	font-size: 11px;
	padding-left: 6px;
}
#menu li:hover div a:hover {
z-index: 999;
	background: -moz-linear-gradient(#04ACEC, #0186BA) repeat scroll 0 0 transparent;
	background:-webkit-gradient(linear, left top, left bottom, from(#04ACEC), to(#0186BA));
	color: #FAFAFA;
	background:#04ACEC;
}
#menu li ul {
z-index: 999;
	box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
	list-style:none;
	padding:0;
	margin-bottom:12px;
}
#menu li ul li {
z-index: 999;
	float: none;
	font-size: 12px;
	line-height: 24px;
	margin: 0;
	padding: 0;
	position: relative;
	text-align: left;
	width: 130px;
}
#menu li ul li:hover {
z-index: 999;
	background: none;
	border: medium none;
	margin: 0;
	padding: 0;
}
/* login here */

#menu .form {
z-index: 999;
	margin:10px 0 0 45px;
}
#menu input {
z-index: 999;
	color:#e9e9e9;
	font-size:12px;
	outline:0 none;
	padding:9px;
	/* gradient */
    background:#6e6e6e;
	background:-moz-linear-gradient(top, #888, #575757);
	background:-webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
	/* css3 borders */
    border:1px solid #555;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	/* css3 shadow effect */
    -moz-box-shadow:0 0 8px rgba(0, 0, 0, 0.1);
	-webkit-box-shadow:rgba(0, 0, 0, 0.1) 0px 0px 8px;
	box-shadow:rgba(0, 0, 0, 0.1) 0px 0px 8px;
}
#menu input:focus {
z-index: 999;
	background: none repeat scroll 0 0 #313131;
}
#menu input:hover {
z-index: 999;
	border-color: #000000;
}
#menu .submit input {
z-index: 999;
	background: -moz-linear-gradient(center top, #444444, #111111) repeat scroll 0 0 transparent;
	background:-webkit-gradient(linear, left top, left bottom, from(#444444), to(#111111));
	border-radius: 10px 10px 10px 10px;
	box-shadow: 0 0 1px #EDF9FF inset;
	color: #FADDDE;
	padding: 9px;
	width: 90px;
}
#menu .submit input:hover {
z-index: 999;
	background: -moz-linear-gradient(center top, #444444, #3D3A3A) repeat scroll 0 0 transparent;
	background:-webkit-gradient(linear, left top, left bottom, from(#444444), to(#3D3A3A));
	cursor: pointer;
}
#menu .submit input:active {
z-index: 999;
	background: -moz-linear-gradient(center top, #444444, #111111) repeat scroll 0 0 transparent;
	background:-webkit-gradient(linear, left top, left bottom, from(#444444), to(#111111));
	border: 1px solid #9C9C9C;
	color: #9C9C9C;
}

</style>

<ul id='menu'>
<li><a href='#'>Home</a>
    <div class='menu-container-2'> <!--Home Start -->

      <div class='column-2'>
        <h2>CSS 3 Menu</h2>
      </div>
      <div class='column-2'>
        <p>You can add links ,text , images  etc...</p>
      </div>
    </div>
    <!-- End Home -->
  </li>
  <li><a href='#'>Tutorials</a>
    <div class='menu-container-4'><!-- Start tutorial menu section ( 2nd menu ) -->

      <div class='column-1'>
        <h3>Microsoft Tech</h3>
        <ul>
          <li><a href='#'>Visual Basic .Net</a></li>
          <li><a href='#'>MS Visual C++</a></li>
          <li><a href='#'>C Sharp .Net</a></li>
          <li><a href='#'>ASP .Net</a></li>
          <li><a href='#'>Webservices</a></li>
        </ul>
      </div>
      <div class='column-1'>
        <h3>Multimedia Tools</h3>
        <ul>
          <li><a href='#'>Photoshop</a></li>
          <li><a href='#'>Dreamweaver</a></li>
          <li><a href='#'>After Effect</a></li>
          <li><a href='#'>Cinema 4D</a></li>
          <li><a href='#'>Flash</a></li>
        </ul>
      </div>
      <div class='column-1'>
        <h3>Web</h3>
        <ul>
          <li><a href='#'>PHP</a></li>
          <li><a href='#'>HTML / CSS</a></li>
          <li><a href='#'>Javascript</a></li>
          <li><a href='#'>ASP .Net</a></li>
          <li><a href='#'>Flex</a></li>
        </ul>
      </div>
      <div class='column-1'>
        <h3>Other</h3>
        <ul>
          <li><a href='#'>Blogging</a></li>
          <li><a href='#'>Wordpress</a></li>
          <li><a href='#'>Java</a></li>
          <li><a href='#'>Web 2.0</a></li>
          <li><a href='#'>XML</a></li>
        </ul>
      </div>
    </div>
  <!-- END tutorial menu section ( 2nd menu ) -->
  </li>
  <li><a href='#'>Latest Tuts</a>
    <div class='menu-container-2'><!-- Latest Tuts start -->

      <div class='column-2'>
        <h3>YouHack.me Tutorial</h3>
      </div>
      <div class='column-2'>
          <a href='#'>A title 1 here </a>
          <a href='#'>A title 2 here </a>
          <a href='#'>A title 3 here </a>
 </div>
    </div>
    <!-- Latest Tuts END -->
  </li>
  <li><a href='#'>How it works</a>
    <div class='menu-container-2'><!-- START - How it works-->

      <div class='column-1'>
        <h3>Users</h3>
        <ul>
          <li><a href='#'>Photoshop</a></li>
          <li><a href='#...