Help Making CSS Drop Down Menus more flexible

**wyclef** · 05-19-2008, 03:40 PM

Can someone take a look at this mess and see if they can help me make these drop down menus more flexible? It's breaking if the main nav link is too long and I can't seem to figure it out. It would be great to have a bit more flexibility built in. if i remove the width in #header #global-nav ul li#--- and then set the width in #header #global-nav ul li ul to zero that seems to get me in the right direction but then the text shifts dramatically on rollover and i can't seem to pinpoint the issue.

**wyclef** · 05-22-2008, 04:37 PM

i've tried to simplify the code to make it easier to look through.
same images as attached above. if someone could help me tighten this up i'd really appreciate it.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 	
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<style type="text/css">
		body { font-family: sans-serif; background: black; }

div#hdr {
	width: 100%; height: 110px;
	background: #005488;
}
	#hdr #nav {
		width: 600px; height: 29px; 
		margin: 30px 0 0 50px; padding: 0;
		position: absolute; 
	}
		#hdr #nav ul {
			margin: 0; padding: 0;
			list-style-type: none;
			text-align: left;
		}
			#hdr #nav ul li {
				height: 29px;
				margin: 0; padding: 8px 12px 0 12px;
				float: left; 
			}
				#hdr #nav ul li a {
					font: 12px Arial, sans-serif;
					color: #FFF;
				}
				#hdr #nav ul li ul  { 
					display: none; 
				}
				#hdr #nav ul li#products:hover,
				#hdr #nav ul li#services:hover,
				#hdr #nav ul li#free:hover {
					background: url(global-nav_tabs.jpg) no-repeat top left;
				}
					#hdr #nav ul li#products:hover a,
					#hdr #nav ul li#services:hover a,
					#hdr #nav ul li#free:hover a {
						color: #000;
						font-weight: bold;
					}
					#hdr #nav ul li#products:hover ul,
					#hdr #nav ul li#services:hover ul,
					#hdr #nav ul li#free:hover ul {
						width: 162px; height: 100px; 
						margin: 5px 0 0 -12px;
						background: url(global-nav-hover_bg.png) repeat-y left;
						display: block;
					}
						#hdr #nav ul li#products:hover ul li,
						#hdr #nav ul li#services:hover ul li,
						#hdr #nav ul li#free:hover ul li {
							width: 148px; height: 18px;
							margin: 0 0 0 1px; padding: 5px 0 0 10px;
							border-top: 1px solid #c5dcf0;
							background: #fff;
						}
						#hdr #nav ul li#products:hover ul li:hover,
						#hdr #nav ul li#services:hover ul li:hover,
						#hdr #nav ul li#free:hover ul li:hover {
							background: url(global-nav-norm_bg.png) no-repeat left top;
						}
							#hdr #nav ul li#products:hover ul li a,
							#hdr #nav ul li#services:hover ul li a,
							#hdr #nav ul li#free:hover ul li a {
								font: 10px Arial, sans-serif;
							}
							#hdr #nav ul li#products:hover ul li.bottom,
							#hdr #nav ul li#services:hover ul li.bottom,
							#hdr #nav ul li#free:hover ul li.bottom {
								width: 162px; height: 43px;
								margin: -1px 0 0 0;
								background: url(global-nav-hover_bottom.png) no-repeat left;
								border: none;
							}
		</style>

	</head>

	<body>
	
		<div id="hdr">
			<div id="nav">
				<ul>
					<li><a href="/">Home</a></li>
					<li id="services"><a href="/services/">About</a>
						<ul>
							<li><a href="#">Link 1</a></li>
							<li><a href="#">Link 2</a></li>
							<li><a href="#">Link 3</a></li>
							<li class="bottom"></li>
						</ul>
					</li>
					<li id="free"><a href="/">The Long Link</a>
						<ul>
							<li><a href="#">Link 1</a></li>
							<li><a href="#">Link 2</a></li>
							<li><a href="#">Link 3</a></li>
							<li><a href="#">Link 1</a></li>
							<li><a href="#">Link 2</a></li>
							<li><a href="#">Link 3</a></li>
							<li><a href="#">Link 1</a></li>
							<li class="bottom"></li>
						</ul>
					</li>
					<li id="products"><a href="/">Contact</a>
						<ul>
							<li><a href="#">Link 1</a></li>
							<li><a href="#">Link 2</a></li>
							<li><a href="#">Link 3</a></li>
							<li class="bottom"></li>
						</ul>
					</li>
				</ul>
			</div>
		</div>
	
	</body>
</html>

**wyclef** · 05-22-2008, 06:39 PM

ok, i'm making progress...now i've got this thing working a lot better except am having problems with margins and padding in different browsers.... firefox, safari, opera, ie7... i've posted an example, if someone can take a look and help me make this more consistent across the board i'd really appreciate it. thx.

http://dynodealz.com/test1/

Thread: Help Making CSS Drop Down Menus more flexible

Thread Tools

Search Thread

Help Making CSS Drop Down Menus more flexible

The Following User Says Thank You to wyclef For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions