...

View Full Version : CSS Basic Menu



jakob_holland
01-24-2013, 09:52 AM
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


<!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>

jerry62704
01-24-2013, 03:34 PM
You have a missing closing tag. The "About Me" subgroup is missing it. IE is goofy and should have had the problem too.


<!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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum