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 2 of 2

Thread: CSS Basic Menu

  1. #1
    New to the CF scene
    Join Date
    Jan 2013
    Location
    Netherlands
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Basic Menu

    Good day

    Just started to dive into HTML/CSS, and just signed as well into this great forum as I have already an issue which I cannot resolve myself (Googled and read available books)

    The issue is, I seem to be able to have my menu aligned correctly when viewing through IE9 but not in Chrome or Firefox (my menu goes from being horizontal to vertical)

    I'm sure the solution is simple (I just cannot figure it out)

    NOTE:
    If the way I present the problem is not correct (e.g. code should be in attachment), let me know

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        
    <head>
    <title>My Homepage</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    .nav ul {list-style:none;margin:0;padding:0}
    .nav li {float:left; width:100px; background-color:#4682B4; text-align:center; border-right: 1px solid white;position:relative; height:30px;line-height:30px}
    .nav li ul li {float:none; width:150px; text-align:left;padding-left:5px; border-top:1px solid white;}
    .nav a {text-decoration:none; color:White}
    .nav li ul {position:absolute;top:30px;left:0;visibility:hidden;}
    
    .nav li:hover ul {visibility:visible}
    .nav li:hover {background-color:maroon;
    
    .content {clear:both;}
    </style>
    </head>
    
    <body>
    <h1>My Site</h1>
    
    <div class="nav">
    		 <ul>
    		 
    		 <li>
    		 		 <a href="about.html">About Me</a>
    				 <ul>
    				  <li><a href="General.html">Background</a></li>
    					<li><a href="Hobbies.html">My hobbies</a></li>
    					<li><a href="Freelance.html">Freelance Work</a></li>
    					<li><a href="CV.html">My CV</a></li>
    					<li><a href="future.html">Future Plans</a></li>
    					
    		 </li>
    		 
    		 <li>
    		 		 <a href="Photos.html">Photo Gallery</a>
    				 <ul>
    				 	<li><a href="Family.html">My Family</a></li>
    				  <li><a href="Iceland.html">My Country</a></li>
    				  <li><a href="fantastic.html">Fantastic Places!</a></li>
    				 </ul>
    		 </li>
    		 
    		 <li>
    		 		 <a href="Codes.html">Practical</a>
    				 <ul>
    				  <li><a href="finance.hmtl">Finance</a></li>
    					<li><a href="VBA.html">Excel VBA</a></li>
    					<li><a href="project.html">Project Planning</a>
    					<li><a href="Risk.html">Risk Assessment</a>
    					<li><a href="SQL.html">SQL and data management</a>
    				 </ul>
    		 </li>
    		 
    		 <li>
    		 		 <a href="contact.html">Contact me</a>
    		 </li>
    		 
    		  <li>
    		 		 <a href="links.html">Other Sites</a>
    				 <ul>
    				  <li><a href="http://www.ssgworld.com">Sun-Sun Group</a></li>
    					<li><a href="http://www.puduhealth.nl">Pu Du</a></li>
    					<li><a href="http://www.yuzutang.nl">Yu Zu Tang</a></li>
    					<li><a href="http://www.hi.is">University of Iceland</a></li>
    					<li><a href="http://www.bifrost.is">University of Bifrost</a></li>
    					<li><a href="http://www.bifrost.is">My father Workshop</a></li>
    				 </ul>
    		 </li>
    		 
    		 </u1>
    </div>
    
    <h2 class="content">This is the content section.</h2>
    </body>
    </html>

  • #2
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    You have a missing closing tag. The "About Me" subgroup is missing it. IE is goofy and should have had the problem too.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        
    <head>
    <title>My Homepage</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    .nav ul {list-style:none;margin:0;padding:0}
    .nav li {float:left; width:100px; background-color:#4682B4; text-align:center; border-right: 1px solid white;position:relative; height:30px;line-height:30px}
    .nav li ul li {float:none; width:150px; text-align:left;padding-left:5px; border-top:1px solid white;}
    .nav a {text-decoration:none; color:White}
    .nav li ul {position:absolute;top:30px;left:0;visibility:hidden;}
    
    .nav li:hover ul {visibility:visible}
    .nav li:hover {background-color:maroon;
    
    .content {clear:both;}
    </style>
    </head>
    
    <body>
    <h1>My Site</h1>
    
    <div class="nav">
    	<ul>
    		<li>
    			<a href="about.html">About Me</a>
    			<ul>
    				<li><a href="General.html">Background</a></li>
    				<li><a href="Hobbies.html">My hobbies</a></li>
    				<li><a href="Freelance.html">Freelance Work</a></li>
    				<li><a href="CV.html">My CV</a></li>
    				<li><a href="future.html">Future Plans</a></li>
    			</ul>
    		</li>
    		<li>
    			<a href="Photos.html">Photo Gallery</a>
    			<ul>
    				<li><a href="Family.html">My Family</a></li>
    				<li><a href="Iceland.html">My Country</a></li>
    				<li><a href="fantastic.html">Fantastic Places!</a></li>
    			</ul>
    		</li>
    		<li>
    			<a href="Codes.html">Practical</a>
    			<ul>
    				<li><a href="finance.hmtl">Finance</a></li>
    				<li><a href="VBA.html">Excel VBA</a></li>
    				<li><a href="project.html">Project Planning</a>
    				<li><a href="Risk.html">Risk Assessment</a>
    				<li><a href="SQL.html">SQL and data management</a>
    			</ul>
    		</li>
    		<li>
    			<a href="contact.html">Contact me</a>
    		</li>
    		<li>
    			<a href="links.html">Other Sites</a>
    			<ul>
    				<li><a href="http://www.ssgworld.com">Sun-Sun Group</a></li>
    				<li><a href="http://www.puduhealth.nl">Pu Du</a></li>
    				<li><a href="http://www.yuzutang.nl">Yu Zu Tang</a></li>
    				<li><a href="http://www.hi.is">University of Iceland</a></li>
    				<li><a href="http://www.bifrost.is">University of Bifrost</a></li>
    				<li><a href="http://www.bifrost.is">My father Workshop</a></li>
    			</ul>
    		</li>
    	</u1>
    </div>
    
    <h2 class="content">This is the content section.</h2>
    </body>
    </html>
    
    jakob_holland is offline Add to jakob_holland's Reputation Report Post   	Reply With Quote
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls


  •  

    Tags for this Thread

    Posting Permissions

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