CSS 3 Mega Dropdown Menu Tutorial, es un bonito tutorial para aquellos que venían pensando mejorar el menú de sus clientes. El objetivo de este tutorial, es poder crear un menú atractivo y más funcional, usando nuevos atributos de CSS3 para reducir aún más el uso de las imágenes.

Demo - Descarga - Info y Tutorial  CSS 3 Mega Dropdown


1 - HTML

PLAIN TEXT
HTML:
<div id="nav_wrapper">
    <span id="menu_start"><a href="#" class="home">Home</a></span>
    <ul id="topnav">           
        <li class="liSub">
            <a href="#">
                <span class="dd_wrapper">
                    Tutorials
                    <span class="dd_action"><img src="arrow.png" /></span>
                </span>
            </a>
            <div style="opacity: 0; display: none; width: 300px;" class="sub">
                <ul>                   
                    <li><a href="#">Painting</a></li>
                    <li><a href="#">Photo Effects</a></li>
                    <li><a href="#">Text Effects</a></li>
                    <li><a href="#">Drawing</a></li>
                    <li><a href="#">Illustration</a></li>                       
                </ul>
                <ul>                   
                    <li><a href="#">Interface</a></li>
                    <li><a href="#">Designing</a></li>
                    <li><a href="#">HTML & CSS</a></li>
                    <li><a href="#">JavaScript & AJAX</a></li>
                    <li><a href="#">PHP</a></li>                       
                </ul>                               
            </div>
        </li>
        <li class="liSub">
            <a href="#">
                <span class="dd_wrapper">
                    Resources
                    <span class="dd_action"><img src="arrow.png" /></span>
                </span>
            </a>
            <div style="opacity: 0; display: none; width: 450px;" class="sub">
                <div class="row">
                    <ul style="width: 225px;">
                        <li><h2><a href="#">Deal of the Week</a></h2></li>
                        <li><a href="#">Navigation Link - 2 Column</a></li>
                        <li><a href="#">Navigation Link - 2 Column</a></li>
                        <li><a href="#">Navigation Link - 2 Column</a></li>
                        <li><a href="#">Navigation Link - 2 Column</a></li>
                    </ul>
                    <ul style="width: 225px;">
                        <li><h2><a href="#">Clearance Items</a></h2></li>
                        <li><a href="#">Navigation Link - 2 Column</a></li>
                        <li><a href="#">Navigation Link - 2 Column</a></li>
                        <li><a href="#">Navigation Link - 2 Column</a></li>
                        <li><a href="#">Navigation Link - 2 Column</a></li>
                    </ul>
                </div>
                <div style="margin: 0pt;" class="row">
                    <ul>
                        <li><h2><a href="#">Deal of the Week</a></h2></li>
                        <li><a href="#">Navigation Link</a></li>
                        <li><a href="#">Navigation Link</a></li>
                        <li><a href="#">Navigation Link</a></li>
                        <li><a href="#">Navigation Link</a></li>
                    </ul>
                    <ul>
                        <li><h2><a href="#">Clearance Items</a></h2></li>
                        <li><a href="#">Navigation Link</a></li>
                        <li><a href="#">Navigation Link</a></li>
                        <li><a href="#">Navigation Link</a></li>
                        <li><a href="#">Navigation Link</a></li>
                    </ul>
                    <ul>
                        <li><h2><a href="#">Open Box Items</a></h2></li>
                        <li><a href="#">Navigation Link</a></li>
                        <li><a href="#">Navigation Link</a></li>
                        <li><a href="#">Navigation Link</a></li>
                        <li><a href="#">Navigation Link</a></li>
                    </ul>
                </div>
            </div>
        </li>
        <li>
            <a href="#">
                <span class="single_wrapper">WordPress</span>
            </a>
        </li>
        <li>
            <a href="#">           
                <span class="single_wrapper">Community news</span>
            </a>
        </li>
        <li>
            <a href="#">           
                <span class="single_wrapper">About</span>
            </a>
        </li>
        <li>
            <a href="#">           
                <span class="single_wrapper">Archives</span>
            </a>
        </li>
        <li id="last-li">           
            <a href="#">           
                <span class="single_wrapper">Contact</span>
            </a>
        </li>
    </ul>
    <span id="menu_end"><img src="last_li.png" width="5" height="46" /></span>
</div>