Mon, 2012-01-02 13:40
I am using the custom dcjq-mega-menu jquery plugin (jquery.dcmegamenu) and I want to put some text above the menu and some tabs below it but its adding a margin around the whole menu...I'm using the custom example which is available here..
http://www.designchemical.com/lab/jquery/demo/download/custom_mega_menu_styles.zip
I am trying to get the text to appear just above the menu with no gap. There seems to be an issue when using
Extremely fed up with it now, need your help guys....
index.html
<div align="center" class="dcjq-mega-menu"> <ul class="menu" id="mega-menu-tut" name="mega-menu-tut"> <li> <a href="index.html">Home</a> </li> <li><a href="#">Products</a> <ul> <li id="menu-item-1"><a href="#">Product Group 1</a> <ul> <li> <div align="left"><a href="product1.html">Product1</a></div> </li> <li> <div align="left"><a href="product2.html">Product2</a></div> </li> <li> <div align="left"><a href="#">Product3</a>Product3</div> </li> <li> <div align="left"><a href="Product4.html">Product4</a></div> </li> </ul> </li> <li id="menu-item-2"><a href="#">Product Group 2</a> <ul> <li> <div align="left"><a href="#">Group 2 1</a></div> </li> <li> <div align="left"><a href="#">Group 2 3</a></div> </li> </ul> </li> <li><a href="#">About Us</a> <ul> <li> <div align="left"><a href="#">Company</a></div> </li> <li> <div align="left"><a href="#">Jobs</a></div> </li> <li> <div align="left"><a href="#">Returns</a></div> </li> </ul> </li> <li><a href="#">Technical</a> <ul> <li> <div align="left"><a href="#">Ask a Question</a></div> </li> </ul> </li> <li> <div align="left"><a href="#">Catalogue</a></div> </li> <li> <div align="left"><a href="#">Contact us</a></div> </li> </ul>
CSS
/* Reset code to remove theme inherent styling */ .dcjq-mega-menu ul.menu ul, .dcjq-mega-menu ul.menu li { list-style: none; padding: 0; margin: 0; top: 0; } .dcjq-mega-menu ul.menu ul { display: none; /* Hides non-mega links */ } .dcjq-mega-menu ul.menu .sub ul { display: block; /* overrides above hide */ } /* Main menu styles */ .dcjq-mega-menu ul.menu { background: #222 url(images/redbar.png) repeat-x 0 -80px; width: 100%; height: 40px; top: 0px; border-right: 1px solid #1B1B1B; border-left: 1px solid #1B1B1B; position: relative; /* Important - required for positioning of mega menu */ font: normal 13px Arial, sans-serif; line-height: 14px; } .dcjq-mega-menu ul.menu li { float: left; font-weight: bold; } .dcjq-mega-menu ul.menu li a { float: none; display: block; padding: 12px 25px; background: url(images/redbar.png) repeat-x 100% 0; color: #fff; text-shadow: 1px 1px 1px #000; text-decoration: none; } .dcjq-mega-menu ul.menu li.mega-hover a, .dcjq-mega-menu ul.menu li a:hover { background-position: 100% -42px; color: #000; text-shadow: none; } /* Arrow tag for parent links */ .dcjq-mega-menu ul.menu li a.dc-mega { padding-right: 38px; /* Additional padding for arrow */ position: relative; /* Required for arrow positioning */ } .dcjq-mega-menu ul.menu li a .dc-mega-icon { display: block; position: absolute; top: 18px; right: 15px; width: 8px; height: 6px; background: url(images/arrow.png) no-repeat 0 0; } .dcjq-mega-menu ul.menu li.mega-hover a .dc-mega-icon { background-position: 0 100%; } /* Mega Menu Styling */ /* Mega Drop Down Container */ .dcjq-mega-menu ul.menu li .sub-container { position: absolute; /* Required */ background: url(images/bg_sub_left.png) no-repeat 0 100%; padding-left: 10px; margin-left: -3px; } .dcjq-mega-menu ul.menu li .sub { background: url(images/bg_sub.png) no-repeat 100% 100%; padding: 20px 20px 20px 10px; } .dcjq-mega-menu ul.menu li .sub-container.mega .sub { padding: 20px 10px 0 0; } .dcjq-mega-menu ul.menu li .sub .row { /* Clear the sub-menu floats */ width: 100%; overflow: hidden; clear: both; } .dcjq-mega-menu ul.menu li .sub li { float: none; font-size: 1em; font-weight: bold; } /* Sub-menu Headers */ .dcjq-mega-menu ul.menu li .sub li.mega-hdr { /* Sub-menu headers - i.e. 2nd level navigation */ float: left; /* Float the sub-menus and give them a fixed width to from the mega menu rows */ width: 260px; margin: 0 10px 20px 10px; border: 1px solid #ccc; } .dcjq-mega-menu ul.menu li .sub a { /* Clear the styles from the top-level links and set the font styles */ background: none; border: none; text-shadow: none; color: #111; padding: 7px 10px; display: block; float: none; text-decoration: none; font-size: 0.9em; } .dcjq-mega-menu ul.menu li .sub li.mega-hdr a.mega-hdr-a { padding: 7px 10px; margin-bottom: 5px; border-bottom: 1px solid #ccc; text-transform: uppercase; font-weight: bold; color: #000; background: #EAEAEA url(images/bg_hdr.png) repeat-x center center; } .dcjq-mega-menu ul.menu li .sub li.mega-hdr a.mega-hdr-a:hover { color: #000; text-shadow: none; } /* Add the individual sub-menu backgrounds */ .dcjq-mega-menu ul.menu li .sub li#menu-item-1 { background: url(images/cats.gif) no-repeat 135px 40px; } .dcjq-mega-menu ul.menu li .sub li#menu-item-2 { background: url(images/ems.gif) no-repeat 135px 40px; } .dcjq-mega-menu ul.menu li .sub li#menu-item-3 { background: url(images/pumps.gif) no-repeat 135px 40px; } .dcjq-mega-menu ul.menu li .sub li#menu-item-4 { background: url(images/) no-repeat 135px 40px; } .dcjq-mega-menu ul.menu li .sub li#menu-item-5 { background: url(images/coils.gif) no-repeat 135px 40px; } .dcjq-mega-menu ul.menu li .sub li#menu-item-6 { background: url(images/diesel.gif) no-repeat 135px 40px; } /* Style the 3rd level links */ .dcjq-mega-menu ul.menu li .sub li ul li { margin-right: 90px; } .dcjq-mega-menu ul.menu .sub li.mega-hdr li a { color: #444; font-weight: normal; padding: 3px 0 3px 25px; background: url(images/bullet.png) no-repeat 10px 8px; } .dcjq-mega-menu ul.menu .sub li.mega-hdr li a:hover { color: #990000; background-image: url(images/bullet_on.png); } /* Styling for items with only 2 levels */ .dcjq-mega-menu ul.menu li .sub-container.non-mega .sub { padding: 20px 20px 20px 10px; } .dcjq-mega-menu ul.menu li .sub-container.non-mega li { width: 190px; /* Set the drop down width */ } .dcjq-mega-menu ul.menu li .sub-container.non-mega li a { padding: 7px 5px 7px 22px; background: url(images/bullet.png) no-repeat 5px 12px; } .dcjq-mega-menu ul.menu li .sub-container.non-mega li a:hover { color: #990000; background-image: url(images/bullet_on.png); }