Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Feb 2005
    Posts
    191
    Thanks
    6
    Thanked 0 Times in 0 Posts

    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.
    Attached Files Attached Files

  • #2
    Regular Coder
    Join Date
    Dec 2007
    Posts
    107
    Thanks
    0
    Thanked 3 Times in 3 Posts
    A good article thats will help you to understand how to create CSS manus is available at Creating CSS Menus


    Hope this helps you to solve your problem.
    Programming & Webmaster Forum - AdSense Revenue Sharing forum

  • #3
    Regular Coder
    Join Date
    Feb 2005
    Posts
    191
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Thanks, but that wasn't really helpful. I'm struggling with the drop down menu aspect also...did you look at my example?

  • #4
    Regular Coder
    Join Date
    Feb 2005
    Posts
    191
    Thanks
    6
    Thanked 0 Times in 0 Posts
    i've tried to simplify the code to make it easier to look through.
    same images as attached above. if someone could take a look and help me tighten this up i'd really appreciate it. thx.

    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>

  • #5
    Regular Coder
    Join Date
    Feb 2005
    Posts
    191
    Thanks
    6
    Thanked 0 Times in 0 Posts
    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/


  •  

    Posting Permissions

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