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

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

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

Код 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>    

Таблица стилей:

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 от здесь