CSS-有人可以帮助我找出下拉菜单导航出现的问题吗？

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. 我按照这个wiki的 CSS-only下拉菜单指南进行操作，但是看来我的代码与建议的添加内容不兼容。

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)? 有人可以告诉我代码中的冲突发生在哪里，或者是否有一种更简单的方法来实现下拉菜单（如果更简单，请熟悉jQuery / JavaScript）？

HTML: 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: 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. 级别1的li应该具有position:relative属性，以便子ul能够根据其父项设置位置。 I make some changes, see the fiddle: click here 我进行了一些更改，请参见小提琴：单击此处

CSS-有人可以帮助我找出下拉菜单导航出现的问题吗？

问题描述

1 个解决方案

解决方案1
0 2015-11-10 02:24:22

CSS-有人可以帮助我找出下拉菜单导航出现的问题吗？

问题描述

1 个解决方案

解决方案1 0 2015-11-10 02:24:22

解决方案1
0 2015-11-10 02:24:22