我想让我的“诗歌从我”和“诗从互联网”下拉列表进入“关于”选项下的“诗歌”部分。但现在有问题了。这个下拉列表在“关于”下拉列表后面,我想将它移动到左边的“Poems”选项(我试图使用margin-left:250px)但它没有用)。我也希望每当鼠标在“诗歌”栏目中的“来自互联网的诗”和“我的诗”中出现的时间不是我悬停在“关于”部分的时间! 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>
我的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;
}
答案 0 :(得分:0)
这是你的意思吗?
.navigation ul {
display: none;
position: relative;
top: -40px;
left: 250px;
list-style-type: none;
margin: 0;
padding: 0;
}
.navigation li:hover ul {
display: block;
}