CODEWITHSUNDEEP
javascriptcsshtml
AD.
AD.

Reputation: 329

Dropdown Menu not Showing when absolute position is used

I am trying to create a simple webpage using HTML/CSS/JS that has some dropdown menu when hovering on the nav_menu. When I use absolute position in div for dropdown menu, it is not popping up when hovering(It drops down when relative position is used but I want it to be absoute). I think the problem is in my css?

This is the body part of my HTML code (#subnav, #subnav1, #subnav2 and #subnav3 are the four dropdown menus):

$(document).ready(function(){
            var total = 4;
            var current = 1;
            $("#img1").show()
            $("#btnNext").click(function(){
                current++;
                if(current>total){current=1;}     
                $(".imgss").hide();
                $("#img"+ current).show(10);
            });
            $("#btnPrev").click(function(){
                current--;
                if(current<1){current=total;}     
                $(".imgss").hide();
                $("#img"+ current).show(10);
            });

            $("#listHome").mouseenter(function(){
                $("#subnav").slideDown(200);
                $("#subnav1").slideUp(0);
                $("#subnav2").slideUp(0);   
                $("#subnav3").slideUp(0);
            });
            $("#subnav").mouseleave(function(){
                    $("#subnav").slideUp(200);  
            });


            $("#listAbout").mouseenter(function(){
                $("#subnav1").slideDown(200);
                $("#subnav").slideUp(0);
                $("#subnav2").slideUp(0);
                $("#subnav3").slideUp(0);

            });
            $("#subnav1").mouseleave(function(){
                $("#subnav1").slideUp(200);
            });

            $("#listServices").mouseenter(function(){
                $("#subnav2").slideDown(200);
                $("#subnav1").slideUp(0);
                $("#subnav").slideUp(0);
                $("#subnav3").slideUp(0);
            });
            $("#subnav2").mouseleave(function(){
                $("#subnav2").slideUp(200);
            });
            $("#listExtra").mouseenter(function(){
                $("#subnav3").slideDown(200);
                $("#subnav1").slideUp(0);
                $("#subnav").slideUp(0);
                $("#subnav2").slideUp(0);
            });
            $("#subnav3").mouseleave(function(){
                $("#subnav3").slideUp(200);
            })
        });
*{padding:0;margin:0;}
        a.ahr:link{color:grey}
        a.ahr:visited{color:white}
        a.ahr:hover{color:red}
        #pj{padding: 5px 0px 0px 0px;}
        #title{text-align:center; background:linear-gradient(to left, white , grey) ;height:50px;border:thick 333333 solid}

        #text{float:right; width:70%; padding:45px 10px 0px 0px;position:relative; border-bottom:thin black dashed; background:linear-gradient(to bottom, CCCCCC , CCCCCC);  transform: skew(0,0);}
        #imgs{ height:100%; background:linear-gradient(to top, white , grey);position:fixed; padding:70px 30px 0px 30px; float:left;width:23% ; clear:both; position:absolute}

        #nav{background:linear-gradient(to left, black , grey); height:20px;text-valign:center;padding:2px;text-decoration:none; width:100%;}
        #subnav{background:white; width:15%; text-align:center; position:absolute; margin:0px 0px 0px 1%;display:none; border-bottom:thin grey solid; border-right:thin white solid; border-left:thin white solid;}
        #subnav1{background:white; width:15%; text-align:center; position:absolute;margin:0px 0px 0px 4%;display:none; border-bottom:thin grey solid; border-right:thin white solid; border-left:thin white solid;}
        #subnav2{background:white; width:15%; text-align:center; position:absolute;margin:0px 0px 0px 9%;display:none; border-bottom:thin grey solid; border-right:thin white solid; border-left:thin white solid;}
        #subnav3{background:white; width:15%; text-align:center; position:absolute;margin:0px 0px 0px 15%;display:none; border-bottom:thin grey solid; border-right:thin white solid; border-left:thin white solid;}
        #cpyr{background: linear-gradient(to right, black , grey); text-align:center;position:fixed; bottom:0px; width:100%; color:white}
        #ul1 li a{text-decoration:none}
        #ul2 li a{text-decoration:none}
        #ul3 li a{text-decoration:none}
        #ul4 li a{text-decoration:none}
        #ul5 li a{text-decoration:none}
        #btnNext{width:50px}
        #btnPrev{width:50px}
        #imgbtn{padding:0px 95px; display:inline}
        #ul1 li {list-style-type:none; padding:2px 10px}
        #ul2 li {list-style-type:none; padding:2px 10px}
        #ul3 li {list-style-type:none; padding:2px 10px}
        #ul4 li {list-style-type:none; padding:2px 10px}
        #ul5 li {list-style-type:none; padding:2px 10px}
        img.imgss{width:300px; height:300px; display:none; border:thick 333333 solid;}
        .uList{ display:inline; border-right:thin white solid; padding:2px}
        .uList1{border-bottom:thin white solid; padding:10px;}
        .uList2{border-bottom:thin white solid; padding:10px;}
        .uList3{border-bottom:thin white solid; padding:10px}
        .uList4{border-bottom:thin white solid; padding:10px}
        body{background-color:CCCCCC;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <div id="container">
        <div id="title"><h1 id="pj">Welcome</h1></div>
        <div id="nav">
            <ul id="ul1" >
                <li class="uList" id="listHome"><a class="ahr" href="index.html">Home</a></li>
                <li class="uList" id="listAbout"><a class="ahr" href="index.html">About</a></li>
                <li class="uList" id="listServices"><a class="ahr" href="index.html">Services</a></li>
                <li class="uList" id="listExtra"><a class="ahr" href="index.html">Extras</a></li>
            </ul>
        </div>
        <div id="subnav">
            <ul id="ul2" >
                <li class="uList1"><a class="ahr" href="proj.html">Home Option 1</a></li>
                <li class="uList1"><a class="ahr" href="proj.html">Home Option 2</a></li>
                <li class="uList1"><a class="ahr" href="proj.html">Home Option 3</a></li>
                <li class="uList1"><a class="ahr" href="proj.html">Home Option 4</a></li>
            </ul>
        </div>
        <div id="subnav1">
            <ul id="ul3" >
                <li class="uList2"><a class="ahr" href="proj.html">About Option 1</a></li>
                <li class="uList2"><a class="ahr" href="proj.html">About Option 2</a></li>
                <li class="uList2"><a class="ahr" href="proj.html">About Option 3</a></li>
                <li class="uList2"><a class="ahr" href="proj.html">About Option 4</a></li>
            </ul>
        </div>
        <div id="subnav2">
            <ul id="ul4" >
                <li class="uList3"><a class="ahr" href="proj.html">Services Option 1</a></li>
                <li class="uList3"><a class="ahr" href="proj.html">Services Option 2</a></li>
                <li class="uList3"><a class="ahr" href="proj.html">Services Option 3</a></li>
                <li class="uList3"><a class="ahr" href="proj.html">Services Option 4</a></li>
            </ul>
        </div>
        <div id="subnav3">
            <ul id="ul5" >
                <li class="uList4"><a class="ahr" href="proj.html">Extra Option 1</a></li>
                <li class="uList4"><a class="ahr" href="proj.html">Extra Option 2</a></li>
                <li class="uList4"><a class="ahr" href="proj.html">Extra Option 3</a></li>
                <li class="uList4"><a class="ahr" href="proj.html">Extra Option 4</a></li>
            </ul>
        </div>

        <div id="imgs">
            <img src="images/cat.jpg" class="imgss" id="img1"/>
            <img src="images/earth.jpg" class="imgss" id="img2"/>
            <img src="images/shark.jpg" class="imgss" id="img3"/>
            <img src="images/polar.jpg" class="imgss" id="img4"/><br>
            <div id="imgbtn">
                <button id="btnPrev" class="btns"><<</button>
                <button id="btnNext" class="btns">>></button>
            </div>
        </div>
        <div id="text">
            <h3>PROJECT</h3>
            **********************************************************************************************
            **********************************************************************************************

        </div>
        <div id="cpyr">Copyright &copy; 2018</h1></div>
        </div>

    </div>
</body>

Upvotes: 2

Views: 1509

Answers (2)

ThS
ThS

Reputation: 4783

you have to add this rule for the #container div 

#container {
    position: relative;
}

PS: Your CSS is a little bit messy, I suggest instead of rewriting the same rules for each sub menu, you could give them a class and write these rules once, and here you add another rule that you missed the z-index attribute.

Here's an example: For each sub menu div you give it a class, and write the rules one time for all the sub menus, and make your CSS clean and the browser happy. 

.sub-menu {
    background: white;
    width: 15%;
    text-align: center;
    position: absolute;
    margin: 0px 0px 0px 4%;
    display: none;
    border-bottom: thin grey solid;
    border-right: thin white solid; 
    border-left: thin white solid;
    z-index: 100;
}

Upvotes: 1

kravisingh
kravisingh

Reputation: 1660

You just have to add z-index to #subnav, #subnav1, #subnav2, #subnav3 like this:

$(document).ready(function(){
            var total = 4;
            var current = 1;
            $("#img1").show()
            $("#btnNext").click(function(){
                current++;
                if(current>total){current=1;}     
                $(".imgss").hide();
                $("#img"+ current).show(10);
            });
            $("#btnPrev").click(function(){
                current--;
                if(current<1){current=total;}     
                $(".imgss").hide();
                $("#img"+ current).show(10);
            });

            $("#listHome").mouseenter(function(){
                $("#subnav").slideDown(200);
                $("#subnav1").slideUp(0);
                $("#subnav2").slideUp(0);   
                $("#subnav3").slideUp(0);
            });
            $("#subnav").mouseleave(function(){
                    $("#subnav").slideUp(200);  
            });


            $("#listAbout").mouseenter(function(){
                $("#subnav1").slideDown(200);
                $("#subnav").slideUp(0);
                $("#subnav2").slideUp(0);
                $("#subnav3").slideUp(0);

            });
            $("#subnav1").mouseleave(function(){
                $("#subnav1").slideUp(200);
            });

            $("#listServices").mouseenter(function(){
                $("#subnav2").slideDown(200);
                $("#subnav1").slideUp(0);
                $("#subnav").slideUp(0);
                $("#subnav3").slideUp(0);
            });
            $("#subnav2").mouseleave(function(){
                $("#subnav2").slideUp(200);
            });
            $("#listExtra").mouseenter(function(){
                $("#subnav3").slideDown(200);
                $("#subnav1").slideUp(0);
                $("#subnav").slideUp(0);
                $("#subnav2").slideUp(0);
            });
            $("#subnav3").mouseleave(function(){
                $("#subnav3").slideUp(200);
            })
        });
*{padding:0;margin:0;}
        a.ahr:link{color:grey}
        a.ahr:visited{color:white}
        a.ahr:hover{color:red}
        #pj{padding: 5px 0px 0px 0px;}
        #title{text-align:center; background:linear-gradient(to left, white , grey) ;height:50px;border:thick 333333 solid}

        #text{float:right; width:70%; padding:45px 10px 0px 0px;position:relative; border-bottom:thin black dashed; background:linear-gradient(to bottom, CCCCCC , CCCCCC);  transform: skew(0,0);}
        #imgs{ height:100%; background:linear-gradient(to top, white , grey);position:fixed; padding:70px 30px 0px 30px; float:left;width:23% ; clear:both; position:absolute}

        #nav{background:linear-gradient(to left, black , grey); height:20px;text-valign:center;padding:2px;text-decoration:none; width:100%;}
        #subnav{background:white; width:15%; text-align:center; position:absolute; margin:0px 0px 0px 1%;display:none; border-bottom:thin grey solid; border-right:thin white solid; border-left:thin white solid;z-index: 9;}
        #subnav1{background:white; width:15%; text-align:center; position:absolute;margin:0px 0px 0px 4%;display:none; border-bottom:thin grey solid; border-right:thin white solid; border-left:thin white solid;z-index: 9;}
        #subnav2{background:white; width:15%; text-align:center; position:absolute;margin:0px 0px 0px 9%;display:none; border-bottom:thin grey solid; border-right:thin white solid; border-left:thin white solid;z-index: 9;}
        #subnav3{background:white; width:15%; text-align:center; position:absolute;margin:0px 0px 0px 15%;display:none; border-bottom:thin grey solid; border-right:thin white solid; border-left:thin white solid;z-index: 9;}
        #cpyr{background: linear-gradient(to right, black , grey); text-align:center;position:fixed; bottom:0px; width:100%; color:white}
        #ul1 li a{text-decoration:none}
        #ul2 li a{text-decoration:none}
        #ul3 li a{text-decoration:none}
        #ul4 li a{text-decoration:none}
        #ul5 li a{text-decoration:none}
        #btnNext{width:50px}
        #btnPrev{width:50px}
        #imgbtn{padding:0px 95px; display:inline}
        #ul1 li {list-style-type:none; padding:2px 10px}
        #ul2 li {list-style-type:none; padding:2px 10px}
        #ul3 li {list-style-type:none; padding:2px 10px}
        #ul4 li {list-style-type:none; padding:2px 10px}
        #ul5 li {list-style-type:none; padding:2px 10px}
        img.imgss{width:300px; height:300px; display:none; border:thick 333333 solid;}
        .uList{ display:inline; border-right:thin white solid; padding:2px}
        .uList1{border-bottom:thin white solid; padding:10px;}
        .uList2{border-bottom:thin white solid; padding:10px;}
        .uList3{border-bottom:thin white solid; padding:10px}
        .uList4{border-bottom:thin white solid; padding:10px}
        body{background-color:CCCCCC;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <div id="container">
        <div id="title"><h1 id="pj">Welcome</h1></div>
        <div id="nav">
            <ul id="ul1" >
                <li class="uList" id="listHome"><a class="ahr" href="index.html">Home</a></li>
                <li class="uList" id="listAbout"><a class="ahr" href="index.html">About</a></li>
                <li class="uList" id="listServices"><a class="ahr" href="index.html">Services</a></li>
                <li class="uList" id="listExtra"><a class="ahr" href="index.html">Extras</a></li>
            </ul>
        </div>
        <div id="subnav">
            <ul id="ul2" >
                <li class="uList1"><a class="ahr" href="proj.html">Home Option 1</a></li>
                <li class="uList1"><a class="ahr" href="proj.html">Home Option 2</a></li>
                <li class="uList1"><a class="ahr" href="proj.html">Home Option 3</a></li>
                <li class="uList1"><a class="ahr" href="proj.html">Home Option 4</a></li>
            </ul>
        </div>
        <div id="subnav1">
            <ul id="ul3" >
                <li class="uList2"><a class="ahr" href="proj.html">About Option 1</a></li>
                <li class="uList2"><a class="ahr" href="proj.html">About Option 2</a></li>
                <li class="uList2"><a class="ahr" href="proj.html">About Option 3</a></li>
                <li class="uList2"><a class="ahr" href="proj.html">About Option 4</a></li>
            </ul>
        </div>
        <div id="subnav2">
            <ul id="ul4" >
                <li class="uList3"><a class="ahr" href="proj.html">Services Option 1</a></li>
                <li class="uList3"><a class="ahr" href="proj.html">Services Option 2</a></li>
                <li class="uList3"><a class="ahr" href="proj.html">Services Option 3</a></li>
                <li class="uList3"><a class="ahr" href="proj.html">Services Option 4</a></li>
            </ul>
        </div>
        <div id="subnav3">
            <ul id="ul5" >
                <li class="uList4"><a class="ahr" href="proj.html">Extra Option 1</a></li>
                <li class="uList4"><a class="ahr" href="proj.html">Extra Option 2</a></li>
                <li class="uList4"><a class="ahr" href="proj.html">Extra Option 3</a></li>
                <li class="uList4"><a class="ahr" href="proj.html">Extra Option 4</a></li>
            </ul>
        </div>

        <div id="imgs">
            <img src="images/cat.jpg" class="imgss" id="img1"/>
            <img src="images/earth.jpg" class="imgss" id="img2"/>
            <img src="images/shark.jpg" class="imgss" id="img3"/>
            <img src="images/polar.jpg" class="imgss" id="img4"/><br>
            <div id="imgbtn">
                <button id="btnPrev" class="btns"><<</button>
                <button id="btnNext" class="btns">>></button>
            </div>
        </div>
        <div id="text">
            <h3>PROJECT</h3>
            **********************************************************************************************
            **********************************************************************************************

        </div>
        <div id="cpyr">Copyright &copy; 2018</h1></div>
        </div>

    </div>
</body>

Hope this will help you.

Upvotes: 3

Related Questions