Tue, 2010-03-09 17:24
Ive been working on a mega drop down menu that I roughly learned how to do on sitepoint.com and have been able to customize it to my liking for the most part with what I taught myself about CSS styling. But I have not been able to figure out how to align my links in the mega drop down menu under one another instead of listing them right after one another like a paragraph. Now I originally changed my code from the demo so that instead of a paragraph the links were a unordered list. So im thinking that this can be solved with CSS. Ive attached my code below if anybody has an idea of whats going on.
I currently have a
tag within the code so that I could specifically select those sections and modify them to align to the left... but I can't manage it to do anything.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <style> body { font-family: "Lucida Grande", "Lucida Sans Unicode", "Verdana", sans-serif; font-size: 11px; background: #fff; color: #333; } h1, h2, h3, h4, h5, h6, p, ul, li { font-size: 1em; margin: 0; padding: 0; } div#banner { background: transparent url(mega.gif) top left no-repeat; padding-top: 12px; padding-bottom: 36px; } div#banner h1, div#menu h2 { margin: 0; padding: 0; } div#banner h1 a { display: block; width: 270px; height: 120px; } div#banner h1 a span, div#banner .skip { position: absolute; top: -10000px; left: -10000px; } ul#menu { background: #fff; color: #fff; margin: 0; padding: 0.3em 0em; } ul#menu li { display: inline; margin: 0.1em 1em; position: relative; } ul#menu h2, ul#menu h3 { font-size: 100%; font-weight: normal; display: inline; } ul#menu li a { color: #000; text-decoration: none; padding: 0 0.4em; } ul#menu li a:hover { text-decoration: underline; } ul#menu li.mega a { background: transparent url(arrow.gif) center right no-repeat; padding: 0 1.2em; } ul#menu li.mega a:hover { text-decoration: underline; } ul#menu div { display: none; } ul#menu li.mega div { border: 1px solid #dda; width: 18em; position: absolute; top: 1.6em; left: 0em; padding: 1.3em; background: #fff; color: #930; } ul#menu li.hovering div { display: block; } ul#menu li.mega div a { color: #300; padding: 0; background-image: none; text-decoration: underline; } ul#menu li div a.more { color: #390; font-weight: bold; } ul#menu div h3 { color: #f70; font-weight: bold; font-size: 1.1em; } ul#menu div p { margin: 0 0 0.8em 0; padding: 0; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"> </script> <script src="http://qcollection2.squarespace.com/storage/scripts/jquery.hoverIntent.minified.js" type="text/javascript" charset="utf-8"> </script> <script type="text/javascript" charset="utf-8"> //<![CDATA[ $(document).ready(function() { function addMega(){ $(this).addClass("hovering"); } function removeMega(){ $(this).removeClass("hovering"); } var megaConfig = { interval: 300, sensitivity: 10, over: addMega, timeout: 500, out: removeMega }; $("li.mega").hoverIntent(megaConfig) }); //]]> </script> </head> <body> <ul id="menu"> <li> <h2> <a href="http://qcollection2.squarespace.com/">Q Collection</a> </h2> </li> <li class="mega"> <h2> <a href="#">Products</a> </h2> <div class="table"> <h3> Retail </h3> <ul> <li><a href="#">Q Collection Studio</a></li> <li><a href="#">Q Collection jr</a></li> <li><a href="#">Close Out Fabrics</a></li> </ul> <h3> To The Trade </h3> <ul> <li><a href="#">Fabrics</a></li> <li><a href="#">Furniture</a></li> </ul> </div> </li> <li class="mega"> <h2> <a href="#">Eco + Health</a> </h2> <div class="column"> <ul> <li><a href="#">The Concern</a></li> <li><a href="#">Fabric Solutions</a></li> <li><a href="#">Furniture Solutions</a></li> </ul> </div> </li> <li class="mega"> <h2> <a href="#">Company</a> </h2> <div class="table"> <ul> <li><a href="#">Our Story</a></li> <li><a href="#">Co Founders</a></li> <li><a href="#">Team</a></li> <li><a href="#">Advisers</a></li> </ul> </div> </li> <li class="mega"> <h2> <a href="#">Locations</a> </h2> <div class="table"> <h3> Retail Showroom </h3> <h3> Trade Showrooms </h3> <ul> <li><a href="#">USA</a></li> <li><a href="#">Canada</a></li> </ul> </div> </li> <li> <h2> <a href="http://qcollection2.squarespace.com/">Press</a> </h2> </li> <li> <h2> <a href="http://qcollection2.squarespace.com/">Links</a> </h2> </li> <li> <h2> <a href="http://qcollection2.squarespace.com/">Register</a> </h2> </li> </body> </html>
