dcjq-mega-menu unwanted top margin

No replies

Mon, 2012-01-02 13:40

emzipoo4u

Offline

newbie

Last seen: 8 years 21 weeks ago

Timezone: GMT+1

Joined: 2012-01-02

Posts: 1

Points: 2

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

as soon as i put that bit in then it creates this extra margin above and below the menu.

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);
}

Tags:

CSS Layouts

dcjq-mega-menu unwanted top margin

User login

Navigation