To create a Vertical Menu using CSS follow the bellow code and substitute your files and pages instead of the ones mentioned in this example
<html>
<head>
<title>The Vertical Menu</title>
<!--HTML head and title tag.-->
</head>
<body>
<!--HTML body including HTML and CSS code.-->
<!â€â€CSS code beginning -->
<style type="text/css" media="screen">
#verticalmenu
{
background-color: #acacac;
width: 20%;
line-height: 3;
display: block;
border: 1mm solid #000000;
}
/* to hide unordered lis items. */
#verticalmenu li ul {
display: none;
}
/* When the mouse pointer hovers over your menu items, the unordered child list items are visible and display in a block with a different background. The list marker is removed, and the space between the element border and is set to 0 */
#verticalmenu li:hover > ul {
display: block;
background-color: #eeeccc;
list-style: none;
margin: 0;
padding: 0;
}
</style>
<!--The HTML body section; the menu items are added here. >
<div id="verticalmenu">
<ul>
<li><a href="http://yourdomain.com/">Home</a></li>
<li><a href="http://www.yourdomain.com/page1/">page1</a>
<ul>
<li><a href="http://www. yourdomain.com/page1/subpage1/index.htm">subpage1</a></li>
<li><a href="http://www/. yourdomain.com/page1/subpage2/index.htm">subpage2</a></li>
</ul>
</li>
<li><a href="#">More</a>
</li>
</ul>
</div>
</body>
</html>
How to Create a CSS Vertical Menu?
To create a Vertical Menu using CSS follow the bellow code and substitute your files and pages instead...
creat vertical menu in css
1 user(s) are reading this topic
0 members, 1 guests, 0 anonymous users
