Adding drop down to a menu bar

label Programming
account_circle Unassigned
schedule 10 Days
account_balance_wallet $5

Hello

I got this nav bar I made in HTML5 and CSS. http://cssdeck.com/labs/yavhvjxz

I want to add this dropdown to the nav bar http://cssdeck.com/labs/soothing-css3-dropdown-animation without making any changes to the nav bar, I only need  to add the dropdown to the menu bar. Nothing else.

Thanks

Aug 6th, 2013
<!-- <div id="topbar" class="fadeInOnLoad">
<div class="inner-topbar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Upload</a></li>
</ul>

</div> <!-- inner-topbar -->
</div> <!-- topbar -->
->
<nav>
<ul>
<li class="drop">
<a href="#">Home</a>

<div class="dropdownContain">
<div class="dropOut">
<div class="triangle"></div>
<ul>
<li>Home menu 1</li>
<li>Home menu 2</li>
</ul>
</div>
</div>
</li>

<li class="drop">
<a href="#">About</a>

<div class="dropdownContain">
<div class="dropOut">
<div class="triangle"></div>
<ul>
<li>About 1</li>
<li>About 2</li>
</ul>
</div>
</div>
</li>

<li class="drop">
<a href="#">Contact</a>

<div class="dropdownContain">
<div class="dropOut">
<div class="triangle"></div>
<ul>
<li>Contact 1</li>
<li>Contact 2</li>
</ul>
</div>
</div>
</li>

<li class="drop">
<a href="#">Upload</a>

<div class="dropdownContain">
<div class="dropOut">
<div class="triangle"></div>
<ul>
<li>Upload 1</li>
<li>Upload 2</li>
</ul>
</div>
</div>
</li>


</ul>
</nav>



------------------- CSS ----------------------

#topbar {
padding: 34px 1px;
width: 100%;
background-color: #FAFAFA;
background-image: -webkit-gradient(linear, left top, left bottom, from(#FAFAFA), to(#F5F5F5));
background-image: -webkit-linear-gradient(top, #FAFAFA, #F5F5F5);
background-image: -moz-linear-gradient(top, #FAFAFA, #F5F5F5);
background-image: -o-linear-gradient(top, #FAFAFA, #F5F5F5);
background-image: linear-gradient(to bottom, #FAFAFA, #F5F5F5);
border-bottom: 1px solid #EBEBEB;
}

.inner-topbar {
margin: -5px auto;
clear: both;
display: block;
position: relative;
}

#topbar ul {
background: #fff
}

#topbar ul li {
float: left;
list-style: none;
margin-right: 10px;
}

#topbar ul .floatRight {
float: right;
margin-right: 0px;
margin-left: 10px;
background: transparent;
}

#topbar ul .highlight, #topbar ul .highlight a {
background: transparent;
}

#topbar ul li a {
padding: 10px 19px;
padding-top: 0px;
border-bottom: 0px;
display: block;
color: #000;
text-decoration: none;

-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}

#topbar ul li a:hover {
border-bottom: 5px solid #39C;
margin-bottom: 0px;
}

#topbar ul li.current {
padding: 0px 19px;
display: block;
color: #39C;
text-decoration: none;
margin-bottom: 0px;
}

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;}body {line-height: 1;}ol, ul {list-style: none;}blockquote, q {quotes: none;}blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;} /* remember to define focus styles! */ :focus {outline: 0;} /* remember to highlight inserts somehow! */ins {text-decoration: none;}del {text-decoration: line-through;} /* tables still need 'cellspacing="0"' in the markup */ table {border-collapse: collapse;border-spacing: 0;}


/*---------- BODY --------------------------------*/

body {
text-align: center;
background: #e0e0e0;
padding-bottom: 200px;
}

a {
text-decoration: none;
}

/*---------- Wrapper --------------------*/

nav {
width: 100%;
height: 80px;
background: #222;
}

ul {
text-align: center;
}

ul li {
font: 13px Verdana, 'Lucida Grande';
cursor: pointer;
-webkit-transition: padding .05s linear;
-moz-transition: padding .05s linear;
-ms-transition: padding .05s linear;
-o-transition: padding .05s linear;
transition: padding .05s linear;
}
ul li.drop {
position: relative;
}
ul > li {
display: inline-block;
}
ul li a {
line-height: 80px;
padding: 0 20px;
height: 80px;
color: #777;
-webkit-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
-ms-transition: all .1s ease-out;
-o-transition: all .1s ease-out;
transition: all .1s ease-out;
}
ul li a:hover {
color: #eee;
}

.dropOut .triangle {
width: 0;
height: 0;
position: absolute;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid white;
top: -8px;
left: 50%;
margin-left: -8px;
}
.dropdownContain {
width: 160px;
position: absolute;
z-index: 2;
left: 50%;
margin-left: -80px; /* half of width */
top: -400px;
}
.dropOut {
width: 160px;
background: white;
float: left;
position: relative;
margin-top: 0px;
opacity: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 6px rgba(0,0,0,.15);
-moz-box-shadow: 0 1px 6px rgba(0,0,0,.15);
box-shadow: 0 1px 6px rgba(0,0,0,.15);
-webkit-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
-ms-transition: all .1s ease-out;
-o-transition: all .1s ease-out;
transition: all .1s ease-out;
}

.dropOut ul {
float: left;
padding: 10px 0;
}
.dropOut ul li {
text-align: left;
float: left;
width: 125px;
padding: 12px 0 10px 15px;
margin: 0px 10px;
color: #777;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-transition: background .1s ease-out;
-moz-transition: background .1s ease-out;
-ms-transition: background .1s ease-out;
-o-transition: background .1s ease-out;
transition: background .1s ease-out;
}

.dropOut ul li:hover {
background: #f6f6f6;
}

ul li:hover a { color: white; }
ul li:hover .dropdownContain { top: 65px; }
ul li:hover .underline { border-bottom-color: #777; }
ul li:hover .dropOut { opacity: 1; margin-top: 8px; }


------------- Script -------------

// @see http://paulirish.com/2011/requestanimationframe-for-smart-animating/
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(/* function */ callback, /* DOMElement */ element){
window.setTimeout(callback, 1000 / 60);
};
})();
// set the scene size
var WIDTH = 900,
HEIGHT = 600;

// set some camera attributes
var VIEW_ANGLE = 45,
ASPECT = WIDTH / HEIGHT,
NEAR = 0.1,
FAR = 10000;

// get the DOM element to attach to
// - assume we've got jQuery to hand
var $container = $('#container');

// create a WebGL renderer, camera
// and a scene
var renderer = new THREE.WebGLRenderer();
var camera = new THREE.Camera( VIEW_ANGLE,
ASPECT,
NEAR,
FAR );
var scene = new THREE.Scene();

// the camera starts at 0,0,0 so pull it back
camera.position.z = 300;

// start the renderer - set the clear colour
// to a full black
renderer.setClearColor(new THREE.Color(0, 1));
renderer.setSize(WIDTH, HEIGHT);

// attach the render-supplied DOM element
$container.append(renderer.domElement);

// create the particle variables
var particleCount = 1800,
particles = new THREE.Geometry(),
pMaterial = new THREE.ParticleBasicMaterial({
color: 0xFFFFFF,
size: 20,
map: THREE.ImageUtils.loadTexture(
"images/particle.png"
),
blending: THREE.AdditiveBlending,
transparent: true
});

// now create the individual particles
for(var p = 0; p < particleCount; p++) {

// create a particle with random
// position values, -250 -> 250
var pX = Math.random() * 500 - 250,
pY = Math.random() * 500 - 250,
pZ = Math.random() * 500 - 250,
particle = new THREE.Vertex(
new THREE.Vector3(pX, pY, pZ)
);
// create a velocity vector
particle.velocity = new THREE.Vector3(
0, // x
-Math.random(), // y
0); // z

// add it to the geometry
particles.vertices.push(particle);
}

// create the particle system
var particleSystem = new THREE.ParticleSystem(
particles,
pMaterial);

particleSystem.sortParticles = true;

// add it to the scene
scene.addChild(particleSystem);

// animation loop
function update() {

// add some rotation to the system
particleSystem.rotation.y += 0.01;

var pCount = particleCount;
while(pCount--) {
// get the particle
var particle = particles.vertices[pCount];

// check if we need to reset
if(particle.position.y < -200) {
particle.position.y = 200;
particle.velocity.y = 0;
}

// update the velocity
particle.velocity.y -= Math.random() * .1;

// and the position
particle.position.addSelf(
particle.velocity);
}

// flag to the particle system that we've
// changed its vertices. This is the
// dirty little secret.
particleSystem.geometry.__dirtyVertices = true;

renderer.render(scene, camera);

// set up the next call
requestAnimFrame(update);
}
requestAnimFrame(update);
Aug 7th, 2013

Thanks, but I actually wanted the opposite of what you did. I only wanted the dropdown on the gray bar! I want the dropdown menu on this bar http://cssdeck.com/labs/yavhvjxz

Aug 7th, 2013

#topbar {
padding: 34px 1px;
width: 100%;
background-color: #FAFAFA;
background-image: -webkit-gradient(linear, left top, left bottom, from(#FAFAFA), to(#F5F5F5));
background-image: -webkit-linear-gradient(top, #FAFAFA, #F5F5F5);
background-image: -moz-linear-gradient(top, #FAFAFA, #F5F5F5);
background-image: -o-linear-gradient(top, #FAFAFA, #F5F5F5);
background-image: linear-gradient(to bottom, #FAFAFA, #F5F5F5);
border-bottom: 1px solid #EBEBEB;
}

.inner-topbar {
margin: -5px auto;
clear: both;
display: block;
position: relative;
}

#topbar ul {
background: #fff
}

#topbar ul li {
float: left;
list-style: none;
margin-right: 10px;
}

#topbar ul .floatRight {
float: right;
margin-right: 0px;
margin-left: 10px;
background: transparent;
}

#topbar ul .highlight, #topbar ul .highlight a {
background: transparent;
}

#topbar ul li a {
padding: 10px 19px;
padding-top: 0px;
border-bottom: 0px;
display: block;
color: #000;
text-decoration: none;

-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}

#topbar ul li a:hover {
border-bottom: 5px solid #39C;
margin-bottom: 0px;
}

#topbar ul li.current {
padding: 0px 19px;
display: block;
color: #39C;
text-decoration: none;
margin-bottom: 0px;
}

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;}body {line-height: 1;}ol, ul {list-style: none;}blockquote, q {quotes: none;}blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;} /* remember to define focus styles! */ :focus {outline: 0;} /* remember to highlight inserts somehow! */ins {text-decoration: none;}del {text-decoration: line-through;} /* tables still need 'cellspacing="0"' in the markup */ table {border-collapse: collapse;border-spacing: 0;}
/*---------- BODY --------------------------------*/

body {
text-align: center;
background: #e0e0e0;
padding-bottom: 200px;
}

a {
text-decoration: none;
}

/*---------- Wrapper --------------------*/

nav {
width: 100%;
height: 80px;
background: #fff
}

ul {
text-align: center;
}

ul li {
font: 13px Verdana, 'Lucida Grande';
cursor: pointer;
-webkit-transition: padding .05s linear;
-moz-transition: padding .05s linear;
-ms-transition: padding .05s linear;
-o-transition: padding .05s linear;
transition: padding .05s linear;
}
ul li.drop {
position: relative;
}
ul > li {
display: inline-block;
}
ul li a {
line-height: 80px;
padding: 0 20px;
height: 80px;
color: #777;
-webkit-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
-ms-transition: all .1s ease-out;
-o-transition: all .1s ease-out;
transition: all .1s ease-out;
}
ul li a:hover {
color: #eee;
}

.dropOut .triangle {
width: 0;
height: 0;
position: absolute;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid white;
top: -8px;
left: 50%;
margin-left: -8px;
}
.dropdownContain {
width: 160px;
position: absolute;
z-index: 2;
left: 50%;
margin-left: -80px; /* half of width */
top: -400px;
}
.dropOut {
width: 160px;
background: white;
float: left;
position: relative;
margin-top: 0px;
opacity: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 6px rgba(0,0,0,.15);
-moz-box-shadow: 0 1px 6px rgba(0,0,0,.15);
box-shadow: 0 1px 6px rgba(0,0,0,.15);
-webkit-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
-ms-transition: all .1s ease-out;
-o-transition: all .1s ease-out;
transition: all .1s ease-out;
}

.dropOut ul {
float: left;
padding: 10px 0;
}
.dropOut ul li {
text-align: left;
float: left;
width: 125px;
padding: 12px 0 10px 15px;
margin: 0px 10px;
color: #777;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-transition: background .1s ease-out;
-moz-transition: background .1s ease-out;
-ms-transition: background .1s ease-out;
-o-transition: background .1s ease-out;
transition: background .1s ease-out;
}

.dropOut ul li:hover {
background: #f6f6f6;
}

ul li:hover a { color: white; }
ul li:hover .dropdownContain { top: 65px; }
ul li:hover .underline { border-bottom-color: #777; }
ul li:hover .dropOut { opacity: 1; margin-top: 8px; }

Aug 8th, 2013

Sorry but the CSS is still messed up. http://imgur.com/ts9uPO9

Aug 8th, 2013

Hi its working already. I will upload the files now. So that you can check.


CSS

Script

HTML

Aug 9th, 2013

Okay I did it but its not right. I got a pink nav bar now. I want the exact grey bar and the exact blue line hovers, I just want a dropdown to it.

Aug 9th, 2013

Okay will do it and upload it shortly.

Aug 11th, 2013

Have you got the solution?

Aug 12th, 2013

Okay I managed to fix it myself: http://cssdeck.com/labs/a8upbxqg

But the <a> tags inside the dropdown are all spaced. I want to remove the space or make it correct.


And I can't get the hovers right. The colors don't change.

Aug 12th, 2013

Modified CSS

/*---------- Wrapper --------------------*/

nav {
   width: 100%;
   height: 100px;
background-color: #FAFAFA;
   background-image: -webkit-gradient(linear, left top, left bottom, from(#FAFAFA), to(#F5F5F5));
   background-image: -webkit-linear-gradient(top, #FAFAFA, #F5F5F5);
   background-image: -moz-linear-gradient(top, #FAFAFA, #F5F5F5);
   background-image: -o-linear-gradient(top, #FAFAFA, #F5F5F5);
   background-image: linear-gradient(to bottom, #FAFAFA, #F5F5F5);
   border-bottom: 1px solid #EBEBEB;
}

ul {
   text-align: center;
  float: left;
}

ul li {
   font: 13px Verdana, 'Lucida Grande';
   cursor: pointer;
   -webkit-transition: padding .05s linear;
   -moz-transition: padding .05s linear;
   -ms-transition: padding .05s linear;
   -o-transition: padding .05s linear;
   transition: padding .05s linear;
}
ul li.drop {
   position: relative;
}
ul > li {
   display: inline-block;
}
ul li a {
   line-height: 80px;
   padding: 0 20px;
   height: 80px;
   color: #777;
  text-decoration: none;
   -webkit-transition: all .1s ease-out;
   -moz-transition: all .1s ease-out;
   -ms-transition: all .1s ease-out;
   -o-transition: all .1s ease-out;
   transition: all .1s ease-out;
}
ul li a:hover {
   color: #000;
}

.dropOut .triangle {
   width: 0;
   height: 0;
   position: relative;
   border-left: 8px solid transparent;
   border-right: 8px solid transparent;
   border-bottom: 2px solid white;
   top: -8px;
   left: 50%;
   margin-left: -8px;
}
.dropdownContain {
   width: 160px;
   position: absolute;
   z-index: 2;
   left: 50%;
   margin-left: -80px; /* half of width */
   top: -400px;
}
.dropOut {
   width: 160px;
   background: white;
   float: left;
   position: absolute;
   margin-top: 0px;
   opacity: 0;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
   -webkit-box-shadow: 0 1px 6px rgba(0,0,0,.15);
   -moz-box-shadow: 0 1px 6px rgba(0,0,0,.15);
   box-shadow: 0 1px 1px rgba(0,0,0,.15);
   -webkit-transition: all .1s ease-out;
   -moz-transition: all .1s ease-out;
   -ms-transition: all .1s ease-out;
   -o-transition: all .1s ease-out;
   transition: all .1s ease-out;
}

.dropOut ul {
   float: center;
   padding: 0px 0px;
}
.dropOut ul li {
   text-align: center;
   float: center;
   width: 100px;   
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
   -webkit-transition: background .1s ease-out;
   -moz-transition: background .1s ease-out;
   -ms-transition: background .1s ease-out;
   -o-transition: background .1s ease-out;
   transition: background .1s ease-out;
}

.dropOut a {
  color: #00000;
  line-height: 50px;
   padding: 0 2px;
   height: 2px;
   -webkit-transition: all .1s ease-out;
   -moz-transition: all .1s ease-out;
   -ms-transition: all .1s ease-out;
   -o-transition: all .1s ease-out;
   transition: all .1s ease-out;
}

.dropOut ul li:hover {
   background: #81F7BE;
}

ul li:hover a { color: #848484; }
ul li:hover .dropdownContain { top: 65px; }
ul li:hover .underline { border-bottom-color: #39c; }
ul li:hover .dropOut { opacity: 1; margin-top: 2px; }

Aug 13th, 2013

Okay but still the hovers inside the dropdown are not correct. You left a lot of space on the sides in the dropdown. http://cssdeck.com/labs/aejgohjc

Aug 13th, 2013

/*---------- Wrapper --------------------*/

nav {
  width: 100%;
  height: 100px;
background-color: #FAFAFA;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#FAFAFA), to(#F5F5F5));
  background-image: -webkit-linear-gradient(top, #FAFAFA, #F5F5F5);
  background-image: -moz-linear-gradient(top, #FAFAFA, #F5F5F5);
  background-image: -o-linear-gradient(top, #FAFAFA, #F5F5F5);
  background-image: linear-gradient(to bottom, #FAFAFA, #F5F5F5);
  border-bottom: 1px solid #EBEBEB;
}

ul {
  text-align: center;
  float: left;
}

ul li {
  font: 13px Verdana, 'Lucida Grande';
  cursor: pointer;
  -webkit-transition: padding .05s linear;
  -moz-transition: padding .05s linear;
  -ms-transition: padding .05s linear;
  -o-transition: padding .05s linear;
  transition: padding .05s linear;
}
ul li.drop {
  position: relative;
}
ul > li {
  display: inline-block;
}
ul li a {
  line-height: 80px;
  padding: 0 20px;
  color: #000;
  height: 80px;
  color: #777;
  text-decoration: none;
  -webkit-transition: all .1s ease-out;
  -moz-transition: all .1s ease-out;
  -ms-transition: all .1s ease-out;
  -o-transition: all .1s ease-out;
  transition: all .1s ease-out;
}
ul li a:hover {
  color: #000;
}

.dropOut .triangle {
  width: 0;
  height: 0;
  position: relative;
  border-left: 0px solid transparent;
  border-right: 0px solid transparent;
  border-bottom: 1px solid white;
  top: -8px;
  left: 50%;
  margin-left: -8px;
}
.dropdownContain {
  width: 160px;
  position: absolute;
  color: #000;
  z-index: 2;
  left: 50%;
  margin-left: -80px; /* half of width */
  top: -400px;
}
.dropOut {
  width: 100px;
  color: #000;
  background: white;
  float: center;
  position: absolute;
  margin-top: 0px;
  opacity: 0;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 1px;
  -webkit-box-shadow: 0 1px 6px rgba(0,0,0,.15);
  -moz-box-shadow: 0 1px 6px rgba(0,0,0,.15);
  box-shadow: 0 1px 1px rgba(0,0,0,.15);
  -webkit-transition: all .1s ease-out;
  -moz-transition: all .1s ease-out;
  -ms-transition: all .1s ease-out;
  -o-transition: all .1s ease-out;
  transition: all .1s ease-out;
}

.dropOut ul {
  float: center;
  padding: 0px 0px;
  color: #000;
}
.dropOut ul li {
 
  text-align: center;
  color: #000;
  float: center;
  width: 100px;   
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-transition: background .1s ease-out;
  -moz-transition: background .1s ease-out;
  -ms-transition: background .1s ease-out;
  -o-transition: background .1s ease-out;
  transition: background .1s ease-out;
}

.dropOut a {
  color: #fff;
  line-height: 35px;
  padding: 0 0px;
  height:0px;
  -webkit-transition: all .1s ease-out;
  -moz-transition: all .1s ease-out;
  -ms-transition: all .1s ease-out;
  -o-transition: all .1s ease-out;
  transition: all .1s ease-out;
}

.dropOut ul li:hover {
  width: 100px;
   background: #39C;
  color: #39C;
}

ul li:hover a { color: #ccc; }
ul li:hover .dropdownContain { top: 65px; }
ul li:hover .underline { border-bottom-color: #39c; }
ul li:hover .dropOut { opacity: 1; margin-top: 2px; }

Aug 13th, 2013

Did you know? You can earn $20 for every friend you invite to Studypool!
Click here to
Refer a Friend
...
Aug 6th, 2013
...
Aug 6th, 2013
Sep 20th, 2017
check_circle
Mark as Final Answer
check_circle
Unmark as Final Answer
check_circle
Final Answer

Secure Information

Content will be erased after question is completed.

check_circle
Final Answer