How to display a side bar menu

Question

Using CSS Style Sheet for my Web page.

I want to use a side bar menu in my web page. If i click the menu, the lift of sub menus will display on the left side.

Html Code.

<ul id="navlist">
      <li><a id="n1" href="">Home</a></li>
      <li><a id="n2" href="">News</a></li>
      <li><a id="n3" href="">Events</a></li>
      <li><a id="n4" href="">Reviews</a></li>
      <li><a id="n5" href="">Forum</a></li>
      <li><a id="n6" href="">Contact Us</a></li>
      <li><a id="n7" href="">Links</a></li>
</ul>

CSS Style Sheet Code.

#navlist{
    margin-left: 0px;
    padding-left: 0px;
    white-space: nowrap;
    position: absolute;
    height: 27px;
    width: 777px;
    top: 225px;
}
#navlist li{
    display: inline;
    list-style-type: none;
}
#navlist a {
    padding: 3px 10px;
    background-image: url(images/button.gif);
    height: 20px;
    width: 91px;
    display: inline;
    position: absolute;
    text-align: center;
    color: #fff;
    text-decoration: none;
}
#navlist a:hover{background-image: url(images/buttonover.gif);}
#n1{left: 0px;}
#n2{left: 111px;}
#n3{left: 222px;}
#n4{left: 333px;}
#n5{left: 444px;}
#n6{left: 555px;}
#n7{left: 666px;}
#leftside{
    float: left;
}
#leftside h3{
    border-top-width: 3px;
    border-right-width: 3px;
    border-bottom-width: 0px;
    border-left-width: 3px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #00306f;
    border-right-color: #00306f;
    border-bottom-color: #00306f;
    border-left-color: #00306f;
    width:200px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #333333;
    background-color: #FFFFFF;
    text-align: center;
    display: block;
    margin-left: 35px;  
    margin-top: 35px;   
}

The above code is display a menu, I want to display a sub menus on left handed side, when i click the menu, the sub menu should display according the menus.

Note:

I don't want separate side bar menus, I want to use my Header menus, when i click the Header menus, the side bar menus should display according to the related header

Need CSS Style Sheet Code Help.

Answer 1

hey ,

i brought you some code ... but i am not sure if it is exactly what you are looking for... so , look at the demo first

Html Code:

<div id="navigation">
<ul>
    <li>
    <a href="#">Menu Item 1</a>
        <ul>
              <li><a href="#">sub menu item 1</a></li>
              <li><a href="#">sub menu item 2</a></li>
              <li><a href="#">sub menu item 3</a></li>
              <li><a href="#">sub menu item 4</a></li>
        </ul>
    </li>

    <li>
    <a href="#">Menu Item 2</a>
        <ul>
              <li><a href="#">sub menu item 1</a></li>
              <li><a href="#">sub menu item 2</a></li>
              <li><a href="#">sub menu item 3</a></li>
              <li><a href="#">sub menu item 4</a></li>
        </ul>            
    </li>

    <li>
    <a href="#">Menu Item 3</a>
        <ul>
              <li><a href="#">sub menu item 1</a></li>
              <li><a href="#">sub menu item 2</a></li>
              <li><a href="#">sub menu item 3</a></li>
              <li><a href="#">sub menu item 4</a></li>
        </ul>            
    </li>

    <li>
    <a href="#">Menu Item 4</a>
        <ul>
              <li><a href="#">sub menu item 1</a></li>
              <li><a href="#">sub menu item 2</a></li>
              <li><a href="#">sub menu item 3</a></li>
              <li><a href="#">sub menu item 4</a></li>
        </ul>            
    </li>
</ul>    

Style Sheet:

body{font-family:"Times New Roman", Times, serif; font-size:18px;}

#navigation
{width:100%; height:30px; background:#999;}

#navigation ul
{margin:0px; padding:0px;}

#navigation ul li
{display:inline; float:left; list-style:none; margin-left:15px; position:relative; height:30px;}

#navigation li a
{color:#fff; text-decoration:none;}

#navigation li a:hover
{color:#fff; text-decoration:underline;}

#navigation li ul
{margin:0px; padding:0px; display:none; position:absolute; left:0px; top:20px; background-color:#999;}

#navigation li:hover ul
{display:block; width:160px;}

#navigation li li
{list-style:none; display:list-item;}

#navigation li li a
{color:#fff; text-decoration:none;}

#navigation li li a:hover
{color:#fff; text-decoration:underline;}

Oregonal source from here

Answer 2

take a look at this