Welcome Guest | Login | Register

• CSS Layouts
  • One Column
    • Fluid
    • Fixed
  • Two Column
    • Fluid
    • Fixed
  • Three Column
    • Fluid
    • Fixed
  • Other
• Navigation
  • Horizontal
    • Text/Buttons
    • Multi-Level
    • Dock-style
    • Tabs
    • Other
  • Vertical
    • Text/Buttons
    • Multi-Level
    • Tree
    • Other
  • Other
• Text Styles
  • Headings
  • Paragraphs/Body
  • Quotes/Blockquotes
  • Bullets/Lists
  • Code Highlighting
  • Links
  • Other
• Site Elements
  • Buttons
  • Pagination
  • Content Boxes
    • Rounded Corners
    • Other
  • Dividers
  • Table Styles
  • Image Effects
    • Lightbox Effects
    • Borders
    • Shadows
    • Other
  • Other
• Forms
  • Input Fields
  • Buttons
  • Fieldsets/Legends
  • Radio & Checkboxes
  • Validation/Error
  • Calendars
  • Other
• Graphics
  • Gradients
  • Icons
  • Backgrounds
  • Other
• Misc
  • Bars/Charts/Graphs
  • Rating Stars
  • Tooltips
  • Other

Vertical Tab Menu 9

Resource Files

---

   menu9.gif  [3.6 KB]

   download all files as a zip

Code Snippets

---

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

img {
    border: none;
} 

#menu9 {
	width: 200px;
	margin: 10px;
	}
	
#menu9 li a {
	height: 32px;
  	voice-family: "\"}\""; 
  	voice-family: inherit;
  	height: 24px;
	text-decoration: none;
	}	
	
#menu9 li a:link, #menu9 li a:visited {
	color: #FFF;
	display: block;
	background:  url(menu9.gif);
	padding: 8px 0 0 35px;
	}
	
#menu9 li a:hover {
	color: #FFF;
	background:  url(menu9.gif) 0 -32px;
	padding: 8px 0 0 35px;
	}

<div id="menu9">
  <ul>
	<li><a href="#1" title="Link 1">Link 1</a></li>
	<li><a href="#2" title="Link 2">Link 2</a></li>
	<li><a href="#3" title="Link 3">Link 3</a></li>
	<li><a href="#4" title="Link 4">Link 4</a></li>
	<li><a href="#5" title="Link 5">Link 5</a></li>	
  </ul>
</div>

Comments (0)

---