Как отобразить меню боковой панели

Question

Использование таблицы стилей CSS для моей веб-страницы.

Я хочу использовать меню боковой панели на своей веб-странице. Если я нажму на меню, подменю подменю отобразится с левой стороны.

Html-код.

<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.

#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; 
} 

выше код отображается меню, я хочу, чтобы отобразить подменю на левой рукой стороне, когда я нажимаю меню, подменю должно отображаться в соответствии с меню.

Примечание:

Я не хочу отдельного боковые штанги меню, я хочу использовать свое меню заголовка, когда я нажимаю меню заголовка, на боковой панели меню должно отображаться в соответствии с заголовком, связанной

Нужна помощь по коду CSS.

Answer 1

я принес вам код ... но я не уверен, если это именно то, что вы ищете ... так, посмотрите на demo первый

HTML код:

<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 источник из here