Drop down hiding behind post

hi,

does anyone have any idea why the submenu of the drop down is hiding behind the blog post.
i am using IE. I tested it in ff,safari, and chrome and it is working however it is not working on IE.

any ideas how to fix this?

thanks…

We’d need to see a link to have any real idea. It is possibly a z-index issue. Is there any Flash in the blog post. In that case, here’s a solution: http://www.sitepoint.com/forums/showthread.php?158317-force-flash-to-play-below-dhtml-menu

thanks for the reply ralph.
there is no flash in the blog.
i have tried adding z -index.

this is the code…i got it from a tutorial.

#jsddm
{ margin: 0;
padding: 0}

#jsddm li
{ float: left;
list-style: none;
font: 12px Tahoma, Arial}

#jsddm li a
{ display: block;
text-align:center;
background: #66bbdd;
padding: 5px 12px;
text-decoration: none;
border-right: 1px solid white;
width: 70px;
color: #EAFFED;
white-space: nowrap}

#jsddm li a:hover
{ background: #6adeb5}

#jsddm li ul
{ margin: 0;
padding: 0;
position: absolute;
z-index: 1;
visibility: hidden;
border-top: 1px solid white}

#jsddm li ul li
{ float: none;
display: inline}

#jsddm li ul li a
{ width: auto;
text-align:center;
background: transparent;
color: #24313C}

#jsddm li ul li a:hover
{ background: #6adeb5}

body#home a#home,
body#activities a#activities{
background:#6adeb5;
color:white;

would sending the url be helpful?
this is for our company’s blog so i’m not really sure if i can put it here…

hope you can still help me though… :slight_smile:

It’s fine to post the link, and that would make it much easier to diagnose. What version(s) of IE is it not working in?

url is azurelineagroup.blogspot.com
it is still under construction… on solutions tab, there should be 5 submenus but i think only 1 is showing same with forum tab.

i am using ie9. i haven’t tried it on other versions of ie.

You have caused yourself some trouble there by using position: absolute where you don’t need it (there are better solutions). Anyhow, a possible fix would be something like adding this to your style sheet:

widget-content {position: relative; z-index: 100;}

That’s just a guess, though. I find IE virtually impossible to test CSS in unless I’m uploading it myself, so let us know if that doesn’t work.

thanks i’m going to try and tell what happens…

uhmmm…it’s still not working… :frowning:

You have a few errors in your logic. Update/add the following code

.tabs-outer{z-index:10;}
#jsddm li{position:relative;}
#jsddm li li{position:static;}
#jsddm li ul{top:100%;left:0;width:100%;}
#jsddm{overflow:visible;}

I’ll quickly go over each. The first line is the critical part. You give all the main containers position:relative and IE gets quirky with z-indexes. It’s best to specify z-indexs. Anyway you just need to set that.

The next line (and the 3rd) work because your dropdown is basing its position off of the browser. It’s guessing. You’ll need those two lines in very shortly. Otherwise you’ll see the positioning jump far left.
The 4th line is to set coordinates. Make the browser KNOW where to place the dropdown. Any GOOD tutorial would have that. You need to find more reliable sources for tutorials it seems.

The last line (overflow) basically just makes it so the dropdown won’t get chopped off. If you want to contain your floats some other way, perhaps look into using the clearfix :).

it actually works! thanks a lot!!!

i hope i’m not bothering you. i still have a question…the drop down menu follows the width of the main menu. i mean the submenus have longer titles but it was cut off and followed the size of the main menu. i hope i explained it clearly…

could you pls help me…i’m sorry i’m really new at these things…

thanks again…

That was my bad. Update your code

#jsddm li ul{top:100%;left:0;overflow:visible}

The width was tricking me up. Basically the only things differing in this code, apposed to my code in post #8, is that remove the width:100%. It’s restricting it.

And the overflow:visible is needed because it’s inheriting overflow:hidden; from a global rule.

perfect! now it’s really working!!!
thank u so much!!!
:slight_smile: :slight_smile: :slight_smile:

Glad it’s all working now :). You’re welcome.

hi RyanReese…
is it ok to ask for your help again? :slight_smile:

i was wondering how to align the drop down to the left. i like it to be aligned with the header and the post.
i have a float:left in the code but it is a bit indented. is there a way to align it?

thanks again…

Do you mean you want the links in the drop down to be left aligned? It’s not clear what you mean.

uhmm…sorry about that… i mean the menu itself.
i kind of did someting. it’s pretty much what i want but i have to remove the background color on the blog post area.
i really want to have a background color :frowning:

O, I see. I was looking at an old version of the page, and it was aligned. You could do that by removing these styles:


.tabs-inner {
  padding: 0 15px;
}

.section {
  margin: 0 15px;
}

If that messes up the rest of your page, then perhaps just remove those classes from the nav divs.