CSS - Can someone help me figure out where I went wrong with my dropdown menu nav?

Question

I wanted to learn how to create a dropdown nav bar in the simplest and cleanest way possible. I followed this wiki how CSS-only dropdown menu guide, but it seems my code is not compatible with the suggested additions.

Could someone tell me where the conflicts within the code occur, or if there is a simpler way to implement a dropdown menu (familiar with jQuery/JavaScript if that's easier)?

HTML:

<!DOCTYPE html>

<html>

<head>

    <link type="text/css" rel="stylesheet" href="template_ss.css"/>

    <title></title>


    </div>
</head>

<body>

<!--------------------------header--------------------------->
    <div id="headerDiv">
        <div id="titleDiv">
            <p id= "titleText"><span>Your</span>Uni<span>verse</span></p>
        </div>

        <div class="navDiv">    
            <ul class="navUL">
                <li><a href="#!">Home</a></li>  
                <li>
                    <a href="#!">Universe</a>
                    <ul class="dropdown">
                        <li><a href="#!">1</a></li>
                        <li><a href="#!">2</a></li>
                        <li><a href="#!">3</a></li> 
                    </ul>
                </li>
                <li>
                    <p><a href="#!">Browse</a></p>
                    <ul class="dropdown">
                        <li><a href="#!">Planets</a></li>
                        <li><a href="#!">Galaxies</a></li>
                        <li><a href="#!">Odities</a></li>
                    </ul>   
                </li>
                <li>
                    <p><a href="#!">Random</a></p>
                    <ul class="dropdown">
                        <li><a href="#!">Quantum</a></li>
                        <li><a href="#!">Solar</a></li>
                        <li><a href="#!">Projectile</a></li>
                    </ul>   
                </li>
                <li>
                    <p><a href="#!">Profile</a></p>
                    <ul class="dropdown">
                        <li><a href="#!">My profile</a></li>
                        <li><a href="#!">Edit profile</a></li>
                    </ul>
                </li>
                <li>
                    <p><a href="#!">How it works</a></p>
                </li>
            </ul>
        </div>
        <div class="searchDiv">
            <form>
                <input type="text" placeholder="explore..." required>
                <input type="button" value="Search">
            </form>
        </div>
<!---------------------------body--------------------------->
    <div class="bodyDiv"></div>
</body>
</html>

CSS:

/*-------------------header----------------------*/
body{
margin:0px;
}
#headerDiv{
position: fixed;
height:12%;
width:100%;
background-image:url("deepspace.png");
background-repeat:repeat-x;
text-align: center;
}
#titleDiv{ 
width: auto;
margin: auto 0;
}
#titleText{
color:white;
font-size:130%;
text-allign:center;
font-family:verdana,san serif;
}
span:first-child{    
color:blue;
}
span{
color:purple;
}
.navDiv{
display:inline-block;
}
.navUL{
position:relative;
display:inline-block;
list-style-type:none;
margin: auto 0;
padding:0;
border-top:1 solid;
border-right:1 solid;
border-left:1 solid;
width:100%;
}
.navUL:after{
content:"";
display:table;
}
.navUL li{
padding: .2em 2em;
margin:2em,2em,2em,2em;
color: #fff;
background-color: #036;
display:inline-block;
text-align:center;
}
.dropdown{
position:absolute;
display:none;
background-color:white;
}
.navUL ul li:hover > ul{
display:inline;
}
.navUL>ul>li:after{
content:"\25BC";
font-size:.5em;
display:inline;
position:relative;
}
.searchDiv{
display:inline-block;
}
/*------------------body--------------------*/
.bodyDiv{
text-align:center;
float:left;
background-color:grey;
height:80%;
width:70%;
position:relative;
top:80%;
left:50%;
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}

Answer 1

The li at level 1 should has property position:relative , so that the child ul will be able to set the position according to its parent. I make some changes, see the fiddle: click here

CSS - Can someone help me figure out where I went wrong with my dropdown menu nav?

Question

1 answers

solution1
0 2015-11-10 02:24:22

CSS - Can someone help me figure out where I went wrong with my dropdown menu nav?

Question

1 answers

solution1 0 2015-11-10 02:24:22

solution1
0 2015-11-10 02:24:22