Dropdown over content!

**bbilal** · 12-20-2010, 05:49 PM

OK! I have tried alot but it doesnt worked with me! what it is I made a dropdown which is coming over my submenu. The screen is posted below:

I think it's something to do with CSS but I could not figured it out.

HTML:

Code:

   <div class="menuMain">
    <div class="navLeft"> 
      <div class="navRight"> 
        <ul class="submenu">
          <li><a href="http://www.intech-bb.com/">
		  <img src="<?php bloginfo('template_url'); ?>/images/icon-home.png" /><br>
            Home </a></li>
          <li><a href="http://www.intech-bb.com/category/apple-inc/">
		  <img src="<?php bloginfo('template_url'); ?>/images/icon-apple.png" /><br>
            Apple </a>
	<div class="dropdown_2columns">
      <!-- Begin 2 columns container -->
      <div class="col_1"> 
        <h3>Some Links</h3>
        <ul>
          <li><a href="#">ThemeForest</a></li>
          <li><a href="#">GraphicRiver</a></li>
          <li><a href="#">ActiveDen</a></li>
          <li><a href="#">VideoHive</a></li>
          <li><a href="#">3DOcean</a></li>
        </ul>
      </div>
	  
      <div class="col_1"> 
        <h3>Useful Links</h3>
        <ul>
          <li><a href="#">NetTuts</a></li>
          <li><a href="#">VectorTuts</a></li>
          <li><a href="#">PsdTuts</a></li>
          <li><a href="#">PhotoTuts</a></li>
          <li><a href="#">ActiveTuts</a></li>
        </ul>
      </div>
                        
      <div class="col_1"> 
        <h3>Other Stuff</h3>
        <ul>
          <li><a href="#">FreelanceSwitch</a></li>
          <li><a href="#">Creattica</a></li>
          <li><a href="#">WorkAwesome</a></li>
          <li><a href="#">Mac Apps</a></li>
          <li><a href="#">Web Apps</a></li>
        </ul>
      </div>
        
                
      <div class="col_1"> 
        <h3>Misc</h3>
        <ul>
          <li><a href="#">Design</a></li>
          <li><a href="#">Logo</a></li>
          <li><a href="#">Flash</a></li>
          <li><a href="#">Illustration</a></li>
          <li><a href="#">More...</a></li>
        </ul>
      </div>

	  
	  
	  
	  </div>

			</li>
          <li><a href="http://www.intech-bb.com/category/gaming/">
		  <img src="<?php bloginfo('template_url'); ?>/images/icon-gaming.png" /><br>
            Gaming </a></li>
          <li><a href="http://www.intech-bb.com/category/google-inc/">
		  <img src="<?php bloginfo('template_url'); ?>/images/icon-google.png" /><br />
            Google</a></li>
          <li><a href="http://www.intech-bb.com/category/microsoft/">
	 	  <img src="<?php bloginfo('template_url'); ?>/images/icon-microsoft.png" /><br />
            Microsoft </a></li>
          <li><a href="http://www.intech-bb.com/category/mobile/"> 
		  <img src="<?php bloginfo('template_url'); ?>/images/icon-mobile.png" /><br />
            Mobile </a></li>
          <li><a href="http://www.intech-bb.com/category/social-media/"> 
		  <img src="<?php bloginfo('template_url'); ?>/images/icon-socialmedia.png" /><br>
            Social Media </a></li>
          <li><a href="http://www.intech-bb.com/category/tech/"> 
		  <img src="<?php bloginfo('template_url'); ?>/images/icon-tech.png" /><br />
            Tech </a></li>
          <li><a href="http://www.intech-bb.com/category/tutorials/"> 
		  <img src="<?php bloginfo('template_url'); ?>/images/icon-tutorials.png" /><br />
            Tutorials </a></li>
        </ul>
      </div>
    </div>
  </div>

And the CSS:

Code:

div.menuMain .navLeft { background:url("images/navLeft_h50.gif") no-repeat scroll left top transparent; height:50px; }
div.menuMain .navRight { background:url("images/navRight_h50.gif") no-repeat scroll right top transparent;	height:50px;}
div.menuMain img {width:25px; height:25px; padding-bottom:3px;}
div.menuMain a:link, div.menuMain a:visited {color:#FFFFFF; font-size:9px; display:block; padding:6px 22.75px; text-decoration:none;}
div.menuMain a:hover {background:url("images/navBG_gray.gif") repeat-x scroll left top transparent;	margin-right:2px; padding-right:20.75px;}
div.menuMain {
	position:relative;
	clear:both;
	background:url("images/navBG_h50.gif") repeat-x scroll left top transparent;
	color:#FFFFFF;
	font:bold 12pt arial,helvetica,sans-serif;
	height:50px; 
	}

div.menuMain li { 
	background:url("images/navSplit_h50.gif") no-repeat scroll right top transparent; 
	float:left; 
	text-align:center;
	position:relative;
	}

/*  _______________________________________

	04 DROP DOWN MENU
    _______________________________________  */

/* Left & right aligned common styles */

.dropdown_1column, 
.dropdown_2columns {
	margin:4px auto;
	position:absolute;
background:url("images/navBG_h50.gif") repeat-x scroll left top transparent;
	border:1px solid #aaaaaa;
	border-top:none;
	padding:10px 5px 10px 5px;

	/* CSS 3 Stylings */
	
	background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));
}

/* Left aligned drop down */

.dropdown_1column, 
.dropdown_2columns {
	left:-999em; /* Hides the drop down */
	text-align:left;

	/* CSS 3 Stylings */

	-moz-border-radius: 0px 5px 5px 5px;
    -webkit-border-radius: 0px 5px 5px 5px;
    -khtml-border-radius: 0px 5px 5px 5px;
    border-radius: 0px 5px 5px 5px;
}

/* Drop Downs Sizes */

.dropdown_1column {width: 140px;}
.dropdown_2columns {width: 280px;}


div.menuMain li a .dropdown_1column, 
div.menuMain li a .dropdown_2columns {
	color: #000000;
	outline:0;
	text-decoration:none;
	display:block;
	}


/* Showing Drop Down on Mouse Hover - Left aligned */

div.menuMain li:hover .dropdown_1column, 
div.menuMain li:hover .dropdown_2columns {
	left:-1px;top:auto;
	z-index:2;
	background:#F4F4F4;
	border:1px solid #aaaaaa;
	padding: 4px 9px 4px 9px;

}

/* Showing Drop Down on Mouse Hover - Right aligned */

div.menuMain li .align_right {
	/* Rounded Corners */
	-moz-border-radius: 5px 0px 5px 5px;
    -webkit-border-radius: 5px 0px 5px 5px;
    border-radius: 5px 0px 5px 5px;
}
div.menuMain li:hover .align_right {
	left:auto;
	right:-1px;
	top:auto;
}

/* Columns Sizes */

.col_1,
.col_2,
.col_3,
.col_4,
.col_5 {
	display:inline;
	float: left;
	position: relative;
	margin-left: 5px;
	margin-right: 5px;
}
.col_1 {width:130px;}
.col_2 {width:270px;}
.col_3 {width:410px;}
.col_4 {width:550px;}
.col_5 {width:690px;}



div.menuMain li .black_box {
background:url("images/navBG_h50.gif") repeat-x scroll left top transparent;
	color: #000000;
	text-shadow: 1px 1px 1px #000;
	padding:4px 6px 4px 6px;

	/* CSS 3 Stylings */
	
	-moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
	
	-webkit-box-shadow:inset 0 0 3px #000000;
	-moz-box-shadow:inset 0 0 3px #000000;
	box-shadow:inset 0 0 3px #000000;
}

div.menuMain li .dark_grey_box {
	background-color:#555555;
	color: #000000;
	text-shadow: 1px 1px 1px #000;
	padding:4px 6px 4px 6px;

	/* CSS 3 Stylings */
	
	-moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
	
	-webkit-box-shadow:inset 0 0 3px #111111;
	-moz-box-shadow:inset 0 0 3px #111111;
	box-shadow:inset 0 0 3px #111111;
}

div.menuMain li ul {
	list-style:none;
	padding:0;
	margin:0 0 12px 0;
}
div.menuMain li ul li {
	font-size:12px;
	line-height:24px;
	position:relative;
	text-shadow: 1px 1px 1px #ffffff;
	padding:0;
	margin:0;
	float:none;
	text-align:left;
	width:130px;
}
div.menuMain li ul li:hover {
	background:none;
	border:none;
	padding:0;
	margin:0;
}

.menu li .greybox li {
background:url("images/navBG_h50.gif") repeat-x scroll left top transparent;
	border:1px solid #bbbbbb;
	margin:0px 0px 4px 0px;
	padding:4px 6px 4px 6px;
	width:116px;

	/* CSS 3 Stylings */
	
	-moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
}
.menu li .greybox li:hover {
	background:#ffffff;
	border:1px solid #aaaaaa;
	padding:4px 6px 4px 6px;
	margin:0px 0px 4px 0px;
}

I think it's something to do with CSS but I could not figured it out can someone help? Live preview: http://t-clicks.com/blog

**bbilal** · 12-20-2010, 10:04 PM

No one can help?

**Nile** · 12-20-2010, 10:11 PM

Please post a link to the page on your site that contains the problematic script so we can check it out.

**bbilal** · 12-20-2010, 11:43 PM

I have already added the link but again http://t-clicks.com/blog

**Nile** · 12-20-2010, 11:49 PM

Add:

Code:

z-index: 999999 !important;

To the drop down div.

**bbilal** · 12-21-2010, 01:40 AM

Thank you

**Nile** · 12-21-2010, 01:57 AM

No problem, I'm glad to help

Here on DD, we like to keep things organized. In an effort to do so, you have the option to set a thread to resolved when an issue is fixed. To make the status of the thread resolved:
1. Go to your first post
2. Edit your first post
3. Click "Go Advanced"
4. In the dropdown next to the title, select "RESOLVED"

Thread: Dropdown over content!

Thread Tools

Search Thread

Dropdown over content!

Bookmarks

Bookmarks

Posting Permissions