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


    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

<title>The Vertical Menu</title>
<!--HTML head and title tag.-->
<!--HTML body including HTML and CSS code.-->
<!—CSS code beginning -->
<style type="text/css" media="screen">
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;

<!--The HTML body section; the menu items are added here. >
<div id="verticalmenu">
<li><a href="http://yourdomain.com/">Home</a></li>
<li><a href="http://www.yourdomain.com/page1/">page1</a>
<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>
<li><a href="#">More</a>

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users