Menu item separated with border : Menu « CSS Controls « HTML / CSS

Menu item separated with border

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
<html xmlns="" xml:lang="en" lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<style rel="stylesheet" type="text/css">
html, body, h1, h2, h3, h4, ul, li {
  margin: 0;
  padding: 0;
h1 img {
  display: block;
img {
  border: 0;
a {
  color: #464544;
a:hover {
  color: #FFA405;
.left {
  float: left;
.right {
  float: right;
.more {
  text-align: right;
.clear {
  clear: both;

body {
  background: #E0D5B7 url(architecture-bureau-images/page_bg.jpg) repeat-x;
  text-align: center;
  font: 11px verdana, arial, sans-serif;
  color: #74653D;
  padding-bottom: 10px;
  padding-top: 31px;

/** layout **/
#wrapper {
  text-align: left;
  margin: auto;
  width: 778px;
  position: relative;
  background: url(architecture-bureau-images/body_bg.gif) repeat-y;

#header {
  position: absolute;
  top: 0;
  left: 243px;
  width: 535px;
  height: 279px;
  background: url(architecture-bureau-images/header_2.jpg) no-repeat;
#left {
  float: left;
  width: 243px;
#logo {
  width: 244px;
  height: 152px;
  background: url(architecture-bureau-images/header_1.jpg) no-repeat;
  text-align: center;
  color: #595959;
#logo h1 {
  padding-top: 30px;
  font: 24px "arial narrow", arial, sans-serif;
#logo p {
  margin: 8px 25px 4px 25px;
  border-top: 1px solid #B8B8B8;
  border-bottom: 1px solid #B8B8B8;
  padding: 3px;
  letter-spacing: 0.2em;
  font-weight: bold;

#nav {
  background: url(architecture-bureau-images/nav_left.jpg) no-repeat;
#nav ul {
  margin-left: 9px;
  padding-left: 1px;
  padding-bottom: 29px;
  background: #2A2A2A bottom left url(architecture-bureau-images/nav_bot.jpg) no-repeat;
#nav li {
  list-style: none;
  font: 14px "arial narrow", arial, sans-serif;
  border-top: 1px solid #959595;
  background: 188px 10px url(architecture-bureau-images/arr_white.gif) no-repeat;
  padding: 7px 0 0 31px;
#nav a {
  color: #fff;
  text-decoration: none;
  border-left: 1px solid #959595;
  padding-left: 10px;
  display: block;
  width: 90%;
  padding: 2px 0 6px 8px;
#nav a:hover {
  text-decoration: underline;
#nav .important {
  border: none;
  background: 188px 10px url(architecture-bureau-images/arr_orange.gif) no-repeat;
#nav .important a {
  color: #E9C379;

#news {
  background: url(architecture-bureau-images/news_bg.jpg) repeat-y;
  padding-left: 37px;
  padding-right: 22px;
  padding-bottom: 3px;
  text-align: justify;
#news h2 {
  font-size: 12px;
  color: #BE8B06;
#news h3, #news p {
  font-size: 11px;
  margin: 1em 8px 1em 0;
#news a {
  color: #74653D;
  font-weight: bold;
  text-decoration: underline;
#news a:hover {
  color: #38301A;
#news .more {
  font-size: 9px;
#news .hr-dots {
  background: center url(architecture-bureau-images/dots.gif) repeat-x;
  height: 10px;

#support {
  background: url(architecture-bureau-images/support.jpg) no-repeat;
  padding: 1px;
  height: 97px;
  color: #1A1A18;
#support p {
  margin: 0.7em 2.6em;

#right {
  float: right;
  width: 490px;
  padding-right: 9px;
  padding-top: 301px;
#right h2 {
  font: 18px arial, sans-serif;
  color: #BE8B06;
  border-bottom: 1px solid #C4AE7C;
  padding-bottom: 6px;
  margin-bottom: 1em;
#right h3 {
  font: 14px arial, sans-serif;
  color: #BE8B06;
  border-bottom: 1px solid #C4AE7C;
  padding-bottom: 6px;
  margin-bottom: 1em;
  margin-top: 2em;
#welcome {
  margin-right: 20px;
#profile {
  margin-right: 16px;
#right .left {
  margin-right: 18px;
#right .more {
  font-weight: bold;
  font-size: 10px;

#corp, #indu {
  float: left;
  width: 49%;
#corp {
  margin-right: 1%;
#corp-img, #indu-img {
  background: url(architecture-bureau-images/pic_2.jpg) no-repeat;
  width: 112px;
  height: 23px;
  float: left;
  margin-right: 18px;
  text-align: center;
  padding-top: 90px;
  font-size: 9px;
  font-weight: bold;
#indu-img {
  background: url(architecture-bureau-images/pic_3.jpg) no-repeat;
#spacer {
  height: 2em;

#footer {
  background: url(architecture-bureau-images/footer_bg.gif) repeat-y;
#copyright {
  text-align: center;
  padding: 22px 0px 30px 00px;
  font-size: 9px;
  color: #715F36;
  font-weight: bold;
  background: url(architecture-bureau-images/footerline.gif) no-repeat;
<div id="wrapper">
  <div id="header"> </div>
  <div id="left">
    <div id="logo">
      <h1>Architecture Bureau</h1>
      <p>It's all possible</p>
    <div id="nav">
        <li class="important"><a href="">Home</a></li>
        <li><a href="">Recent Projects</a></li>
        <li><a href="">Services</a></li>
        <li><a href="">Clients</a></li>
        <li><a href="">Solutions</a></li>
        <li><a href="">Contact us</a></li>
    <div id="news">
      <h2>Latest News</h2>
      <p>Even more websites all about website templates on <a href="">Just Web Templates</a>.</p>
      <div class="hr-dots"> </div>
      <p>If you're looking for beautiful and professionally made templates you can find them at <a href="">Template Beauty</a>.</p>
      <p class="more"><a href="">more</a></p>
    <div id="support">
      <p>Call: +3265-9856-789</p>
  <div id="right">
    <h2>Welcome to Our Site!</h2>
    <div id="welcome"> <img src="architecture-bureau-images/pic_1.jpg" width="171" height="137" alt="Pic 1" class="left" />
      <p>Don't forget to check <a href="">free website templates</a> every day, because we add a new free website template almost daily.</p>
      <p>You can remove any link to our websites from this template you're free to use the template without linking back to us.</p>
      <p>This is just a place holder so you can see how the site would look like.</p>
      <p class="more"><a href="">more</a></p>
    <h3>Company Profile</h3>
    <div id="profile">
      <div id="corp">
        <div id="corp-img"> Corporate Building </div>
        <p>If you're having problems editing the template please don't hesitate to ask for help on <a href="">the forum</a>.</p>
      <div id="indu">
        <div id="indu-img"> Industrial </div>
        <p>This is a template designed by free website templates for you for free you can replace all the text by your own text.</p>
      <div class="clear"> </div>
      <p class="more"><a href="">View Details</a></p>
  <div class="clear"> </div>
  <div id="spacer"> </div>
  <div id="footer">
    <div id="copyright"> Copyright &copy; 2007 Company Name All right reserved. </div>
    <div id="footerline"></div>


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.Using top arrow to indicate top menu selection
28.Wide and tall top menu bar
29.List menu bar with background image
30.Two level menu bar
31.Top menu with arrow indication
32.Two column, two leve top menu bar
33.List menu with image
34.Menu List item
35.List menu bar
36.Top menu list bar with bold bottom
37.Side menu bar
38.Scrollable section in side menu bar
39.Selected menu item indication
40.Card layout with top menu bar
41.Side menu bar with lot of space in between
42.HTML skeleton code for creating a two-level horizontal drop menu
43.using jQuery to toggle a hidden menu
44.Vertical menu
45.Horizontal menu bar
46.Vertical menu bar
47.sliding door menu
48.horizontal list menu
49.Sub navigation menu
50.Pure css menu
51.Two column layout with menu on the left
52.Navigation menu horizontal
53.Pure CSS drop-down menu
54.Menu item with border
55.Vertical menu on the left
56.LI menu
57.Mouse hover effect for left menu
58.Post item layout with menu
59.Left menu bar with mouse hover effect
60.a:hover background: transparent url(img/menu_arrow.gif) bottom center no-repeat;
61.Menu item with border 2
62.Link menu
63.Left menu bar with thicker border
64.Change border and background with mouse hover for left menu bar
65.Nested left menu bar
66.Vertical menu bar 2
67.Fixed left menu bar
68.Dark background for menu bar
69.Link menu item with side bar
70.Tag like top menu bar
71.Two line top menu bar
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