Dropdown list In Navigation Bar
Question
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). 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/
<!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:
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 answers
solution1
0 ACCPTED 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/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Sub Dropdown list In Navigation Bar
Make navigation bar with onhover dropdown list
Dropdown from navigation bar
dropdown form in a navigation bar
CSS dropdown navigation bar
Navigation Bar Dropdown Issue
Dropdown Navigation Bar
dropdown on navigation bar
Dropdown navigation bar
Navigation bar dropdown not working
Related Tags