Using top arrow to indicate top menu selection : Menu « CSS Controls « HTML / CSS






  1. HTML / CSS
  2. CSS Controls
  3. Menu

Using top arrow to indicate top menu selection

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--

Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License

Title      : Puzzled
Version    : 1.0
Released   : 20080706
Description: A wide two-column design suitable for blogs and small websites.

-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Puzzled by Free Css Templates</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type='text/css'>
/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/

body {
  margin: 0;
  padding: 0;
  background: #FFFFFF url(Puzzled-images/img01.jpg) repeat-x left top;
  text-align: justify;
  font-family: Tahoma, Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #404040;
}

form {
  margin: 0;
  padding: 0;
}

fieldset {
  margin: 0;
  padding: 0;
  border: none;
}

input, textarea, select {
  font: normal 1em "Trebuchet MS", Arial, Helvetica, sans-serif;
}


h1, h2, h3 {
  font-weight: normal;
  color: #212121;
}

h1 {
  letter-spacing: -1px;
  font-size: 2.2em;
}

h2 {
  font-size: 1.4em;
}

h3 {
  font-size: 1.2em;
}

p, ul, ol {
}

p {
}

.blockbg {
  background: #D9D785;
}

blockquote {
  background: url(Puzzled-images/img08.jpg) no-repeat left top;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-style: italic;
  margin: 0 0 0 15px;
  padding: 0px 20px 0px 30px;
  font-size: 18px;
  color: #3D3D3D;
}

ul {
}

ol {
}

a {
  color: #000000;
}

a:hover {
  text-decoration: none;
}

small {
}

hr {
  display: none;
}

img {
  border: none;
}

img.left {
  float: left;
  margin: 0 15px 0 0;
  border: #D9D785 1px dashed;
}

img.right {
  float: right;
  margin: 0 0 0 15px;
  border: #D9D785 1px dashed;
}

.text1 {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-style: italic;
  margin: 0 0 0 15px;
  padding: 90px 20px 0px 30px;
  font-size: 30px;
  color: #FFFFFF;
}

/* Header */

#header {
  width: 900px;
  margin: 0 auto;
  height: 71px;
  letter-spacing: -1px;
  font-family: Georgia, "Times New Roman", Times, serif;
}


#headerbg {
  clear: both;
  margin: 0 auto;
  width: 900px;
  height: 209px;
  background: url(Puzzled-images/img05.jpg) no-repeat left top;
  margin: 0 auto;
  margin-top: 20px;
}

/* Logo */

#logo {
  float: left;
  margin-top: 30px;
}

#logo h1, #logo h2, #logo p {
  float: left;
  margin: 0;
  text-transform: lowercase;
}

#logo h1 {
  background: url(Puzzled-images/img04.jpg) no-repeat left 50%;
  padding-left: 60px;
  text-align: center;
  font-size: 3.2em;
  color: #000000;
}

#logo h1 a {
  color: #000000;
}

#logo p {
  padding-top: 27px;
  text-transform: uppercase;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size:10px;
  color: #000000;
}

#logo h2 a, #logo p a {
  color: #000000;
}

#logo a {
  text-decoration: none;
}

/* Menu */

#menu {
  float: right;
  margin-top: 21px;
}

#menu ul {
  margin: 0;
  list-style: none;
}

#menu li {
  display: inline;
}

#menu a {
  display: block;
  float: left;
  padding: 30px 20px 0 20px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 14px;
  color: #4E4E4E;
}

#menu a:hover {
  background: url(Puzzled-images/img03.jpg) no-repeat center top;
}

#menu .current_page_item a {
  background: url(Puzzled-images/img03.jpg) no-repeat center top;
}

/* Page */

#page {
  width: 900px;
  margin: 0 auto;
  padding-top: 20px;
  background: #F4F4F4;
}

#latest-post {
  float: left;
  width: 570px;
  padding: 0px 20px 0px 20px;
  line-height: 25px;
  font-size: 12px;
}

#recent-posts {
  float: right;
  width: 250px;
  padding: 0px 10px 20px 20px;
  line-height: 25px;
  font-size: 12px;
}

#recent-posts .entry {
}

#recent-posts .entry a {
  background: #333333;
  padding: 5px 10px;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 10px;
  color: #CCCCCC;
}

#recent-posts .more {
  background: url(Puzzled-images/img04.gif) no-repeat left 50%;
  padding-left: 20px;
}

.post {
}

.post .title {
  margin: 0;
}

.post .meta {
  margin: 0;
  padding-bottom: 10px;
  padding-top: 10px;
  line-height: normal;
  font-size: 13px;
  color: #505050;
}

.post .meta a {
  color: #000000;
}

.post .entry {
  margin-bottom: 20px;
  padding-bottom: 5px;
  border-bottom: #9C9C9C 1px dashed;

}

/* Sidebar */

#sidebar {
  clear: both;
  width: 900px;
  background: #000000;
  color: #CCCCCC;
  padding: 10px 0 0 0;
}

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

#sidebar li {
  display: block;
  float: left;
  width: 187px;
  padding: 10px 10px 10px 25px;
}

#sidebar li ul {
  line-height: 1.8em;
}

#sidebar li li {
  display: list-item;
  background: url(Puzzled-images/img07.gif) no-repeat left 50%;
  float: none;
  width: auto;
  padding: 0 0 0 10px;
  line-height: 25px;
}

#sidebar h2 {
  margin: 0 0 10px 0;
  color: #FFFFFF;
}

#sidebar a {
  text-decoration: none;
  color: #CCCCCC;
}

#sidebar a:hover {
  text-decoration: underline;
}

/* Footer */

#footer {
  width: 900px;
  height: 50px;
  margin: 0 auto;
  margin-bottom: 20px;
  background: url(Puzzled-images/img06.jpg) no-repeat left top;
  font-size: 11px;
  color: #CCCCCC;
}

#footer p {
  margin: 0;
  padding: 13px 20px 15px 20px;
}

#footer a {
  color: #FFFFFF;
}

#legal {
  float: left;
}

#links {
  float: right;
}
</style>


</head>
<body>
<!-- start header -->
<div id="header">
  <div id="logo">
    <h1><a href="#">Puzzled</a></h1>
  </div>
  <div id="menu">
    <ul>
      <li class="current_page_item"><a href="#">home</a></li>
      <li><a href="#">photos</a></li>
      <li><a href="#">about</a></li>
      <li><a href="#">links</a></li>
      <li><a href="#">contact</a></li>
    </ul>
  </div>
</div>
<!-- end header -->
<div id="headerbg"><p class="text1">&#8220;In posuere eleifend odio quisque <br />
  semper augue mattis&#8221;</p>
</div>
<!-- start page -->
<div id="page">
  <!-- start content -->
  <div id="content">
    <!-- start latest-post -->
    <div id="latest-post" class="post">
      <h1 class="title">Welcome to Our Website!</h1>
      <p class="meta"><small>Posted by Admin on August 3, 2007<br />
        Filed under <a href="#">Uncategorized</a> | <a href="#">Comments (12)</a></small></p>
      <div class="entry">
        <p>This is <strong>Puzzled</strong>, a free, fully standards-compliant CSS template designed by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>. This free template is released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attributions 2.5</a> license, so you're pretty much free to do whatever you want with it (even use it commercially) provided you keep the links in the footer intact. The photo used is from <a href="http://www.pdphoto.org/">PDPhoto.org</a>. Aside from that, have fun with it :)</p>
        <h2>Sample Tags</h2>
        <blockquote>
          <p>A blockquoted paragraph. In posuere eleifend odio quisque semper augue mattis wisi maecenas ligula.&#8221;</p>
        </blockquote>
        <p>An example of an ordered list:</p>
        <ol>
          <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
          <li>Phasellus nec erat sit amet nibh pellentesque congue.</li>
          <li>Cras vitae metus aliquam risus pellentesque pharetra.</li>
        </ol>
        <h3>Heading Level 3: Followed by an Unordered List</h3>
        <ul>
          <li>Cras vitae metus aliquam risus pellentesque pharetra.</li>
          <li>Maecenas vitae orci vitae tellus feugiat eleifend.</li>
          <li>Etiam ac tortor eu metus euismod lobortis</li>
        </ul>
        <p>Pellentesque tristique ante ut risus. Quisque dictum. Integer nisl risus, sagittis convallis, rutrum id, elementum congue, nibh. Suspendisse dictum porta lectus. Donec placerat odio vel elit. Nullam ante orci, pellentesque eget, tempus quis, ultrices in, est. Curabitur sit amet nulla. Nam in massaed vel tellus. </p>
      </div>
    </div>
    <!-- end latest-post -->
    <!-- start recent-posts -->
    <div id="recent-posts">
      <div class="post">
        <h2 class="title">Lorem Ipsum Dolor </h2>
        <p class="meta"><small>Posted by Admin on August 3, 2007<br />
          Filed under <a href="#">Uncategorized</a> | <a href="#">Comments (12)</a></small></p>
        <div class="entry">
          <p>Quisque dictum. Integer nisl risus, sagittis convallis, rutrum id, elementum congue, nibh. Suspendisse dictum porta lectus. Donec placerat odio vel elit [&hellip;]</p>
          <p><a href="#" class="more">Read more</a></p>
        </div>
      </div>
      <div class="post">
        <h2 class="title">Suspendise Dictum </h2>
        <p class="meta"><small>Posted by Admin on August 3, 2007<br />
          Filed under <a href="#">Uncategorized</a> | <a href="#">Comments (12)</a></small></p>
        <div class="entry">
          <p>Quisque dictum. Integer nisl risus, sagittis convallis, rutrum id, elementum congue, nibh. Suspendisse dictum porta lectus. Donec placerat odio vel elit [&hellip;]</p>
          <p><a href="#" class="more">Read more</a></p>
        </div>
      </div>
      <div class="post">
        <h2 class="title">Maecenas Vitaeorci Vitae</h2>
        <p class="meta"><small>Posted by Admin on August 3, 2007<br />
          Filed under <a href="#">Uncategorized</a> | <a href="#">Comments (12)</a></small></p>
        <div class="entry">
          <p>Quisque dictum. Integer nisl risus, sagittis convallis, rutrum id, elementum congue, nibh. Suspendisse dictum porta lectus. Donec placerat odio vel elit [&hellip;]</p>
          <p><a href="#" class="more">Read more</a></p>
        </div>
      </div>
    </div>
    <!-- end recent-posts -->
  </div>
  <!-- end content -->
  <!-- start sidebar -->
  <div id="sidebar">
    <ul>
      <li>
        <h2>Lorem Ipsum</h2>
        <ul>
          <li><a href="#">Fusce dui neque fringilla</a></li>
          <li><a href="#">Eget tempor eget nonummy</a></li>
          <li><a href="#">Magna lacus bibendum mauris</a></li>
          <li><a href="#">Nec metus sed donec</a></li>
          <li><a href="#">Magna lacus bibendum mauris</a></li>
          <li><a href="#">Velit semper nisi molestie</a></li>
          <li><a href="#">Eget tempor eget nonummy</a></li>
        </ul>
      </li>
      <li>
        <h2>Lorem Ipsum</h2>
        <ul>
          <li><a href="#">Fusce dui neque fringilla</a></li>
          <li><a href="#">Eget tempor eget nonummy</a></li>
          <li><a href="#">Magna lacus bibendum mauris</a></li>
          <li><a href="#">Nec metus sed donec</a></li>
          <li><a href="#">Magna lacus bibendum mauris</a></li>
          <li><a href="#">Velit semper nisi molestie</a></li>
          <li><a href="#">Eget tempor eget nonummy</a></li>
        </ul>
      </li>
      <li>
        <h2>Volutpat Dolore</h2>
        <ul>
          <li><a href="#">Eget tempor eget nonummy</a></li>
          <li><a href="#">Magna lacus bibendum mauris</a></li>
          <li><a href="#">Magna lacus bibendum mauris</a></li>
          <li><a href="#">Velit semper nisi molestie</a></li>
          <li><a href="#">Nec metus sed donec</a></li>
          <li><a href="#">Magna lacus bibendum mauris</a></li>
          <li><a href="#">Fusce dui neque fringilla</a></li>
        </ul>
      </li>
      <li>
        <h2>Magna Bibendum</h2>
        <ul>
          <li><a href="#">Nec metus sed donec</a></li>
          <li><a href="#">Magna lacus bibendum mauris</a></li>
          <li><a href="#">Velit semper nisi molestie</a></li>
          <li><a href="#">Eget tempor eget nonummy</a></li>
          <li><a href="#">Nec metus sed donec</a></li>
          <li><a href="#">Magna lacus bibendum mauris</a></li>
          <li><a href="#">Velit semper nisi molestie</a></li>
        </ul>
      </li>
    </ul>
    <div style="clear: both;">&nbsp;</div>
  </div>
  <!-- end sidebar -->
</div>
<!-- end page -->
<div id="footer">
  <p id="legal">&copy;2007 Puzzled. All Rights Reserved.  Designed by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a> 
  | <a href="http://www.cssportal.com/">CSS Portal</a></p>
  <p id="links"><a href="#">Privacy</a>&nbsp;&nbsp;&nbsp; |&nbsp;&nbsp;&nbsp; <a href="#">Terms</a> &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; <a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional"><abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a> &nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a href="http://jigsaw.w3.org/css-validator/check/referer" title="This page validates as CSS"><abbr title="Cascading Style Sheets">CSS</abbr></a></p>
</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.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.Top menu bar
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