thatdevgirl/css-mega-menu-example.html

## css-mega-menu-example.html
<!DOCTYPE html>
<html>

  <head>
    <title>CSS Mega-Menu</title>
    <link type="text/css" rel="stylesheet" href="css-mega-menu.css" />
  </head>

  <body>
    <nav>
      <ul class="first">
        <li class="active"><a href="#">Shop My Store</a></li>
        <li><a href="#">Outlets</a></li>
        <li><a href="#">My Account</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Contact</a></li>
      </ul>

      <ul class="second">
        <li>
          <a href="#">Clothing</a>

          <article>
            <section>
              <h2>Women's Clothing</h2>
              <p><a href="#">Shirts</a></p>
              <p><a href="#">Pants</a></p>
              <p><a href="#">Skirts</a></p>
              <p><a href="#">Dresses</a></p>
              <p><a href="#">Suits</a></p>
            </section>

            <section>
              <h2>Men's Clothing</h2>
              <p><a href="#">Shirts</a></p>
              <p><a href="#">Pants</a></p>
              <p><a href="#">Suits</a></p>
              <p><a href="#">Ties</a></p>
            </section>

            <section>
              <h2>Kids's Clothing</h2>
              <p><a href="#">Shirts</a></p>
              <p><a href="#">Pants</a></p>
              <p><a href="#">Skirts</a></p>
              <p><a href="#">Suits</a></p>
            </section>

            <section class="banner">
              <img src="http://placekitten.com/g/150/150" />
            </section>
          </article>
        </li>

        <li>
          <a href="#">Accessories</a>

          <article>
            <section>
              <h2>Outerwear</h2>
              <p><a href="#">Coats</a></p>
              <p><a href="#">Hats</a></p>
              <p><a href="#">Scarves</a></p>
              <p><a href="#">Gloves</a></p>
            </section>

            <section>
              <h2>Jewelry</h2>
              <p><a href="#">Necklaces</a></p>
              <p><a href="#">Bracelets</a></p>
              <p><a href="#">Rings</a></p>
              <p><a href="#">Watches</a></p>
            </section>

            <section>
              <h2>Bags</h2>
              <p><a href="#">Handbags</a></p>
              <p><a href="#">Totes</a></p>
              <p><a href="#">Luggage</a></p>
              <p><a href="#">Wallets</a></p>
              <p><a href="#">Keychains</a></p>
            </section>
          </article>
        </li>

        <li>
          <a href="#">Shoes</a>

          <article>
            <section>
              <h2>Women's Shoes</h2>
              <p><a href="#">Flats</a></p>
              <p><a href="#">Heels</a></p>
              <p><a href="#">Boots</a></p>
              <p><a href="#">Sneakers</a></p>
            </section>

            <section>
              <h2>Men's Shoes</h2>
              <p><a href="#">Loafers</a></p>
              <p><a href="#">Dress Shoes</a></p>
              <p><a href="#">Boots</a></p>
              <p><a href="#">Sneakers</a></p>
            </section>

            <section class="banner">
              <img src="http://placekitten.com/150/150" />
            </section>
          </article>
        </li>

        <li>
          <a href="#">Kitchen</a>

          <article>
            <section>
              <h2>Tableware</h2>
              <p><a href="#">Plates</a></p>
              <p><a href="#">Glasses</a></p>
              <p><a href="#">Mugs</a></p>
              <p><a href="#">Silverware</a></p>
            </section>

            <section>
              <h2>Serveware</h2>
              <p><a href="#">Trays</a></p>
              <p><a href="#">Bowls</a></p>
              <p><a href="#">Platters</a></p>
            </section>

            <section>
              <h2>Cookware</h2>
              <p><a href="#">Pots</a></p>
              <p><a href="#">Pans</a></p>
              <p><a href="#">Utensils</a></p>
            </section>

            <section>
              <h2>Appliances</h2>
              <p><a href="#">Coffee Makers</a></p>
              <p><a href="#">Mixers</a></p>
              <p><a href="#">Blenders</a></p>
              <p><a href="#">Gadgets</a></p>
            </section>
          </article>
        </li>

        <li>
          <a href="#">Bed & Bath</a>

          <article>
            <section>
              <h2>Bed Sheets</h2>
              <p><a href="#">Twin</a></p>
              <p><a href="#">Full</a></p>
              <p><a href="#">Queen</a></p>
              <p><a href="#">King</a></p>
            </section>

            <section>
              <h2>Towels</h2>
              <p><a href="#">Bath Towels</a></p>
              <p><a href="#">Hand Towels</a></p>
              <p><a href="#">Tea Towels</a></p>
              <p><a href="#">Washcloths</a></p>
            </section>
          </article>
        </li>
      </ul>
    </nav>
  </body>

</html>

## css-mega-menu.css
/*
 * -- CSS-only Mega Menu
 *
 */

nav { width: 100%; }

nav a { text-decoration: none; }


/* -- Navigation menu - common styles for first and second levels -- */

nav > ul { clear: both; width: 100%; }

nav > ul li { float: left; }

nav > ul li > a { display: block; }


/* -- Navigation menu - first level -- */

nav > ul.first li > a { background: #DDD; border-left: 1px solid #BBB; color: #000; padding: 10px 30px 15px 30px; text-transform: uppercase; }

nav > ul.first li > a:hover { background: #CCC; }

nav > ul.first li:first-child > a { border-left: 0; }

nav > ul.first li.active > a { background: #444; color: #FFF; }


/* -- Navigation menu - second level -- */

nav > ul.second { background: #444; border: 1px solid #444; display: block; height: 25px; position: relative; }

nav > ul.second li > a { color: #FFF; padding: 7px 30px; }

nav > ul.second li:hover > a { background: #FFF; color: #000; }


/* -- Navigation menu - third level -- */

nav > ul.second article { display: none; }

nav > ul.second li:hover > article { border: solid #444; border-width: 0 1px 1px 1px; display: block; left: 0; margin-left: -1px; position: absolute; width: 100%; }

nav section { float: left; margin-right: 20px; padding: 20px; }

nav section h2 { font-weight: bold; margin: 5px 0; text-transform: uppercase; }

nav section p { margin: 8px 0; }

nav section a { color: #000; }

nav section a:hover { text-decoration: underline; }

nav section.banner { float: right; }