Log in

View Full Version : Resolved 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:
http://b.imagehost.org/0564/hii.jpg

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

HTML:


<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:


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:


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 :D

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"