CODEWITHSUNDEEP
htmlcssz-indexopacity
Peege151
Peege151

Reputation: 1560

Submenu of Nav Bar Appears Underneath Another Div

I searched this and toyed with the Z-Axis stuff, but to no avail. Basically, my nav bar has submenus that appear underneath the div below it. That div has an opacity thing going on, which must have something to do with it. I need these to display above the div!!

JS Fiddle: http://jsfiddle.net/Peege151/7gGJp/1/

I'd ask to expand your browser so the nav bar is all on one line.

Here is my HTML Code:

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href="style.css" type="text/css" rel="stylesheet" />

    <title></title>
</head>
<body style="overflow-x: hidden;scrolling:no;">
    <div id="header"> 
      <div id="searchcontainer">
          <div id="searchlinks">
              <p><a href="###">Full Suite of Services</a> | <a href="###contact">Contact Us</a></p>   
          </div> 
        <div id="searchform">
            <form  action ="##">
                Search Site: <input type="search" style="border-radius: 10px;">
                <input type="image" src="images/search.png" style="height:20px; width:20px;      position:relative;top:5px;">
            </form>
            <br>
        </div>
       </div>
        <div id="navbar">
            <ul id="nav">
                <li> Home </li>
                <li>Services 
                    <ul>
                        <li> Full Suite of Services </li>                  
                    </ul>
                </li>   
                <li> <a href="case_studies/index"> Case Studies</a> 
                    <ul>    
                        <li><a href="case_studies/thing1"> Thing1</a> </li>
                        <li><a href="case_studies/thing2">Thing2 </a> </li>
                        <li><a href="case_studies/thing3"> Thing3 </a></li>
                    </ul>
                </li>
                <li>Partners 
                    <ul>
                        <li> Guy1</li>
                        <li> TOP HALF OF NAME!!! OMG </li>
                    </ul>
                </li>
                <li>Contact Us</li>
            </ul>
        </div>
    </div>
    <div id="division"></div>

    <div id="intro" class="overlay">
    </div> 
    <div id="biocontactwrap">
        <div id="biotext"></div>
        <div id="contact_pat"> </div>

    </div>
    <div id="quote">
    </div>
    <?php
    // put your code here
    ?>
</body>
</html>

Here is my CSS:

/* 
    Document   : style
    Created on : Nov 12, 2013, 11:51:06 AM
    Author     : ShiftedRec
    Description:
        Purpose of the stylesheet follows.
*/
body {
    background-image: url(images/wall1.gif);
        width:100%;
        margin:0;
        padding:0;
        overflow-x:hidden;


}
root { 
    display: block;
}

#header {
    height:150px;
    width:100%;  
    clear:both;
    overflow:hidden;
}

#searchcontainer{
    width:305px;
    height:60px;
    float:right;
    position:relative;bottom:20px;
}
#searchlinks {
    clear:right;
    float:right;
    width:300px;
    position:relative;top: 10px; left:80px;
    font-size:50%;



}
#searchlinks a{
   font-size:50%;

}
#searchform {
    float:right;
    clear:left;
    width:300px;
    clear:left;
}
.clear{
    clear:both;
}
#navbar {
    float:right;
    margin-right:10%;
    width:50%;
    text-align: right;
    clear:right;

}
#navbar ul{ 
    padding: 0 10px;
    list-style: none;
    position: relative;
    display: inline-table;
        overflow:visible;
}
#navbar ul li {
    position:relative;
   display: inline-block

}
#navbar ul ul{
    display:none; 
    position:absolute;
    top:1em;
    left:0
}
#navbar ul > li:hover ul {
    display:inline-table;
    margin:0;
    overflow:visible;
    z-index: 4;
}
#navbar ul li:hover {
        background: #4b545f;
        background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
        background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
        background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
#navbar ul li ul li {
    display:block;
}
#navbar li {
    display: inline-block;
    margin: 10px;  
    white-space: nowrap;
}

#division {
    height:15px;
    background-color:#9E0000;
    overflow:visible;
}
#intro{
    height:200px;
    width:100%;
    z-index: 1;

}
#biocontactwrap {
      width:100%;
      height: 600px;
          margin-bottom: 10px

}
.overlay {
    z-index: 1;
    height: 100%;
    width: 100%;
    position: relative;top:300px;
    overflow: auto;
    top: 0px;
    left: 0px;
    background: rgba(0, 0, 0, .1); /*can be anything, of course*/
    box-shadow: 0px 9px 9px rgba(0,0,0.9,0.95);
}
#biotext {
    margin-left:15%;
    width:40%;
    height:100%;
    padding:0px;
    border: solid blue;
    float:left;
}
#contact_pat{
    width:25%;
    height:100%;
    border: solid yellow;
    float: right;
    margin-right:15%
}
#quote {
    width:100%;
    background-color:blue;
    height: 300px;
}

Thanks so much guys! Please be nice. I'm a noobie!

EDIT One problem causes another!

The reason I had done overflow in the header was because even though I had width:100% there was a scrollbar at the bottom of the page (horiz) that would allow me to scroll over to empty space.

When I had overflow:hidden; in the header, that solved that problem but then hid my nav bar submenus.

I tried to do overflow-x:hidden; overflow-y:visible, but having the Y-visible combined with the X-hidden I guess is bugged and it just reads as "auto!"

Anyway to have both NO X scroll and NO hidden Y submenu's? Thanks guys..

Upvotes: 1

Views: 1303

Answers (1)

Alexnho
Alexnho

Reputation: 136

It happens because of the overflow: hidden; in the #header. Remove it and the navigation will be displayed.

Upvotes: 2

Related Questions