Why did this adjustment work?

I had a dilemma with a pull down menu that I built. The ul wasn't displaying properly. It looked as though it was being covered up by another element. I played with the z-index settings, but to no avail.

Then I changed the "left" setting from 0 to -5. Suddenly, the portion of the pulldown was visible and everything was wonderful.

What was it about the left margin setting that made the difference. Here's the css data for the ul that wasn't displaying properly:

      #nav ul {
      display: none;
      margin: 0;
      padding: 0;
      width: 200px;
      height: 100px;
      position: absolute;
      top: 45px;
      left: -5;
      background: #ffffff;
      z-index:10;
      border-style:solid;
      border-width: thin;
      border-color:#cccccc;
      }
Bruce GustPHP DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Paul MacDonaldDirector, Information SystemsCommented:
It's hard to say without knowing what the initial problem was.
Bruce GustPHP DeveloperAuthor Commented:
The initial problem was the fact that the top portion of the pulldown menu (ul) was covered up. When I moved the left margin, suddenly all was wonderful.
Paul MacDonaldDirector, Information SystemsCommented:
Sounds like moving the UL left caused it to push something up in the flow.  What element preceeds the UL in the HTML?  Maybe you can duplicate the fix by moving that up and leaving the UL at left:0.
Michael CarrilloInformation Systems ManagerCommented:
Have you tried:

 z-index: 10;
( z-index:SPACE10;)

instead of:

 z-index:10;

I have seen issues with the parameters I entered not reflecting because of spacing between the colon and the value.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Bruce GustPHP DeveloperAuthor Commented:
Actually, I think I've got it narrowed down, although I'm still not sure what I did that made it "click." Ironically, it's back to not looking right, but here's the good news.

When you look at the attached screen shot, you'll notice that the pulldown is not visible because the scrolling text is hiding it. When I removed the scrolling text, the menu was completely visible. So, it would appear that it's the z index of the scrolling text.

Problem is, I went and added a lower z index value to the cell that contains the text and no good. What do I need to to do to keep the scrolling text behind the menu?

Here's my stylesheet:

body {
      font-family: Verdana, Microsoft Sans Serif;
      font-size: 10px;
      color: #ffffff;
      text-align: left;
      vertical-align: top;
      padding: 0px;
      width: 100%;
      margin: 0;
}

td {
font-family: Verdana, Microsoft Sans Serif;
font-size: 14px;
color: #000000;
vertical-align:top;
text-align:left;
}

td.nav_bar {
font-family: Verdana, Microsoft Sans Serif;
font-size: 14px;
color: #000000;
vertical-align:middle;
text-align:center;
}

td.login {
background-image: url(images/home_page_03.gif) ;
background-repeat: no-repeat;
vertical-align:middle;
}

td.title {
background-image: url(images/title_background.jpg) ;
background-repeat: no-repeat;
vertical-align:middle;
}

td.marquee_block {
background-image: url(images/home_page_16.gif) ;
background-repeat: no-repeat;
position: relative;
z-index: 5px;
}

td.marquee {
font-family: Verdana, Microsoft Sans Serif;
font-size: 11px;
color: #000000;
text-align: left;
width:875;
font-style: bold;
}

td.nav_bar_background {
background-image: url(images/home_page_14.gif) ;
background-repeat: no-repeat;
}

td.church_name {
font-family: Verdana, Microsoft Sans Serif;
font-size: 28px;
color: #000000;
}

td.left_column {
font-family: Verdana, Microsoft Sans Serif;
font-size: 14px;
color: #000000;
vertical-align:top;
}

.church_city {
font-family: Verdana, Microsoft Sans Serif;
font-size: 16px;
color: #000000;
font-weight:bold;
}

td.top_header {
      font-family: Verdana, Microsoft Sans Serif;
      font-size: 11px;
      color: #000000;
      text-align:center;
      }
      
td.commercial {
font-family: Verdana, Microsoft Sans Serif;
font-size: 11px;
color: #000000;
}

td.text_body {
background-image: url(images/home_page_24.gif) ;
}

td.left_body {
font-family: Verdana, Microsoft Sans Serif;
font-size: 14px;
color: #000000;
width:900px;
height:281px;
background-image: url(images/muscular_watermark.jpg) ;
background-repeat:no-repeat;
}

td.left_mid_body {
font-family: Verdana, Microsoft Sans Serif;
font-size: 14px;
color: #000000;
width:900px;
}

td.body_center {
text-align:center;
}

td.mid_body {
background-color:black;
font-family: Verdana, Microsoft Sans Serif;
font-size: 14px;
color: #ffffff;
width:900px;
height:30px;
vertical-align:middle;
}

td.top_featured {
background-image: url(images/home_page_20.gif) ;
background-repeat: no-repeat;
width:904px;
height:38px;
}
      
td.Footer {
font-family: Verdana, Microsoft Sans Serif;
font-size: 10px;
color: #000000;
text-align:center;
}

      td.credibility_footer {
      font-family: Verdana, Microsoft Sans Serif;
      font-size: 10px;
      color: #000000;
      }


INPUT.credibility
{
border:none;
}      

input.login_box
{
font-family: Verdana, Microsoft Sans Serif;
font-size: 14px;
color: #000000;
}

li {margin-left:15px;}

      
TEXTAREA {
      width:500px;
      height:250px;
      font-family: Verdana, Microsoft Sans Serif;
      font-size: 11px;
      color: #000000;
      float:left:
      }
      
TEXTAREA.verbiage {
      width:500px;
      height:100px;
      font-family: Verdana, Microsoft Sans Serif;
      font-size: 11px;
      color: #000000;
      float:left:
      }
      
      TEXTAREA.notes {
      width:509px;
      height:100px;
      font-family: Verdana, Microsoft Sans Serif;
      font-size: 11px;
      color: #000000;
      float:left:
      }
      
      TEXTAREA.admin {
      width:450px;
      height:200px;
      font-family: Verdana, Microsoft Sans Serif;
      font-size: 11px;
      color: #000000;
      float:left:
      }
      
      TEXTAREA.credibility {
      width:935px;
      height:200px;
      font-family: Verdana, Microsoft Sans Serif;
      font-size: 11px;
      color: #000000;
      float:left;
      border:none;
      }
      
select {
      font-family: Verdana, Microsoft Sans Serif;
      font-size: 11px;
      color: #000000;
      }

      input {
      font-family: Verdana, Microsoft Sans Serif;
      font-size: 11px;
      color: #000000;
}


A
{
      font-family: Verdana, Microsoft Sans Serif;
      font-size: 14px;
      color: #000000;
      text-decoration:underline;
}

A:Hover {
      font-family: Verdana, Microsoft Sans Serif;
      font-size: 14px;
      color: #000000;
      text-decoration:underline;
}

A:Visited {
      font-family: Verdana, Microsoft Sans Serif;
      font-size: 14px;
      color: #000000;
      text-decoration:underline;
}

A.Footer {
        font-family: Verdana, Microsoft Sans Serif;
      font-size: 10px;
      color: #000000;

}

 A.Footer:visited {
         font-family: Verdana, Microsoft Sans Serif;
      font-size: 10px;
      color: #000000;
 }
 
 A.Footer:hover {
          font-family: Verdana, Microsoft Sans Serif;
      font-size: 10px;
      text-decoration:underline;
      color: #000000;
 }
 
 A.nav_bar {
        font-family: Verdana, Microsoft Sans Serif;
      font-size: 14px;
      color: #000000;
      font-weight:bold;
      text-decoration:none;

}

 A.nav_bar:visited {
         font-family: Verdana, Microsoft Sans Serif;
      font-size: 14px;
      color: #000000;
      text-decoration:none;
 }
 
 A.nav_bar:hover {
      font-family: Verdana, Microsoft Sans Serif;
      font-size: 14px;
      text-decoration:none;
      font-weight:bold;
      color: #ffffff;
 }


A.login {
        font-family: Verdana, Microsoft Sans Serif;
      font-size: 11px;
      color: #ffffff;
      text-decoration:none;
}


 A.login:visited {
        font-family: Verdana, Microsoft Sans Serif;
      font-size: 11px;
      color: #ffffff;
      text-decoration:none;

}

A.login:hover {
          font-family: Verdana, Microsoft Sans Serif;
      font-size: 11px;
      text-decoration:underline;
      color: #ffffff;
 }

A.student_links {
        font-family: Verdana, Microsoft Sans Serif;
      font-size: 11px;
      color: #ffffff;
      text-decoration:none;
}

 A.student_links:visited {
        font-family: Verdana, Microsoft Sans Serif;
      font-size: 11px;
      color: #FBFBFB;
      text-decoration:none;
}

A.student_links:hover {
          font-family: Verdana, Microsoft Sans Serif;
      font-size: 11px;
      text-decoration:none;
      color: #8BD0F7
 }
 
 A.verbiage {
        font-family: Verdana, Microsoft Sans Serif;
      font-size: 10px;
      color: #000000;
      text-decoration:underline;
}

 A.verbiage:visited {
        font-family: Verdana, Microsoft Sans Serif;
      font-size: 10px;
      color: #000000;
      text-decoration:underline;
}

A.verbiage:hover {
    font-family: Verdana, Microsoft Sans Serif;
      font-size: 10px;
      text-decoration:underline;
      color: #000000;
 }
 
  A.menu {
        font-family: Verdana, Microsoft Sans Serif;
      font-size: 10px;
      color: #ffffff;
      text-decoration:none;
}

 A.menu:visited {
        font-family: Verdana, Microsoft Sans Serif;
      font-size: 10px;
      color: #ffffff;
      text-decoration:none;
}

A.menu:hover {
    font-family: Verdana, Microsoft Sans Serif;
      font-size: 10px;
      text-decoration:none;
      color: #ffffff;
 }
 
 A.password {
        font-family: Verdana, Microsoft Sans Serif;
      font-size: 11px;
      color: #000000;
      text-decoration:none;
}

 A.password:hover {
        font-family: Verdana, Microsoft Sans Serif;
      font-size: 11px;
      color: #000000;
      text-decoration:none;
}

 A.password:visited {
        font-family: Verdana, Microsoft Sans Serif;
      font-size: 11px;
      color: #000000;
      text-decoration:none;
}

A.marquee
{
      font-family: Verdana, Microsoft Sans Serif;
      font-size: 11px;
      font-style:bold;
      color: #000000;
      text-decoration:underline;
}

A.marquee:Hover {
      font-family: Verdana, Microsoft Sans Serif;
      font-size: 11px;
      color: #000000;
      font-style:bold;
      text-decoration:underline;
}

A.marquee:Visited {
      font-family: Verdana, Microsoft Sans Serif;
      font-size: 11px;
      color: #000000;
      font-style:bold;
      text-decoration:underline;
}

A.commercial
{
font-family: Verdana, Microsoft Sans Serif;
font-size: 11px;
color: #000000;
}

A.commercial:Hover {
font-family: Verdana, Microsoft Sans Serif;
font-size: 11px;
color: #000000;
text-decoration:underline;
}

A.commercial:Visited {
font-family: Verdana, Microsoft Sans Serif;
font-size: 11px;
color: #000000;
}



.tip {

    background-color:#ffffff;
      filter:alpha(opacity=95);
      /* CSS3 standard */
      /*opacity:0.6;*/
      border:1px solid black;
    display:none; /*--Hides by default--*/
    padding:10px;
    position:absolute;    
      z-index:1000;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

#nav {
            margin: 0;
            padding: 0px 0px 0;
            width: 400px;
            height:40px;
            }
            
      #nav ul {
      display: none;
      margin: 0;
      padding: 0;
      width: 200px;
      height: 100px;
      position: absolute;
      top: 45px;
      left: 0;
      background: #ffffff;
      z-index: 10;
      border-style:solid;
      border-width: thin;
      border-color:#cccccc;
      }
      
      #nav li {
            height: 25px;
            margin: 0 5 0 10px;
            padding:  0 0px;
            display: block;
            float: left;
            position: relative;
            list-style: none;
      }

/* main level link */
      #nav a {
      font-family: Verdana, Microsoft Sans Serif;
      font-size: 14px;
      font-weight:bold;
      text-decoration:none;
      display: block;
      padding:  12px 0px;
      margin: 0;
      height: 20px;
      }
      
      #nav a:hover {
            color: #041ccd;
      }
      
      #nav ul a.menu {
      color: #000000;
      font-family: Verdana, Microsoft Sans Serif;
      font-size: 14px;
      font-weight:bold;
      text-decoration:none;
      display: block;
      padding:  5px 5px 10px 5px;
      margin: 0;
      height: 10px;
      
      }
      
      #nav ul a.menu:hover {
      color: #000000;
      font-family: Verdana, Microsoft Sans Serif;
      font-size: 14px;
      font-weight:bold;
      text-decoration:none;
      display: block;
      padding:  5px 5px 10px 5px;
      margin: 0;
      height: 10px;
      }

      /* main level link hover */
      #nav.current a, #nav li:hover > a {
            color: #041ccd;
      }


      /* sub levels link hover */
      #nav ul li:hover a,
      #nav li:hover li a {
            background: none;
            border: none;
            color: #000000;
      }
      #nav ul a:hover {
            color: #041ccd !important;
            height:20px;
      }
      
            /* dropdown */
      #nav li:hover > ul {
            display: block;
      }
      
      /* level 2 list */

      
            #nav ul li {
            float: none;
            margin: 0;
            padding: 0;
      }

      #nav ul a {
            font-weight: normal;
            text-shadow: 0 1px 0 #fff;
      }
      
      

      /* level 3+ list */
      #nav ul ul {
            left: 200px;
            top: 0px;
      }

      /* clearfix */
      #nav:after {
            content: ".";
            display: block;
            clear: both;
            visibility: hidden;
            line-height: 0;
            height: 0;
      }
      #nav {
            display: block;
      }
Screen-shot-2012-04-12-at-8.34.2.png
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.