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