Jump to content

  • Free consultations and support
  • Live chatClick Here for Live Chat
  • Call ico 1888-906-1888
    Phone support: Open

    Ready for your call :)

    Our business hours:

    Mon — Fri, 2am — 8pm (EST)

    US & EU support teams

    Phone support: Closed

    We are back in: 1h 20m

    Our business hours:

    Mon — Fri, 2am — 8pm (EST)

    US & EU support teams


How to Create a CSS Vertical Menu?

creat vertical menu in css

  • Please log in to reply
 

#1 OneDes

OneDes

    Senior Member

  • Designer
  • 282 posts

Posted 22 February 2013 - 10:21 PM

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>




1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users