Inline Menu example

Simply copy and paste the following code inside an html page and run it from a browser (tested on IE & Mozilla).

If you want to see the live result (we believe this is the best way to learn what is the script about), try it here (new window).

Code Source

Check out the script and cover your pages with a nice CSS menu.

<!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" xml:lang="en" lang="en">
<head>
<title>Inline Menu</title>
<meta http-equiv="content-language" content="en" />
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<style type="text/css">
body{text-align:center;}
.menu{margin:auto;width:600px;height:100px;background-color:#dcdcdc;}
.menu ul{list-style-type:none;width:auto;text-align:right;height:20px}
.menu ul li{float:right;width:150px;line-height:20px;text-align:center;margin:0px 1px 0px 5px;border:1px solid #c3c3c3;}
.menu ul li a{display:block;color:#cfcfcf;width:150px;line-height:20px;height:20px;text-decoration:none;}
.menu ul li a:hover{background-color:#cfcfcf;color:#931025;}
.current{font-weight:bold}
</style>
</head>
<body>
<h1>Inline Menu example - Strict Doctype</h1>
<p>
We put the menu on the right side of a centered box:
</p>

<div class="menu">
<ul>
	<li><a href="#">Menu 3</a></li>
	<li><a href="#">Menu 2</a></li>
	<li class="current">Menu 1</li>
</ul>
</div>
</body>
</html>

download the file

- The margin:auto part tells Mozilla/Firefox/Netscape to follow the aligned content of the body (text-align:center) for the main area where stands the menu.

Webmaster Corner

The ClickBnk Code
Another Killer Product From Michael Jones, simply follow the Blueprint For Easy Online Wealth Using Click Bank...

Mass Article Control #1
Create Thousands Of Articles From only 1 Article and Have them Submitted Automatically With A brand New Submitter!

iPowerWeb
Incredible Membership Packages - Web Hosting!

→ Maverick Money Makers - Get Paid For Life!

Inline Menu example

Inline Menu example

Webmaster Corner

Categories