Navigation menu on the top

   

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Monochrome | A Free CSS Template by Rambling Soul</title>
<style type='text/css'>
* {
  margin: 0;
  padding: 0;
}

body {
  background: #FFFFFF url(71_monochrome-images/bg.jpg) fixed repeat-x;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #666666;
}

#wrap {
  background: url(71_monochrome-images/mainbg.jpg) repeat-y;
  width: 880px;
  margin: auto;
}

#header {
  height: 210px;
  background-image: url(71_monochrome-images/header.jpg);
  background-repeat: no-repeat;
}

#content #sidebar {
  width: 222px;
  float: right;
}

#content #left {
  width: 648px;
  float: left;
}

.clear {
  clear: both;
}

#footer {
  background: url(71_monochrome-images/footer.jpg) no-repeat;
  height: 35px;
  padding-top: 25px;
  text-align: center;
}

#footer p {
  display: block;
  margin-top: 3px;
}

#footer #credit {
  font-size: 10px;
}

#sitename {
  display: block;
  padding-top: 20px;
  padding-left: 20px;
  font-variant: normal;
  text-transform: uppercase;
}

#sitename .description {
  display: block;
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
  color: #BB9F6C;
  font-variant: normal;
}

#sitename a {
  text-decoration: none;
}

#sitename a:visited,active {
  text-decoration: none;
}

h1,h2,h3,h4,h5,h6 {
  color: #000000;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-variant: small-caps;
}

h1 {
  font-size: 36px;
}

h2 {
  font-size: 24px;
}

h3 {
  font-size: 18px;
}

h4 {
  font-size: 16px;
}

h5 {
  font-size: 14px;
}

h6 {
  font-size: 12px;
}

a {
  color: #000000;
}

a:visited {
  color: #000000;
}

a:active {
  color: #584A30;
}

a:hover {
  color: #7C5B43;
  text-decoration: none;
}

#content #left p {
  line-height: 20px;
  margin-bottom: 20px;
}

#sidebar .sidebartop {
  background: url(71_monochrome-images/sidebartop.jpg) no-repeat;
  height: 65px;
}

#sidebarcontent {
  padding: 5px 10px 5px 12px;
}

#sidebar h2 {
  background: url(71_monochrome-images/sidebarheading.jpg) no-repeat
    center bottom;
  display: block;
  padding: 5px;
  font-size: 18px;
}

#sidebar ul {
  list-style: none;
}

#sidebar li {
  display: block;
  height: 25px;
}

#sidebar a {
  display: block;
  color: #999999;
  height: 20px;
  padding: 5px 5px 0px 5px;
  text-decoration: none;
  border-bottom: solid 1px #efefef
}

#sidebar a:visited,active {
  display: block;
  color: #999999;
  height: 20px;
  padding: 5px 5px 0px 5px;
  text-decoration: none;
  border-bottom: solid 1px #efefef
}

#sidebar a:hover {
  color: #000000;
  border-bottom: solid 1px #cccccc;
}

#left .post {
  background: url(71_monochrome-images/postmid.jpg) repeat-y;
  width: 641px;
  margin-left: 8px;
  margin-bottom: 20px;
}

#left .post .posttop {
  background: url(71_monochrome-images/posttop.jpg) no-repeat;
  height: 11px;
}

.post .postitem {
  padding: 10px;
}

.post .postbottom {
  background: url(71_monochrome-images/postbottom.jpg) no-repeat;
  height: 30px;
  font-size: 11px;
  padding-top: 17px;
  text-align: center;
}

.post h2 {
  display: block;
  padding: 5px 0px 5px 0px;
  border-bottom: solid 1px #D8CDB8;
  margin-bottom: 15px;
}

#left .postinfo {
  display: block;
  font-size: 11px;
  color: #666666;
  font-variant: normal;
  font-weight: normal;
}

h2 a {
  text-decoration: none;
}

h2 a:visited {
  text-decoration: none;
}

h2 a:active {
  text-decoration: none;
}

h2 a:hover {
  text-decoration: none;
}

blockquote {
  display: block;
  padding: 15px 15px 15px 35px;
  margin: 10px;
  border-bottom: dashed 1px #D0BE9B;
  border-top: dashed 1px #D0BE9B;
  font-size: 16px;
  font-family: Georgia, "Times New Roman", Times, serif;
  color: #000000;
  background: url(71_monochrome-images/quote.png) no-repeat 5px 10px;
}

blockquote p {
  line-height: 25px;
  margin: 0px;
}

.rightquote {
  float: right;
  width: 250px;
  text-align: left;
}

blockquote cite {
  display: block;
  color: #000000;
  font-weight: bold;
  padding: 3px;
  margin-top: 10px;
}

.leftquote {
  float: left;
  width: 250px;
  text-align: right;
}

#header ul {
  list-style: none;
}

#topmenu {
  float: right;
}

#topmenu li {
  display: inline;
  font-size: 14px;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  text-transform: uppercase;
  font-weight: bold;
}

#topmenu a {
  display: block;
  float: left;
  color: #E9E0CF;
  height: 36px;
  padding-top: 10px;
  padding-left: 15px;
  padding-right: 15px;
  text-decoration: none;
}

#topmenu a:visited,active {
  display: block;
  float: left;
  color: #E9E0CF;
  height: 36px;
  padding-top: 10px;
  padding-left: 15px;
  padding-right: 15px;
  text-decoration: none;
}

#topmenu a:hover {
  display: block;
  float: left;
  color: #E9E0CF;
  height: 36px;
  padding-top: 10px;
  padding-left: 15px;
  padding-right: 15px;
  text-decoration: none;
  background: url(71_monochrome-images/topmenu.png) repeat-x;
  color: #ffffff;
}

#pagination {
  background: #F5F0EA;
  padding: 8px;
  margin-left: 8px;
  margin-top: 20px;
  margin-bottom: 20px;
}

#pagination .pre {
  display: block;
  padding: 3px;
  float: left;
}

#pagination .next {
  display: block;
  padding: 3px;
  float: right;
}

#pagination .clear2 {
  clear: left;
  width: 99%;
}

#left img {
  background: #ffffff;
  padding: 3px;
  border: solid 1px #D3C2A3;
  margin: 8px;
}

#left .leftimg {
  float: left;
}

#left .rightimg {
  float: right;
}

#tab {
  background: url(71_monochrome-images/tabcontenbg.jpg) repeat;
  margin-bottom: 15px;
  margin-left: 8px;
}

#tab #tabhead {
  background: url(71_monochrome-images/tabheader.jpg) repeat-x;
  height: 40px;
}

#tab #tabcontent {
  padding: 10px;
}

#tabhead ul {
  list-style: none;
  padding-left: 10px;
}

#tabhead li {
  display: inline;
}

#tabhead a {
  display: block;
  float: left;
  height: 30px;
  padding: 10px 10px 0px 10px;
  background: url(71_monochrome-images/tabnormal.jpg) repeat-x;
  color: #ffffff;
  text-decoration: none;
}

#tabhead a:visited,active {
  display: block;
  float: left;
  height: 30px;
  padding: 10px 10px 0px 10px;
  background: url(71_monochrome-images/tabnormal.jpg) repeat-x;
  color: #ffffff;
  text-decoration: none;
}

#tabhead a:hover {
  background: url(71_monochrome-images/tabhover.jpg) repeat-x;
  color: #000000;
}

#tabhead .activetab a {
  background: url(71_monochrome-images/tabhover.jpg) repeat-x;
  color: #000000;
}

#tabhead .activetab a:visited {
  background: url(71_monochrome-images/tabhover.jpg) repeat-x;
  color: #000000;
}

#tabhead .activetab a:active {
  background: url(71_monochrome-images/tabhover.jpg) repeat-x;
  color: #000000;
}

.post ul {
  list-style: square;
  margin-left: 10px;
}

.post ol {
  list-style: decimal;
  list-style-position: inside;
}

.post li {
  padding: 5px 10px 5px 10px;
}

.post ul li {
  margin-left: 10px;
}

#left code {
  white-space: pre;
  display: block;
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
  background-color: #E3D6C6;
  color: #000000;
  margin: 10px;
  padding: 10px;
}

#left table {
  width: 95%;
  border: solid 1px #DBD2B0;
}

#left th {
  padding: 10px;
  background: url(71_monochrome-images/strips.jpg) repeat-x;
  color: #000000;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 14px;
  text-transform: uppercase;
  margin: 0px;
  border-bottom: solid 1px #DBD2B0;
}

#left td {
  padding: 10px;
  background: #F3EFDE;
  text-align: center;
  border-bottom: solid 1px #DBD2B0;
}

.form {
  margin: 10px 25px 10px 50px;
}

.form .text {
  display: block;
  border: solid 1px #B6A278;
  background: #F9F8F2;
  width: 250px;
  padding: 5px;
  font-size: 14px;
  color: #000000;
}

.form label {
  display: block;
  margin-bottom: 3px;
  margin-top: 10px;
}

.form .text:hover {
  background: #FFFFFF;
  border: solid 1px #000000;
}

.form .text:focus {
  background: #F4EFE3;
  border: solid 1px #000000;
}

.form .button {
  display: block;
  border: solid 1px #CBBA96;
  background: #EAE3D5;
  padding: 5px 10px 5px 10px;
  margin: 10px 0px 10px 0px;
}

.form .button:hover {
  display: block;
  border: solid 1px #CBBA96;
  background: #EDECD1;
  padding: 5px 10px 5px 10px;
  margin: 10px 0px 10px 0px;
}
</style>


</head>

<body>
<div id="wrap">
<div id="header">
<ul id="topmenu">
<li><a href="#">Home</a> </li>
<li><a href="tables.html">Tables</a> </li>
<li><a href="forms.html">Forms</a></li>
<li><a href="others.html">Others</a></li>

</ul>
<div class="clear"></div>
<h1 id="sitename"><a href="#">Monochrome</a> <span class="description">A Free CSS Template by RamblingSoul</span></h1>
</div>
<div id="content">
<div id="sidebar">
<div class="sidebartop">

</div>
<div id="sidebarcontent">
<h2>Categories</h2>
  <ul>
    <li>
      <a href="#">Lorem Ipsum</a>    </li>
    <li>
      <a href="#">Consectetuer</a>    </li>
    <li>
      <a href="#">Nunc Viverra</a>    </li>
    <li>
      <a href="#">Sed Porta Rhoncus</a>    </li>
    <li>
      <a href="#">Mauris Sapien</a>    </li>
  </ul>

<h2>Archives</h2>
  <ul>
    <li>
      <a href="#">Lorem Ipsum</a>    </li>
    <li>
      <a href="#">Consectetuer</a>    </li>
    <li>
      <a href="#">Nunc Viverra</a>    </li>
    <li>
      <a href="#">Sed Porta Rhoncus</a>    </li>
    <li>
      <a href="#">Mauris Sapien</a>    </li>
  </ul>
  </div>
</div>

<div id="left">
<div id="tab">
<div id="tabhead">
  <ul>
    <li class="activetab"><a href="#">Whats New</a></li>
    <li><a href="#">Whats Hot</a></li>
    <li><a href="#">Recent Posts</a></li>
    <li><a href="#">Most Popular</a></li>
  <li><a href="#">Latest Comments</a></li>
  </ul>
</div>
<div id="tabcontent">
<img class="leftimg" src="71_monochrome-images/guitar.jpg" alt="Guitar" />
<h3>Lorem Ipsum Dolor Sit Amet <span class="postinfo">Posted by Admin on 24 January 2008</span></h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc viverra adipiscing dui. Sed porta rhoncus sem. Aliquam erat volutpat. Praesent suscipit, lectus vitae aliquam volutpat, quam neque tincidunt leo, a condimentum libero lectus sit amet enim. Quisque tristique. <a href="#">Read More</a></p>
</div>
</div>
<div class="post">
<div class="posttop"></div>
<div class="postitem">
<h2><a href="#">Lorem Ipsum Dolor Sit Amet</a><span class="postinfo">Posted by Admin on 24 January 2008</span> </h2>
 <img class="leftimg" src="71_monochrome-images/img.jpg" alt="Image" />   <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc viverra  adipiscing dui. Sed porta rhoncus sem. Aliquam erat volutpat. Praesent  suscipit, lectus vitae aliquam volutpat, quam neque tincidunt leo, a  condimentum libero lectus sit amet enim. Quisque tristique. Sed  facilisis, eros eget sagittis congue, sapien quam elementum sapien, ut  hendrerit ante lacus in felis. Curabitur ac eros. Mauris sapien.  </p>
  <blockquote class="rightquote">
  <p>Monochrome is a Free CSS Template released under <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons License</a> by Rambling Soul. You can download more templates from my <a href="http://www.opendesigns.org/profile/?user=ramblingsoul">profile</a> or from my <a href="http://ramblingsoul.com">website</a>.<cite>BlockQuote</cite> </p>
  </blockquote>
  <p>Vestibulum odio nisl, accumsan vitae, varius vitae, faucibus a, dui.  Vestibulum tortor. Suspendisse potenti. Phasellus est. Maecenas aliquet  nunc ac est. In porta posuere sem. Morbi sagittis ipsum ut nunc.  Suspendisse euismod. Ut quis nunc. Quisque massa. Morbi faucibus nisi  ut sem. Mauris venenatis, justo ac faucibus convallis, mi arcu  scelerisque lacus, non molestie velit lectus ut pede. Sed venenatis.  Nullam sed quam. Morbi quis eros. Pellentesque elit. Nam at est. Etiam  vitae ligula sed justo fringilla posuere. Maecenas lorem dolor,  vulputate ac, vehicula mollis, facilisis ut, odio. In vitae nisi nec  massa imperdiet mattis. <a href="#">Read More</a></p>
</div>
  <div class="postbottom"><a href="#">Category</a> | <a href="#">No Comments</a> | <a href="#">Share This</a> </div>
  </div>
  
  
  
  <div class="post">
<div class="posttop"></div>
<div class="postitem">
<h2><a href="#">Lorem Ipsum Dolor Sit Amet</a><span class="postinfo">Posted by Admin on 24 January 2008</span> </h2>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc viverra  adipiscing dui. Sed porta rhoncus sem. Aliquam erat volutpat. Praesent  suscipit, lectus vitae aliquam volutpat, quam neque tincidunt leo, a  condimentum libero lectus sit amet enim. Quisque tristique. Sed  facilisis, eros eget sagittis congue, sapien quam elementum sapien, ut  hendrerit ante lacus in felis. Curabitur ac eros. Mauris sapien.  </p>
 <h4>Unordered List</h4>
  <ul>
    <li>Vestibulum purus nisi, commodo sed, fermentum et, bibendum eu, libero.</li>
    <li> Duis volutpat iaculis libero. Proin ac neque sit amet risus ornare  fringilla.</li>
    <li> Aenean orci. Maecenas dapibus. Vivamus varius justo sit amet  urna. </li>
    <li>Sed facilisis massa mollis pede sollicitudin pulvinar. </li>
    <li>Nulla  facilisi.Vestibulum odio nisl, accumsan vitae, varius vitae, faucibus a, dui.  Vestibulum tortor. </li>
    <li>Suspendisse potenti. Phasellus est. Maecenas aliquet  nunc ac est. </li></ul>
    
  <h4>Ordered List</h4>
 <ol>
    <li>In porta posuere sem. </li>
    <li>Morbi sagittis ipsum ut nunc.  Suspendisse euismod. </li>
    <li>Ut quis nunc. Quisque massa. Morbi faucibus nisi  ut sem. </li>
    <li>Mauris venenatis, justo ac faucibus convallis, mi arcu  scelerisque lacus, non molestie velit lectus ut pede. Sed venenatis.  Nullam sed quam. </li>
    <li>Morbi quis eros. Pellentesque elit. Nam at est. Etiam  vitae ligula sed justo fringilla posuere. Maecenas lorem dolor,  vulputate ac, vehicula mollis, facilisis ut, odio. In vitae nisi nec  massa imperdiet mattis. </li>
 </ol>
  </div>
  <div class="postbottom"><a href="#">Category</a> | <a href="#">No Comments</a> | <a href="#">Share This</a> </div>
  </div>
  
  <div class="post">
<div class="posttop"></div>
<div class="postitem">
<h2><a href="#">Lorem Ipsum Dolor Sit Amet</a><span class="postinfo">Posted by Admin on 24 January 2008</span> </h2>
  <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc viverra  adipiscing dui. Sed porta rhoncus sem. Aliquam erat volutpat. Praesent  suscipit, lectus vitae aliquam volutpat, quam neque tincidunt leo, a  condimentum libero lectus sit amet enim. Quisque tristique. Sed  facilisis, eros eget sagittis congue, sapien quam elementum sapien, ut  hendrerit ante lacus in felis. Curabitur ac eros. Mauris sapien.  </p>
  <h3>Code Example</h3>
  <code>
  #header {
  height:210px;
  background-image: url(71_monochrome-images/header.jpg);
  background-repeat: no-repeat;
}
</code>
  <blockquote class="leftquote">
  <p>Vestibulum purus nisi, commodo sed, fermentum et, bibendum eu, libero.  Duis volutpat iaculis libero. Proin ac neque sit amet risus ornare  fringilla. Aenean orci. Maecenas dapibus. Vivamus varius justo sit amet  urna. Sed facilisis massa mollis pede sollicitudin pulvinar. Nulla  facilisi. <cite>Vestibulum Purus</cite> </p></blockquote>
  <p>Vestibulum odio nisl, accumsan vitae, varius vitae, faucibus a, dui.  Vestibulum tortor. Suspendisse potenti. Phasellus est. Maecenas aliquet  nunc ac est. In porta posuere sem. Morbi sagittis ipsum ut nunc.  Suspendisse euismod. Ut quis nunc. Quisque massa. Morbi faucibus nisi  ut sem. Mauris venenatis, justo ac faucibus convallis, mi arcu  scelerisque lacus, non molestie velit lectus ut pede. Sed venenatis.  Nullam sed quam. Morbi quis eros. Pellentesque elit. Nam at est. Etiam  vitae ligula sed justo fringilla posuere. Maecenas lorem dolor,  vulputate ac, vehicula mollis, facilisis ut, odio. In vitae nisi nec  massa imperdiet mattis. </p></div>
  <div class="postbottom"><a href="#">Category</a> | <a href="#">No Comments</a> | <a href="#">Share This</a> </div>
  </div>
  
 <div id="pagination">
 <span class="pre">&laquo;<a href="#">Previous Post</a></span>    <span class="next"><a href="#">Next Post</a>&raquo;</span>
 <div class="clear2"></div>
 </div>
  </div>
<div class="clear"></div>
<div id="footer">
<p>Copyright &copy; yourwebsite.com | <a href="#">Some</a> | <a href="#">Links</a> | <a href="#">Here</a> </p>
<p id="credit"><a href="#">CSS Template</a> by RamblingSoul | <a href="http://free-templates.ru">Free-Templates.ru</a></p>


</div>
</div>
</div>
</body>
</html>

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.	Wide and tall menu
15.	Shading menu bar
16.	Top menu bar with arrow icon
17.	3D top bar background
18.	Left menu bar aligned to the bottom
19.	Indented vertical menu
20.	Single column layout with top menu bar
21.	Two-level left menu bar
22.	Right section bar with shading menu
23.	Right menu bar with image background
24.	Right menu bar with section
25.	Top menu bar
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

Navigation menu on the top : Menu « CSS Controls « HTML / CSS

Related examples in the same category