Top menu bar : Menu « CSS Controls « HTML / CSS

Top menu bar

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="" lang="en" xml:lang="en">
<title>Morning Swim</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Homefront Studios" />
<meta name="description" content="oswd, open source template" />
<style type='text/css'>
body,html {
  background: #e3f0c1;
  color: #1B403E;
  margin: 0;
  padding: 0;

body {
  min-width: 800px;
  background: #e3f0c1 url(Morning-Swim-images/wrap_bg.gif) repeat-y top
  font: 0.8em/1.4em Tahoma, Geneva, sans-serif;

#wrap {
  background: #F4F7EB;
  width: 760px;
  margin: 0 auto;

#header {
  background: #B29742 url(Morning-Swim-images/header_bg.jpg) no-repeat top
  height: 175px;
  margin: 0;
  padding: 0;

#header h1 {
  color: #7AA410;
  font: italic bold 400% "Times New Roman", Times, serif;
  margin: 0;
  padding: 40px 20px;

#nav {
  background: #AFCD70;
  border-top: 2px solid #889F57;
  border-bottom: 2px solid #889F57;
  padding: 5px 10px;

#nav ul {
  list-style: none;
  margin: 0;
  padding: 0;

#nav li {
  display: inline;
  margin: 0;
  padding: 0 2em 0 0;

#nav li a {
  font-weight: 700;
  text-decoration: none;

#nav li a:link {
  color: #060;

#nav li a:visited {
  color: #768756;

#main {
  color: #1B403E;
  background: #F4F7EB;
  float: left;
  width: 500px;
  border-right: 1px dashed #E3F0C1;
  padding: 20px 0;

#main h2,#main h3,#main p {
  padding: 0 20px;

#main h2,#main h3 {
  color: #B19A53;

#sidebar {
  background: #F4F7EB;
  float: right;
  width: 240px;
  padding: 20px 0;

#sidebar ul {
  padding-bottom: 1em;

#sidebar li {
  color: #AFCD70;
  list-style: circle;

#sidebar li a {
  text-decoration: none;

#sidebar li a:link {
  color: #547999;

#sidebar li a:visited {
  color: #895499;

#sidebar h3,#sidebar p {
  padding: 0 10px 0 0;

#sidebar h3 {
  color: #b19a53;

#footer {
  color: #060;
  border-top: 2px solid #889F57;
  border-bottom: 2px solid #889F57;
  background: #AFCD70;
  clear: both;
  font-size: 0.75em;
  text-align: center;

#footer p {
  margin: 0;
  padding: 5px;

sup,sub {
  color: #7AA410;

blockquote {
  background: #e3f0c1;
  border-left: 2px solid #afcd70;
  font: 0.9em/1.5em "Palatino Linotype", "Book Antiqua", Palatino, serif;
  color: #898D67;
  letter-spacing: .05em;
  margin-top: 15px;
  margin-bottom: 15px;
  padding: 6px;

.blendedlinks {
  color: #060;
  text-decoration: none;

#nav li a:hover,#nav li a:active {
  color: #E3F0C1;

#main p,#sidebar p {
  color: #1B403E;

#sidebar li a:hover,#sidebar li a:active {
  color: #999254;

<div id="wrap">
<div id="header"><h1>Morning Swim</h1></div><!-- header -->
<div id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Templates</a></li>
<li><a href="#">Graphics</a></li>
</div><!-- nav -->
<div id="main">
<h2>Welcome to Morning Swim</h2>
<p>Fresh, like the newly-risen sun on a mountain lake in summer, when the world is golden and bright.  Jump in!</p>
<p>This template validates as proper XHTML/CSS, with none of those pesky tables or proprietary tags to clutter things up.</p>
<p>Thanks for looking!</p>
<br />
Aenean tempor. Mauris tortor quam, elementum eu, convallis a, semper quis, purus. Cras at tortor in purus tincidunt tristique. In hac habitasse platea dictumst. Ut eu lectus eu metus molestie iaculis. In ornare. Donec at enim vel erat tempor congue. Nullam varius. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla feugiat hendrerit risus. Integer enim velit, gravida id, sollicitudin at, consequat sit amet, leo. Fusce imperdiet condimentum velit. Phasellus nonummy interdum est. Pellentesque quam.
<h3>Consectetuer adipiscing elit</h3>
<p>Nulla dictum. Praesent turpis libero, pretium in, pretium ac, malesuada sed, ligula. Sed a urna eu ipsum luctus faucibus. Curabitur fringilla. Suspendisse sit amet quam. Sed vel pede id libero luctus fermentum. Vestibulum volutpat tempor lectus. Vivamus convallis tempus ante. Nullam adipiscing dui blandit ipsum. Nullam convallis lacus ut quam. Mauris semper elit at ante. Vivamus tristique. Pellentesque pharetra ante at pede. In ultrices arcu vitae purus. In rutrum, erat at mollis consequat, leo massa consequat libero, ac vestibulum libero tellus sed risus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>Maecenas eu velit nec magna venenatis consequat. In neque. Vivamus pellentesque, lacus eu aliquet semper, lorem metus rhoncus metus, a ornare orci ante a diam. Nunc sem nisl, aliquet quis, elementum nec, imperdiet in, wisi. Proin in lorem. Etiam molestie diam eget ante. Morbi quis tortor id lacus mollis venenatis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam vel orci sit amet tellus mollis eleifend. Donec urna diam, viverra eget, ultricies gravida, ultrices eu, erat. Proin vel arcu. Sed diam. Cras hendrerit arcu sed augue. Sed justo felis, luctus a, accumsan in, tincidunt facilisis, libero. Phasellus eu eros.</p>
</div><!-- main -->
<div id="sidebar">
<h3>Design Origins</h3>
<p>Made on Earth by humans in the web design shop of Homefront Studios.
<br />
...With feeling!<sup>*</sup></p>
<p><sub>* And a good amount of pixie dust</sub></p>
<h3>Link Roll</h3>
<li><a href="">Homefront Studios</a></li>
<li><a href="">Contact me</a></li>
<li><a href="">OSWD</a></li>
<li><a href="">Valid XHTML</a></li>
<li><a href="">Valid CSS</a></li>
<h3>Using this Design</h3>
<p>This template is released as an open source web design, which means that you are free to use it 
and edit it any way you wish for personal or commercial purposes.</p>
<p>The image used is royalty-free stock photography with no usage restrictions.</p>
<p>We would feel the love if you'd leave the Homefront Studios link in the footer, though it's not 
required.  If you use this template, we'd love to see it grow, so please, <a 
href="">drop us a line</a> and tell us where we can sneak a peek 
at our little guy.</p>
</div><!-- sidebar -->
<div id="footer">
<p>Homefront Studios Web Design - <a href="">Web 
</div><!-- footer -->
</div><!-- wrap -->


Related examples in the same category

1.Use show or hide UL with link
2.Horizontal menu
3.CSS only menu with mouse over
4.Left bar menu
5.Menu bar with highlight
6.Menu with highlight
7.fixed width floated menu
8.Mouse hover left bar
9.Left navigation bar
10.Use UL and LI to wrap link menu
11.Tab Menu
12.Left bar menu list
13.Top tab menu bar
14.Navigation menu on the top
15.Wide and tall menu
16.Shading menu bar
17.Top menu bar with arrow icon
18.3D top bar background
19.Left menu bar aligned to the bottom
20.Indented vertical menu
21.Single column layout with top menu bar
22.Two-level left menu bar
23.Right section bar with shading menu
24.Right menu bar with image background
25.Right menu bar with section
26.Using top arrow to indicate top menu selection
27.Wide and tall top menu bar
28.List menu bar with background image
29.Two level menu bar
30.Top menu with arrow indication
31.Two column, two leve top menu bar
32.List menu with image
33.Menu List item
34.List menu bar
35.Top menu list bar with bold bottom
36.Side menu bar
37.Scrollable section in side menu bar
38.Selected menu item indication
39.Card layout with top menu bar
40.Side menu bar with lot of space in between
41.HTML skeleton code for creating a two-level horizontal drop menu
42.using jQuery to toggle a hidden menu
43.Vertical menu
44.Horizontal menu bar
45.Vertical menu bar
46.sliding door menu
47.horizontal list menu
48.Sub navigation menu
49.Pure css menu
50.Two column layout with menu on the left
51.Navigation menu horizontal
52.Pure CSS drop-down menu
53.Menu item with border
54.Vertical menu on the left
55.LI menu
56.Mouse hover effect for left menu
57.Post item layout with menu
58.Left menu bar with mouse hover effect
59.a:hover background: transparent url(img/menu_arrow.gif) bottom center no-repeat;
60.Menu item with border 2
61.Link menu
62.Left menu bar with thicker border
63.Change border and background with mouse hover for left menu bar
64.Nested left menu bar
65.Vertical menu bar 2
66.Fixed left menu bar
67.Dark background for menu bar
68.Link menu item with side bar
69.Tag like top menu bar
70.Two line top menu bar
71.Menu item separated with border
72.Using arrow image to indicate current menu selection
73.Two level top menu bar
74.Tab menu bar with mouse hover effect
75.Menu bar with background image
76.Two level side menu bar
77.Left bar with news item
78.Continue read link