导航栏中的下拉列表
[英]Dropdown list In Navigation Bar
问题描述
I want to make my "Poem From Me" and "Poem From Internet" drop down list going to under "Poems" section which is under About option. 
我想将“我的诗”和“互联网诗”下拉列表转到“关于”选项下的“诗”部分下。 But now there is problem in there. 但是现在那里有问题。 This drop down list is behind "About" drop down list and i want to move it to the left next "Poems" option (I tried to use margin-left:250px) but it didn't work). 此下拉列表位于“关于”下拉列表的后面，我想将其移至下一个“诗”选项的左侧（我尝试使用margin-left：250px），但是没有用。 I also want that whenever the person over his mouse on the "Poems" section the "Poem From Internet" and "Poem From Me" appears not the time that i hover over the "About" section! 我还希望每当有人用鼠标单击“诗”部分中的“来自互联网的诗”和“来自我的诗”时，都不要让我将鼠标悬停在“关于”部分上！ http://jsfiddle.net/2r1hbr3k/2/embedded/result/ , http://jsfiddle.net/2r1hbr3k/2/ http://jsfiddle.net/2r1hbr3k/2/embedded/result/ ， http://jsfiddle.net/2r1hbr3k/2/
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="shortcut icon" href="Photo.ico">
<link href="StyleSheet.css" rel="stylesheet" />
<link href="animate.css" rel="stylesheet" />
<link href="animations.css" rel="stylesheet" />
<link href="hover.css" rel="stylesheet" />
<link href="gooeymenu.css" rel="stylesheet" />
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<script src="gooeymenu.js"></script>
<title>Social Activism</title>
</head>
<body>
<div style="background:#F5F5F0;">
<div>
<div style="float:left; margin-top:0; left:20px;"><img class="buzz" src="community-activism.png" width="80" height="80" /></div>
<h1 style="color:black; opacity:40;" class="shrink"><strong> Social Activism</strong></h1>
</div>
<br />
<div id="nav">
<div id="nav_wrapper" style="margin:0 auto; display:inline-block;">
</div>
<div>
<ul class="navigation">
<a class="main" href="#url" style="color:black;" id="blue">Home</a>
</ul>
<ul class="navigation">
<a class="main" href="#url" style="color:black;" id="blue">About ▼</a>
<li class="n1" id="selection">
<a href="Poem-From%20Internet.html" id="option">Poems ►</a>
<ul>
<li class="n6">
<a href="#" id="option"> Poem From Internet </a>
</li>
<li class="n7">
<a href="#" id="option"> Poem By Me </a>
</li>
</ul>
</li>
<li class="n2" id="selection">
<a href="#" id="option"> Informational Media </a>
</li>
<li class="n3" id="selection">
<a href="#" id="option"> Visual/Video </a>
</li>
<li class="n4" id="selection">
<a href="#" id="option"> Photo Essay </a>
</li>
<li class="n5" id="selection">
<a href="#" id="option"> Me </a>
</li>
</ul>
<ul class="navigation">
<a class="main" href="#url" style="color:black;" id="blue">From Internet ▼ </a>
<li class="n1" id="selection">
<a href="Poem-From%20Internet.html" id="option">Poem</a>
</li>
<li class="n2" id="selection">
<a href="#" id="option"> Informational Media </a>
</li>
<li class="n3" id="selection">
<a href="#" id="option"> Visual/Video </a>
</li>
<li class="n4" id="selection">
<a href="#" id="option"> Photo Essay </a>
</li>
</ul>
<ul class="navigation">
<a class="main" href="#url" style="color:black;" id="blue">By Me ▼</a>
<li class="n1" id="selection">
<a href="poem%20-%20faraz%20akbari.html" id="option">Poem</a>
</li>
<li class="n2" id="selection">
<a href="#" id="option"> Informational Media </a>
</li>
<li class="n3" id="selection">
<a href="#" id="option"> Visual/Video </a>
</li>
<li class="n4" id="selection">
<a href="#" id="option"> Photo Essay </a>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
My CSS File: 我的CSS文件：
body {
background: #DCDCD8;
}
h2 {
text-align: center;
color: #CCC;
}
a {
display: block;
text-decoration: none;
width: 100%;
height: 100%;
color: #999;
}
/* NAVIGATION */
.navigation {
list-style: none;
padding: 0;
width: 250px;
height: 40px;
margin: 0;
background: #F5F5F0;
position: relative;
z-index: 100;
display: inline-block;
vertical-align:top;
left:5px;
top:0px;
}
.navigation, .navigation a.main {
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}
.navigation:hover, .navigation:hover a.main {
border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
}
.navigation a.main {
height: 40px;
font: bold 15px/40px arial, sans-serif;
text-align: center;
text-decoration: none;
color: #FFF;
-webkit-transition: 0.2s ease-in-out;
-o-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
position: relative;
z-index: 100;
display: inline-block;
}
.navigation li {
width: 250px;
height: 40px;
background: #F7F7F7;
font: normal 14px/40px arial, sans-serif !important;
color: #999;
text-align: center;
margin: 0;
-webkit-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: perspective(350px) rotateX(-90deg);
-o-transform: perspective(350px) rotateX(-90deg);
transform: perspective(350px) rotateX(-90deg);
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
-webkit-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
}
.navigation li:nth-child(even) {
background: #F5F5F5;
}
.navigation li:nth-child(odd) {
background: #EFEFEF;
}
.navigation li.n1 {
-webkit-transition: 0.2s linear 0.8s;
-o-transition: 0.2s linear 0.8s;
transition: 0.2s linear 0.8s;
}
.navigation li.n2 {
-webkit-transition: 0.2s linear 0.6s;
-o-transition: 0.2s linear 0.6s;
transition: 0.2s linear 0.6s;
}
.navigation li.n3 {
-webkit-transition: 0.2s linear 0.4s;
-o-transition: 0.2s linear 0.4s;
transition: 0.2s linear 0.4s;
}
.navigation li.n4 {
-webkit-transition: 0.2s linear 0.2s;
-o-transition: 0.2s linear 0.2s;
transition: 0.2s linear 0.2s;
}
.navigation li.n5 {
border-radius: 0px 0px 4px 4px;
-webkit-transition: 0.2s linear 0s;
-o-transition: 0.2s linear 0s;
transition: 0.2s linear 0s;
}
.navigation:hover li {
-webkit-transform: perspective(350px) rotateX(0deg);
-o-transform: perspective(350px) rotateX(0deg);
transform: perspective(350px) rotateX(0deg);
-webkit-transition: 0.2s linear 0s;
-o-transition: 0.2s linear 0s;
transition: 0.2s linear 0s;
}
.navigation:hover .n2 {
-webkit-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.navigation:hover .n3 {
-webkit-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.navigation:hover .n4 {
transition-delay: 0.6s;
-o-transition-delay: 0.6s;
transition-delay: 0.6s;
}
.navigation:hover .n5 {
transition-delay: 0.8s;
-o-transition-delay: 0.8s;
transition-delay: 0.8s;
}
#option:hover ,#blue:hover {
color: white;
background-color:#19A3FF;
}
#option:active {
color: white;
background-color:#1c5f8d;
}
#blue:active {
color: white;
background-color: #1c5f8d;
}
#option {
color: black;
}
#blue {
color: black;
}
1 个解决方案
解决方案1
0 已采纳 2014-11-16 02:41:43
Is this what you meant? 这是你的意思吗？
.navigation ul {
display: none;
position: relative;
top: -40px;
left: 250px;
list-style-type: none;
margin: 0;
padding: 0;
}
.navigation li:hover ul {
display: block;
}
Here's a fiddle: http://jsfiddle.net/Niffler/bxuv14Ld/ 这是一个小提琴： http : //jsfiddle.net/Niffler/bxuv14Ld/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
导航栏中的子下拉列表 - Sub Dropdown list In Navigation Bar
使用悬停下拉列表制作导航栏 - Make navigation bar with onhover dropdown list
导航栏下拉菜单 - Dropdown from navigation bar
导航栏中的下拉表单 - dropdown form in a navigation bar
CSS 下拉导航栏 - CSS dropdown navigation bar
导航栏下拉问题 - Navigation Bar Dropdown Issue
下拉导航栏 - Dropdown Navigation Bar
导航栏上的下拉菜单 - dropdown on navigation bar
下拉导航栏 - Dropdown navigation bar
导航栏下拉菜单不起作用 - Navigation bar dropdown not working
相关标签