Adding drop down to a menu bar

Programming
Tutor: None Selected Time limit: 10 Days

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

Studypool's Notebank makes it easy to buy and sell old notes, study guides, reviews, etc.
Click to visit
The Notebank
...
Aug 6th, 2013
...
Aug 6th, 2013
May 27th, 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