CSS-需要帮助找出下拉菜单导航出错的地方

Question

Hi I posted two days ago and got some feedback but am still having issue getting my drop down nav working. 嗨，我两天前发布了一些反馈，但是在让我的下拉导航正常工作时仍然遇到问题。 Any feedback on how I can get my drop down nav working or if there is a cleaner, simpler way to execute this? 关于如何使下拉式导航仪正常工作或是否有更清洁，更简单的方式执行此操作的任何反馈？

Here is my code as it stands now with the fixes from the previous post implemented. 这是我现在的代码，其中包含以前实现的修复程序。

JSfiddle as well. JSfiddle也是如此。

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>Ti</span>t<span>le</span></p>
        </div>
        <div class="navDiv">    
            <ul class="navUL">
                <li><a href="#!">Home</a></li>  
                <li>
                    <a href="#!">Top</a>
                    <ul class="dropdown">
                        <li><a href="#!">Menu</a></li>
                        <li><a href="#!">Plus</a></li>
                        <li><a href="#!">Constant</a></li>  
                    </ul>
                </li>
                <li>
                    <a href="#!">Browse</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>
                    <a href="#!">Random</a>
                    <ul class="dropdown">
                        <li><a href="#!">blank</a></li>
                        <li><a href="#!">none</a></li>
                        <li><a href="#!">all</a></li>
                    </ul>   
                </li>
                <li>
                    <a href="#!">Profile</a>
                    <ul class="dropdown">
                        <li><a href="#!">My profile</a></li>
                        <li><a href="#!">Edit profile</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#!">How it works</a>
                </li>
            </ul>
        </div>
        <div class="searchDiv">
            <form>
                <input type="text" placeholder="blah..." 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("header.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:red;
}
span{
color:blue;
}
.navDiv{
display:inline-block;
z-index:10;
}
.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;
position:relative;
}
.navUL li:hover{
background-color:#07427c;
}
.navUL li a{
color:#fff;
}
.navUL li p{
margin:0;
}
.dropdown{
position:absolute;
display:none;
background-color:#036;
padding:0
left:0;
}
.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

I can't be sure exactly what you're looking for, since neither of your two posts specified what your question was, but from looking at your jsfiddle, I saw two noticeable fixes that were needed. 我不确定您要查找的是什么，因为您的两个帖子都没有指定您的问题，但是通过查看您的jsfiddle，我看到了需要进行两个明显的修复。 First, your html body was floating up into your nav. 首先，您的html主体正浮动到您的导航中。 You need to clear those floats. 您需要清除这些浮标。 Secondly, your css for displaying the dropdown was invalid. 其次，您用于显示下拉列表的CSS无效。 You were setting a rule on .navUL ul li:hover > ul . 您正在对.navUL ul li:hover > ul设置规则。 Since .navUL is the class of the unordered list, it has no child ul . 由于.navUL是无序列表的类，因此没有子ul 。 The proper path would be ul.navUL li:hover ul . 正确的路径是ul.navUL li:hover ul 。

Here is an update of your jsfiddle 这是您的jsfiddle的更新

CSS-需要帮助找出下拉菜单导航出错的地方

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-11-12 05:01:17

CSS-需要帮助找出下拉菜单导航出错的地方

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-11-12 05:01:17

解决方案1
1 已采纳 2015-11-12 05:01:17