Css dropdown menu hiding behind content

HTML & CSS
1

I have a css dropdown menu that is hiding behind content, specifically the header and header image. Can you assist please?

I’ve copied the code to the body of the email below.

Thanks, Jeff

Style.css

body {
                margin: 0;
                padding: 0;
                text-align: left;
                font-family:Arial, Helvetica, sans-serif;
                font-size: 13px;
                color: #061C37;
                background: #014D5D url(../images/background.png);
                background-repeat:repeat-x;
}

*   {
   margin: 0 auto 0 auto;
   text-align:left;

 }

h3  {
   color: #19448f;
   font-size: 14px;
   font-weight: bold;
   margin: 5px 0px;
}

#page {
   display: block;
   height:auto;
   position: relative;
   overflow: hidden;
   width: 670px;
}

#login {
                margin: 0px 5px 0px 0px;
                width: 72px;
                height:35px;
                float: right;
}

div {
display: block;
}

.topnav {
   text-align:center;
   position:relative;
   margin-top:30px;
   font-size:16px;
   margin-left:-10px;
   width:121px;
   height: 35px;
   line-height: 35px;
   float:left;
   color:#CEEAEE;
   font-family:Arial, Helvetica, sans-serif;
   display: block;
}


.topnav a {
   text-decoration:none;
   color:#CDE2FC;
}

.topnav a:hover {
   text-align:center;
   border-bottom:none;
   color: #05EDFF;
   width:121px;
   height: 35px;
   line-height: 35px;
/* background-image:url(../images/nav.png); */
}

#headerimage {
   width:670px;
   height:345px;
   background-color:#FFFFFF;
  }


#headerimage .picture {
   position:relative;
   width:650px;
   height:325px;
   top:10px;
   background-image:url(../images/mainheader.jpg);
   background-repeat:no-repeat;
   margin-left:10px;
  }

#headerTitle {
   position:relative;
   top:32px;
   left:105px;
   font-size:30px;
   color:#FFFFFF;
   font-family:Arial, Helvetica, sans-serif;
}

#headerTitleLogo {
   position:relative;
   top:-35px;
   left:-1px;
   font-size:14px;
   color:#A9C8FA;
   font-family:Arial, Helvetica, sans-serif;
}

.contentBox {
   width:670px;
   height:auto;
   background-color:#FFFFFF;
   margin-top:10px;
}

.contentBox .innerBox {
   position:relative;
   top:10px;
   margin-left:10px;
   width:650px;
   height:auto;
   padding-bottom:20px;
   background-image:url(../images/content_back.png);
   background-repeat:repeat-x;

}

.contentTitle {
   font-size:19px;
   margin-bottom:0px;
   padding-top:18px;
   padding-bottom:13px;
   margin-left:3px;
   margin-top:15px;
}

#contentText {
   font-size:12px;
   line-height:normal;
   margin-left:13px;
   margin-right:13px;

}

/* #rightbox {
   font-size:12px;
   line-height:normal;
   float:left;
   width:320px;
   padding-right:5px;
   padding-bottom:25px;
}

#leftbox {
   font-size:12px;
   line-height:normal;
   text-align:justify;
   float:left;
   width:320px;
   padding-left:5px;
   padding-bottom:25px;
}
*/

#footer {
   width: 670px;
   height: auto;
/* background: url(../images/footer.png) no-repeat;
   clear:both;
*/
   background:white;
   text-align:center;
   font-size:10px;
   font-family:sans-serif;
   padding-top:10px;
}

#footer a {
   text-decoration:none;
   font-size:10px;
   color:#0C61C9;
}

html, body {
   text-align: center;
}

p {
   text-align: left;
   }

Cssmenu.css

.cssmenu{
                border:none;
                border:0px;
                margin:0px;
                padding:0px;
                font: 67.5% 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', Verdana, Helvetica, sans-serif;
                font-size:13px;
                font-weight:bold;
                }
.cssmenu ul{
                background:#333333;
                height:30px;
                list-style:none;
                margin:0;
                padding:0;
                }
.cssmenu li{
                float:left;
                padding:0px;
                }
.cssmenu li a{
                background:#333333 url('../images/seperator.gif') bottom right no-repeat;
                color:#cccccc;
                display:block;
                font-weight:normal;
                line-height:30px;
                margin:0px;
                padding:0px 25px;
                text-align:center;
                text-decoration:none;
                }
.cssmenu li a:hover, .cssmenu ul li:hover a{
                background: #2580a2 url('../images/hover.gif') bottom center no-repeat;
                color:#FFFFFF;
                text-decoration:none;
                }
.cssmenu li ul{
                background:#333333;
                display:none;
                height:auto;
                padding:0px;
                margin:0px;
                border:0px;
                position:absolute;
                width:225px;
                z-index:200;
                /*top:1em;
                /*left:0;*/
                }
.cssmenu li:hover ul{
                display:block;

                }
.cssmenu li li {
                background:url('../images/sub_sep.gif') bottom left no-repeat;
                display:block;
                float:none;
                margin:0px;
                padding:0px;
                width:225px;
                }
.cssmenu li:hover li a{
                background:none;

                }
.cssmenu li ul a{
                display:block;
                height:30px;
                font-size:11px;
                font-style:normal;
                margin:0px;
                padding:0px 10px 0px 15px;
                text-align:left;
                }
.cssmenu li ul a:hover, .cssmenu li ul li:hover a{
                background:#2580a2 url('../images/hover_sub.gif') center left no-repeat;
                border:0px;
                color:#ffffff;
                text-decoration:none;
                }
.cssmenu p{
                clear:left;
                }

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="styles/style.css" />
<link rel="stylesheet" type="text/css" href="styles/cssmenu.css" />
<title>Linn Group Asset Management</title>

<!--pop up box script for services page with session cookie-->
<script>

//Alert message once script- By JavaScript Kit
//Credit notice must stay intact for use
//Visit http://javascriptkit.com for this script

//specify message to alert
var alertmessage="hello&#8221;

///No editing required beyond here/////

//Alert only once per browser session (0=no, 1=yes)
var once_per_session=1

function get_cookie(Name) {
  var search = Name + "="
  var returnvalue = "";
  if (document.cookie.length > 0) {
    offset = document.cookie.indexOf(search)
    if (offset != -1) { // if cookie exists
      offset += search.length
      // set index of beginning of value
      end = document.cookie.indexOf(";", offset);
      // set index of end of cookie value
      if (end == -1)
         end = document.cookie.length;
      returnvalue=unescape(document.cookie.substring(offset, end))
      }
   }
  return returnvalue;
}

function alertornot(){
if (get_cookie('alerted')==''){
loadalert()
document.cookie="alerted=yes"
}
}

function loadalert(){
alert(alertmessage)
}

if (once_per_session==0)
loadalert()
else
alertornot()

</script>
</head>

<body>
    <div id="page">
                <div id="login">
                <a href="/login.php"><img src="/images/login.jpg"></a>
                </div>
                <?php include("nav.php");
                ?>

                </div>
    <div id="headerimage">
                <div class="picture">
                <div id="headerTitle">Management</div>
            <div id="headerTitleLogo"><img src="/images/lglogo.jpg"></div>
        </div>
    </div>
       <div class="contentBox">
                <div class="innerBox">
                <div class="contentTitle">Welcome to </div>
          <div id="contentText">
<p>Welcome to </p>
     </div>

       </div>
                  </div>
   <div id="footer">
                  <?php include("footer.html");
                   ?>

   </div>
</body>
</html>
2

Hi jpearl123. Welcome to the forums. :slight_smile:

Preferably post a live link, or put the code into a single file (CSS in the head) that has PHP removed, so we can actually test it in our own browser. At the moment we don’t have a working version of the page to debug.

Also, what browser is it failing in?

3

the nav.php is a dropdown css menu…that is what is being hidden behind the header…

4

the php is nav.php which simply the html of the html dropdown menu which is being hidden behind the header and header image, all browsers…

5

Well, I can only guess by looking through your code. The first thing I’d suggest is to remove overflow: hidden from the #page styles, because that will most likely prevent any dropdown items from being visible:

#page {
   display: block; 
   height:auto;
   position: relative; 
   [s][COLOR="#FF0000"]overflow: hidden;[/COLOR] [/s]
   width: 670px;
}
6

that fixed it, thank you!

7

do you have any ideas to make the footer look better?

8

Heh heh, at this stage I have no idea what it looks like.

9

Ralph.m I know this post is old but i have been dealing with this problem for along time . I have had so called coding “Pros” and even spent alittle money trying to fix this. I was told and tried so many other things , z-index: 1 , removing any and everything flash and nothing. Thanks alot for sharing your skills and replying

10

No probs. So this fixed your problem too? If so, that’s great.

Welcome to the forums. :slight_smile:

11

this is resolved…