Solved

CSS Rollover Button

Posted on 2011-09-20
3
209 Views
Last Modified: 2012-05-12
This button does what I would like it to except I would like to be able to put unlimited items in the drop down and still have it "fold" and "unfold" as it does now, but every time I add more items the drop down overhangs below the menu.

Is there anyway to make this happen, it would be fine if the button used javascript I just would like it to work the way i need it to.
<!DOCTYPE html>

<html lang="en">
<head>
	<meta charset="utf-8">
	<title>CSS Dowload Buttons</title>
    	<style>
	#container { width: 920px; margin: auto;}
.dropbutton { /* main class */
 height: 48px;
 width: 200px;
 font: bold 16px/48px arial;
 margin: 20px;
 position: relative;
 z-index: 0;
}

/*
   ===============================
   ========= blue STYLE =========
   =============================== 
*/

.blue:first-child { /* styling for the left part */
 padding: 7px;
 float: left;
 width: 32px;
 height: 32px;
/* border radius */
 -webkit-border-radius: 4px 0 0 4px;  
 -moz-border-radius: 4px 0 0 4px;  
 border-radius: 4px 0 0 4px;
/* backgorund */
 background: -webkit-gradient(linear, left top, left bottom, from(#2d6493), to(#6ea4d2));
 background: -moz-linear-gradient(#2d6493, #6ea4d2);
 background-color: #6ea4d2;
/* shadows and highlights */
 -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 1px 1px rgba(255, 255, 255, 0.8) inset;  
 -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 1px 1px rgba(255, 255, 255, 0.8) inset;  
 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 1px 1px rgba(255, 255, 255, 0.8) inset;
/* border */
 border: 1px solid #234c70;
}

.dropbutton:hover .blue:first-child .dropbutton {
 background: -webkit-gradient(linear, left top, left bottom, from(#285881), to(#397eb9));
 background: -moz-linear-gradient(#285881, #397eb9);
 background-color: #397eb9;
}

.dropbutton:active .blue:first-child {
 background: -webkit-gradient(linear, left top, left bottom, from(#99d41e), to(#3472a7));
 background: -moz-linear-gradient(#99d41e, #3472a7);
 background-color: #2d6493;
}

.blue  {  /* styling for the right part */
 height: 46px;
 width: 151px;
 float: left;
 text-align: center;
/* border radius */
 -webkit-border-radius: 0 4px 4px 0;  
 -moz-border-radius: 0 4px 4px 0;  
 border-radius: 0 4px 4px 0;
/* backgorund */
 background: -webkit-gradient(linear, left top, left bottom, from(#2d6493), to(#6ea4d2));
 background: -moz-linear-gradient(#2d6493, #6ea4d2);
 background-color: #6ea4d2;
/* shadows and highlights */
 -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 1px 1px rgba(255, 255, 255, 0.8) inset;  
 -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 1px 1px rgba(255, 255, 255, 0.8) inset;  
 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 1px 1px rgba(255, 255, 255, 0.8) inset;
/* border */
 border: 1px solid #234c70;
 border-left: 0;
}

.dropbutton:hover .blue  {
 background: -webkit-gradient(linear, left top, left bottom, from(#285881), to(#397eb9));
 background: -moz-linear-gradient(#285881, #397eb9);
 background-color: #397eb9;
}

.dropbutton:active .blue  {
 background: -webkit-gradient(linear, left top, left bottom, from(#99d41e), to(#3472a7));
 background: -moz-linear-gradient(#99d41e, #3472a7);
 background-color: #2d6493;
}

.blue  a { /* link styling */
 color: #ffffff;
 font: bold 16px/32px arial, helvetica, sans-serif;
 text-decoration: none;
}

/*
   ===============================
   ========= Cart Button STYLE =========
   =============================== 
*/

.grey:first-child { /* styling for the left part */
	padding: 7px;
	float: left;
	width: 32px;
	height: 32px;
	/* border radius */
 -webkit-border-radius: 4px 0 0 4px;
	-moz-border-radius: 4px 0 0 4px;
	border-radius: 4px 0 0 4px;
	/* backgorund */
 background: -webkit-gradient(linear, left top, left bottom, from(#cbcbcb), to(#9c9c9c));
	background: -moz-linear-gradient(#cbcbcb, #9c9c9c);
	background-color: #999;
	/* shadows and highlights */
 -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 1px 1px rgba(255, 255, 255, 0.8) inset;
	-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 1px 1px rgba(255, 255, 255, 0.8) inset;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 1px 1px rgba(255, 255, 255, 0.8) inset;
	/* border */
 border: 1px solid #818181;
}

.dropbutton:hover .grey:first-child {
	background: -webkit-gradient(linear, left top, left bottom, from(#dddddd), to(#aeaeae));
	background: -moz-linear-gradient(#dddddd, #aeaeae);
	background-color: #CCC;
}

.dropbutton:active .grey:first-child {
	background: -webkit-gradient(linear, left top, left bottom, from(#aeaeae), to(#cbcbcb));
	background: -moz-linear-gradient(#aeaeae, #cbcbcb);
	background-color: #FFF;
}

.grey  {  /* styling for the right part */
	height: 46px;
	width: 51px;
	float: left;
	text-align: center;
	/* border radius */
 -webkit-border-radius: 0 4px 4px 0;
	-moz-border-radius: 0 4px 4px 0;
	border-radius: 0 4px 4px 0;
	/* backgorund */
 background: -webkit-gradient(linear, left top, left bottom, from(#cbcbcb), to(#9c9c9c));
	background: -moz-linear-gradient(#cbcbcb, #9c9c9c);
	background-color: #999;
	/* shadows and highlights */
 -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 1px 1px rgba(255, 255, 255, 0.8) inset;
	-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 1px 1px rgba(255, 255, 255, 0.8) inset;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 1px 1px rgba(255, 255, 255, 0.8) inset;
	/* border */
 border: 1px solid #818181;
	border-left: 0;
}
.numbers {
	position: absolute;
	width: 25px;
	height: 38px;
	left: 16px;
	top: -9px;
}

.dropbutton:hover .grey  {
	background: -webkit-gradient(linear, left top, left bottom, from(#dddddd), to(#aeaeae));
	background: -moz-linear-gradient(#dddddd, #aeaeae);
	background-color: #CCC;
}

.dropbutton:active .grey  {
	background: -webkit-gradient(linear, left top, left bottom, from(#aeaeae), to(#cbcbcb));
	background: -moz-linear-gradient(#aeaeae, #cbcbcb);
	background-color: #FFF;
}

.grey  a { /* link styling */
 color: #fbfbfb;
 font: bold 16px/32px arial, helvetica, sans-serif;
 text-decoration: none;
 text-shadow: 0 1px 0 #818181;
}


/*
   ====================================
   ====== DARK STYLE (DROPDOWN) =======
   ====================================
*/

.dark {
 width: 120px;
 height: 31px;
 padding: 7px 6px;
 margin-left: 58px;
 position: absolute;
 clear: both;
 -webkit-transition: top .6s linear;
 z-index: -1;
/* text */
 color: #fbfbfb;
 font: bold 12px/15px arial, helvetica, sans-serif;
 text-decoration: none;
 text-shadow: 0 1px 0 #000;
/* border radius */
 -webkit-border-radius: 0 0 4px 4px;  
 -moz-border-radius:0 0 4px 4px;  
 border-radius: 0 0 4px 4px;
/* backgorund */
 background: -webkit-gradient(linear, left top, left bottom, from(#2b2b2b), color-stop(.1, #5c5c5c), to(#838383));
 background: -moz-linear-gradient(#2b2b2b, #5c5c5c 10%, #838383);
 background-color: #ccc;
/* shadows and highlights */
 -webkit-box-shadow: 0 -1px 1px rgba(255, 255, 255, 0.5) inset;  
 -moz-box-shadow: 0 -1px 1px rgba(255, 255, 255, 0.5) inset;  
 box-shadow: 0 1px -1px rgba(255, 255, 255, 0.4) inset;
/* border */
 border: 1px solid #000;
 border-top: 0;
}

.dropbutton:hover .dark {
 top: 48px;
}

.dark img {
float: left;
}

.dark span {
color: #e5e5e5;
font-weight: normal;
}
	
	    </style>
</head>
<body>
<div id="container">
		

		
	

<div class="dropbutton">
	<div class="grey">
			<div class="numbers">2</div><img src="images/shopping-cart-1.png" width="34" height="28" />
	</div>
	<div class="blue">
			<a href="#">Donation Cart <img src="images/arrow_black.png" width="19" height="19" border="0"></a>
	</div>
	<div class="dark">
	
		
		<span>Item 1</span> $25<br />
	</div>
</div> 



	
</div>


</body>
</html>

Open in new window

0
Comment
Question by:turtleman2009
3 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 36567555
what exactly is the problem? Not able to figure out the same from your problem statement
0
 

Author Comment

by:turtleman2009
ID: 36567602
If i was to duplicate line "266" 5 or 6 times then the items would permanently be displayed instead of being hidden
0
 
LVL 30

Accepted Solution

by:
LZ1 earned 500 total points
ID: 36567779
How about something like this?
<!DOCTYPE html>

<html lang="en">
<head>
	<meta charset="utf-8">
	<title>CSS Dowload Buttons</title>
    	<style>
	#container { width: 920px; margin: auto;}
.dropbutton { /* main class */
 height: 48px;
 width: 200px;
 font: bold 16px/48px arial;
 margin: 20px;
 position: relative;
 z-index: 0;
}

/*
   ===============================
   ========= blue STYLE =========
   =============================== 
*/

.blue:first-child { /* styling for the left part */
 padding: 7px;
 float: left;
 width: 32px;
 height: 32px;
/* border radius */
 -webkit-border-radius: 4px 0 0 4px;  
 -moz-border-radius: 4px 0 0 4px;  
 border-radius: 4px 0 0 4px;
/* backgorund */
 background: -webkit-gradient(linear, left top, left bottom, from(#2d6493), to(#6ea4d2));
 background: -moz-linear-gradient(#2d6493, #6ea4d2);
 background-color: #6ea4d2;
/* shadows and highlights */
 -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 1px 1px rgba(255, 255, 255, 0.8) inset;  
 -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 1px 1px rgba(255, 255, 255, 0.8) inset;  
 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 1px 1px rgba(255, 255, 255, 0.8) inset;
/* border */
 border: 1px solid #234c70;
}

.dropbutton:hover .blue:first-child .dropbutton {
 background: -webkit-gradient(linear, left top, left bottom, from(#285881), to(#397eb9));
 background: -moz-linear-gradient(#285881, #397eb9);
 background-color: #397eb9;
}

.dropbutton:active .blue:first-child {
 background: -webkit-gradient(linear, left top, left bottom, from(#99d41e), to(#3472a7));
 background: -moz-linear-gradient(#99d41e, #3472a7);
 background-color: #2d6493;
}

.blue  {  /* styling for the right part */
 height: 46px;
 width: 151px;
 float: left;
 text-align: center;
/* border radius */
 -webkit-border-radius: 0 4px 4px 0;  
 -moz-border-radius: 0 4px 4px 0;  
 border-radius: 0 4px 4px 0;
/* backgorund */
 background: -webkit-gradient(linear, left top, left bottom, from(#2d6493), to(#6ea4d2));
 background: -moz-linear-gradient(#2d6493, #6ea4d2);
 background-color: #6ea4d2;
/* shadows and highlights */
 -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 1px 1px rgba(255, 255, 255, 0.8) inset;  
 -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 1px 1px rgba(255, 255, 255, 0.8) inset;  
 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 1px 1px rgba(255, 255, 255, 0.8) inset;
/* border */
 border: 1px solid #234c70;
 border-left: 0;
}

.dropbutton:hover .blue  {
 background: -webkit-gradient(linear, left top, left bottom, from(#285881), to(#397eb9));
 background: -moz-linear-gradient(#285881, #397eb9);
 background-color: #397eb9;
}

.dropbutton:active .blue  {
 background: -webkit-gradient(linear, left top, left bottom, from(#99d41e), to(#3472a7));
 background: -moz-linear-gradient(#99d41e, #3472a7);
 background-color: #2d6493;
}

.blue  a { /* link styling */
 color: #ffffff;
 font: bold 16px/32px arial, helvetica, sans-serif;
 text-decoration: none;
}

/*
   ===============================
   ========= Cart Button STYLE =========
   =============================== 
*/

.grey:first-child { /* styling for the left part */
	padding: 7px;
	float: left;
	width: 32px;
	height: 32px;
	/* border radius */
 -webkit-border-radius: 4px 0 0 4px;
	-moz-border-radius: 4px 0 0 4px;
	border-radius: 4px 0 0 4px;
	/* backgorund */
 background: -webkit-gradient(linear, left top, left bottom, from(#cbcbcb), to(#9c9c9c));
	background: -moz-linear-gradient(#cbcbcb, #9c9c9c);
	background-color: #999;
	/* shadows and highlights */
 -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 1px 1px rgba(255, 255, 255, 0.8) inset;
	-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 1px 1px rgba(255, 255, 255, 0.8) inset;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 1px 1px rgba(255, 255, 255, 0.8) inset;
	/* border */
 border: 1px solid #818181;
}

.dropbutton:hover .grey:first-child {
	background: -webkit-gradient(linear, left top, left bottom, from(#dddddd), to(#aeaeae));
	background: -moz-linear-gradient(#dddddd, #aeaeae);
	background-color: #CCC;
}

.dropbutton:active .grey:first-child {
	background: -webkit-gradient(linear, left top, left bottom, from(#aeaeae), to(#cbcbcb));
	background: -moz-linear-gradient(#aeaeae, #cbcbcb);
	background-color: #FFF;
}

.grey  {  /* styling for the right part */
	height: 46px;
	width: 51px;
	float: left;
	text-align: center;
	/* border radius */
 -webkit-border-radius: 0 4px 4px 0;
	-moz-border-radius: 0 4px 4px 0;
	border-radius: 0 4px 4px 0;
	/* backgorund */
 background: -webkit-gradient(linear, left top, left bottom, from(#cbcbcb), to(#9c9c9c));
	background: -moz-linear-gradient(#cbcbcb, #9c9c9c);
	background-color: #999;
	/* shadows and highlights */
 -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 1px 1px rgba(255, 255, 255, 0.8) inset;
	-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 1px 1px rgba(255, 255, 255, 0.8) inset;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 1px 1px rgba(255, 255, 255, 0.8) inset;
	/* border */
 border: 1px solid #818181;
	border-left: 0;
}
.numbers {
	position: absolute;
	width: 25px;
	height: 38px;
	left: 16px;
	top: -9px;
}

.dropbutton:hover .grey  {
	background: -webkit-gradient(linear, left top, left bottom, from(#dddddd), to(#aeaeae));
	background: -moz-linear-gradient(#dddddd, #aeaeae);
	background-color: #CCC;
}

.dropbutton:active .grey  {
	background: -webkit-gradient(linear, left top, left bottom, from(#aeaeae), to(#cbcbcb));
	background: -moz-linear-gradient(#aeaeae, #cbcbcb);
	background-color: #FFF;
}

.grey  a { /* link styling */
 color: #fbfbfb;
 font: bold 16px/32px arial, helvetica, sans-serif;
 text-decoration: none;
 text-shadow: 0 1px 0 #818181;
}


/*
   ====================================
   ====== DARK STYLE (DROPDOWN) =======
   ====================================
*/

.dark {
 width: 120px;
 /*height: 31px;*/
 padding: 7px 6px;
 margin-left: 58px;
 position: absolute;
 clear: both;
 -webkit-transition: top .6s linear;
 z-index: -1;
/* text */
 color: #fbfbfb;
 font: bold 12px/15px arial, helvetica, sans-serif;
 text-decoration: none;
 text-shadow: 0 1px 0 #000;
/* border radius */
 -webkit-border-radius: 0 0 4px 4px;  
 -moz-border-radius:0 0 4px 4px;  
 border-radius: 0 0 4px 4px;
/* backgorund */
 background: -webkit-gradient(linear, left top, left bottom, from(#2b2b2b), color-stop(.1, #5c5c5c), to(#838383));
 background: -moz-linear-gradient(#2b2b2b, #5c5c5c 10%, #838383);
 background-color: #ccc;
/* shadows and highlights */
 -webkit-box-shadow: 0 -1px 1px rgba(255, 255, 255, 0.5) inset;  
 -moz-box-shadow: 0 -1px 1px rgba(255, 255, 255, 0.5) inset;  
 box-shadow: 0 1px -1px rgba(255, 255, 255, 0.4) inset;
/* border */
 border: 1px solid #000;
 border-top: 0;
}

.dropbutton:hover .dark {
 top: 48px;
}

.dark img {
float: left;
}

.dark span {
color: #e5e5e5;
font-weight: normal;
}
	
	    </style>
</head>
<body>
<div id="container">
		

		
	

<div class="dropbutton">
	<div class="grey">
			<div class="numbers">2</div><img src="images/shopping-cart-1.png" width="34" height="28" />
	</div>
	<div class="blue">
			<a href="#">Donation Cart <img src="images/arrow_black.png" width="19" height="19" border="0"></a>
	</div>
	<div class="dark">
	
		
		<span>Item 1</span> $25<br />
		<span>Item 1</span> $25<br />
		<span>Item 1</span> $25<br />
		<span>Item 1</span> $25<br />
		<span>Item 1</span> $25<br />
		<span>Item 1</span> $25<br />
		<span>Item 1</span> $25<br />
	</div>
</div> 



	
</div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"> </script>
<script type="text/javascript">
$(document).ready(function(e) {
	$(".dark").hide();
	$(".dropbutton").mouseover(function(e) {
		$(".dark").show();
	});
	$(".dropbutton").mouseout(function(e) {
		$(".dark").hide();
	});
});

</script>
</body>
</html>

Open in new window

0

Featured Post

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question