Member Avatar for brechtjah

Hi
I'm stuck wanting to create a dropdown, only supported by CSS. This is my current code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
		<style type="text/css">
			html, body {
				margin: 0px;
			}
			body {
				background-image: url('img/bottombackground.png');
			}
			div.topbackground {
				width: 100%;
				height: 300px;
				background-image: url('img/topbackground.png');
			}
			div.container {
				width: 750px;
				height: 600px
				background-color: #ddd;
				margin: -300px auto 0px auto;
			}
			div.top {
				width: 100%;
				height: 25px;
			}
			div.top img.topleft, div.top img.topright {
				height: 25px;
				width: 11px;
				float: left;
			}
			div.top div.topmiddle {
				float: left;
				height: 25px;
				width: 728px;
				text-align: center;
				background-image: url('img/top_middle.png');
			}
			div.top div.topmiddle a:link, div.top div.topmiddle a:visited {
				font-family: Arial, Verdana;
				font-size: 11px;
				color: #7c7c7c;
				padding: 0px 15px;
				text-decoration: none;
			}
			div.top div.topmiddle a:hover {
				font-family: Arial, Verdana;
				font-size: 11px;
				color: #5e7381;
				text-decoration: underline;
			}
			div.header {
				position: relative;
				margin: -30px 0px 0px 10px;
				width: 730px;
				height: 75px;
			}
			div.header img {
				position: absolute;
			}
			div.header p {
				padding: 15px 0px 0px 20px;
				font-family: Arial, Verdana;
				font-size: 32px;
				font-weight: bold;
				color: #5e5e5e;
			}
			img.arrow {
				height: 10px;
				width: 10px;
			}
			img.topleft {
				top: 0px;
				left: 0px;
			}
			img.topright {
				top: 0px;
				right: 0px;
			}
			img.bottomleft {
				bottom: 0px;
				left: 0px;
			}
			img.bottomright {
				bottom: 0px;
				right: 0px;b
			}
			img.flowers_top {
				height: 45px;
				width: 310px;
				bottom: 0px;
				right: 25px;
			}
			div.contenttop {
				width: 750px;
				height: 11px;
			}
			img.contenttopleft, img.contenttopright{
				width: 10px;
				height: 11px;
				float: left;
			}
			div.contenttopmiddle {
				background-image: url('img/content_topmiddle.png');
				width: 730px;
				height: 11px;
				float: left;
			}
			div.contentmiddle {
				background-image: url('img/content_midmiddle.png');
				background-repeat: repeat-x;
				width: 708px;
				min-height: 211px;
				height: auto !important;
  				height: 211px;
  				padding: 0px 20px;
  				color: #5e5e5e;
  				font-family: Arial, Verdana;
  				font-size: 12px;
			}
			div.content {
				height: 30px;
				background-color: #fff;
				border-left: 1px solid #bcbcbc;
				border-right: 1px solid #bcbcbc;
				min-height: 400px;
				height: auto !important;
  				height: 400px;
			}
			
			div.contentbottom {
				width: 750px;
				height: 23px;
			}
			div.contentbottom img.contentbottomleft, div.contentbottom img.contentbottomright {
				height: 23px;
				width: 11px;
				float: left;
			}
			div.contentbottom div.contentbottommiddle {
				float: left;
				height: 23px;
				width: 728px;
				text-align: center;
				background-image: url('img/content_bottommiddle.png');
			}
			img.flowers_bottom {
				margin: 0px 0px 0px 405px;
			}
			
			/* ================================================================ 
			This copyright notice must be untouched at all times.

			The original version of this stylesheet and the associated (x)html
			is available at http://www.cssplay.co.uk/menus/basic_dd.html
			Copyright (c) 2005-2009 Stu Nicholls. All rights reserved.
			This stylesheet and the associated (x)html may be modified in any 
			way to fit your requirements.
			=================================================================== */
			/* remove the bullets, padding and margins from the lists */
			.menu ul{
				list-style-type:none;
				padding:0;
				margin:0;
			}
			/* make the top level links horizontal and position relative so that we can position the sub level */
			.menu li{
				float:left;
				position:relative;
				z-index:100;
			}

			/* use the table to position the dropdown list */
			.menu table{
				position:absolute;
				border-collapse:collapse;
				z-index:80;
				left:-1px;
				top:25px;
			}

			/* style title link */
			.menu a.title, .menu a.title:visited {
				display: block;
				width: 202px;
				padding: 5px 0px 5px 5px;
				border: 0px;
				color: #fff;
				background-image: url('img/select_title.png');
				background-color: none;
				font-size: 11px;
				font-family: Arial, Verdana;
				text-decoration: none;
			}
			/* style the links hover */
			.menu a.title:hover{
				color: #333;
				background-image: url('img/select_title_hover.png');
			}
			
			/* style all the links */
			.menu ul li ul li a, .menu ul li ul li a:visited {
				display: block;
				width: 200px;
				padding: 5px 0px 5px 5px;
				border-left: 1px solid #5e5e5e;
				border-right: 1px solid #5e5e5e;
				color: #fff;
				background-color: #5e7381;
				
				margin: 0px;
				
				font-size: 11px;
				font-family: Arial, Verdana;
				text-decoration: none;
			}
			/* style the links hover */
			.menu ul li ul li a:hover{
				color: #333;
				background: #6f899a;
			}

			/* hide the sub level links */
			.menu ul ul {
				visibility:hidden;
				position:absolute;
				width: 200px;
				height: 0px;
			}
			/* make the sub level visible on hover list or link */
			.menu ul li:hover ul,
			.menu ul a:hover ul{
				visibility:visible;
				
			}
		</style>
	</head>
	
	<body>
		<div class="topbackground"></div>
		<div class="container">
			<div class="top">
				<img class="topleft" src="img/top_left.png">
				<div class="topmiddle"><a href="">Services</a><a href="">Contact</a><a href="">Aanbiedingen</a><a href="">Voorwaarden</a><a href="">MyGIPWebwinkel</a></div>
				<img class="topright" src="img/top_right.png">
			</div>
			<div class="header">
				<img class="topleft arrow" src="img/arrow_topleft.png" alt="">
				<img class="topright arrow" src="img/arrow_topright.png" alt="">
				<img class="bottomleft arrow" src="img/arrow_bottomleft.png" alt="">
				<img class="bottomright arrow" src="img/arrow_bottomright.png" alt="">
				<img class="flowers_top" src="img/flowers_top.png">
				<p>GIPWebwinkel</p>
			</div>
			<div class="contenttop">
				<img class="contenttopleft" src="img/content_topleft.png" alt="">
				<div class="contenttopmiddle"></div>
				<img class="contenttopright" src="img/content_topright.png" alt="">
			</div>
			<div class="content">
				<div class="contentmiddle">
					<div class="menu">
						<ul>
							<li><a class="title" href="">Producten</a>
							<!--[if lte IE 6]><table><tr><td><![endif]-->
								<ul>
									<li><a href="">Categorie 1</a></li>
									<li><a href="">Categorie 2</a></li>
									<li><a href="">Categorie 3</a></li>
									<li><a href="">Categorie 4</a></li>
									<li><a href="">Categorie 5</a></li>
									<li><a href="">Speelgoed & Modelbouw</a></li>
									<img src="img/select_bottom.png" alt="">
								</ul>
							<!--[if lte IE 6]></td></tr></table></a><![endif]-->
							</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="contentbottom">
				<img class="contentbottomleft" src="img/content_bottomleft.png" alt="">
				<div class="contentbottommiddle"></div>
				<img class="contentbottomright" src="img/content_bottomright.png" alt="">
			</div>
			<img class="flowers_bottom" src="img/flowers_bottom.png">
		</div>
	</body>
</html>

I altered the code copied from a CSS website a bit, and I have now some background images used for the title of the dropdown. I am succesful in changing these when the user hovers over it but I want the image of the dropdown title not to change until the user hovers out of the whole div. Because what now happens is, everthing looks good, until they start going down with their mouse, then the dropdown title appears with 4 rounded corners again. Pictures here for some more explanation:
Normal state:
http://img151.imageshack.us/my.php?image=site1.png

State when hovering the title of the dropdown:
http://img24.imageshack.us/my.php?image=site2a.png

State when hovering an item in the list:
http://img24.imageshack.us/my.php?image=site3p.png
Notice here how the title appears with 4 rounded corners again, I'd like to change that.

Any help would be appreciated;
Thanks

  • 5 Contributors
  • 5 Replies
  • 544 Views
  • 2 Years Discussion Span
  • Latest Post Latest Post by ramesh.joshi
Member Avatar for MidiMagic

You are losing hover when the mouse moves away from the object.

This is a job for javascript.

Member Avatar for sumdude

I have just recently spent a good portion of a week, dissecting and learning to use Stu Nicholl's dropdown/flyout menus myself. and hopefully have the answer to your question.

I had to read the code from like 5 of his menus to understand what every line of code was doing and deleting portions of them one by one to see the changes if any.

On one of them, Stu actually commented the purpose of most of them.

/* retain the "rollover" for each sublevel IE7 and Firefox etc */
#menu li:hover > a{background-position:bottom;}

i still do not understand what the ">" does in css like that. and i even took it off and it still works. but it stops working if you take off the "a".

anyway. change the background-position to whatever your rollover set up is, all this does is make it so that in Firefox and IE7, the rollover state remains even when the mouse leaves it while exploring the menu.


this SHOULD solve it. especiallys considering that we got the menu from the same site.


btw. I would love to know how you achieved the rounded corners for the dropdown. how many images did you use for it? 1 for each corner? or 2 (top two corners and bottom two corners)?

Member Avatar for JugglerDrummer

@sumdude you can use many different techniques, but each one will limit some dimension of the html its applied to. You could have an image with four corners (transparent in middle) limiting all sides, 2 corners vertically, limiting the height. You can have 1 image for each side and one for each corner, giving you more flexibility, or other combinations of those.

The > selector in CSS refers to a direct child. I don't think IE 6 supports it.

Member Avatar for sumdude

i'm currently struggling with making rounded corners, inside a dropdown, made up of lists, while having width set to auto, and wordwrap set to none.

most examples online use divs which i can't easily translate to UL's and LI's.

but that's for another thread I think.

thx for the clarification of the "direct child".

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.