Results 1 to 3 of 3

Thread: Help Making CSS Drop Down Menus more flexible

  1. #1
    Join Date
    Nov 2005
    Posts
    26
    Thanks
    2
    Thanked 1 Time in 1 Post

    Default Help Making CSS Drop Down Menus more flexible

    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.

  2. #2
    Join Date
    Nov 2005
    Posts
    26
    Thanks
    2
    Thanked 1 Time in 1 Post

    Default

    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>

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

    Fsoft (05-22-2008)

  4. #3
    Join Date
    Nov 2005
    Posts
    26
    Thanks
    2
    Thanked 1 Time in 1 Post

    Default

    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/

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •