个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我想学习如何以最简单、最干净的方式创建下拉导航栏。我跟着这个wiki how纯 CSS 下拉菜单指南，但我的代码似乎与建议的添加不兼容。
谁能告诉我代码中的冲突发生在哪里，或者是否有更简单的方法来实现下拉菜单(如果更容易，熟悉 jQuery/JavaScript)？
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%);
}
最佳答案
第 1 层的 li 应该有属性 position:relative，这样子 ul 就可以根据其父级设置位置。我做了一些更改，请参阅 fiddle :click here
关于javascript - CSS - 谁能帮我弄清楚我的下拉菜单导航哪里出了问题？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33621500/
25
4
0
嗨，我是第一次玩 Pig，我很好奇如何处理将一个字段拆分成多个其他字段。 我有一个包，A，如下图: grunt> Dump A; (text, text, Mon Mar 07 12:00:00 CD
如何添加架构中未定义的固定字段(例如日期或月份)？我运行了以下 pig 脚本以将固定日期添加到我的结果表中，并收到以下错误消息:Invalid field projection。方案中不存在投影字段
我是一名优秀的程序员,十分优秀！