title: Submenu Horizontal To Vertical in CSS
body: <p>My Current Menu navigation bar in html: -</p>
  
  <p>You can see my blog Live by click this Link :- <a href="http://www.4time2fun.com" rel="nofollow">www.4time2fun.com</a></p>
  
  <pre><code>&lt;div id="topmenu"&gt; 
  &lt;div id="navigation"&gt;
  &lt;ul class="categories"&gt;
  
  &lt;li class="articles"&gt; &lt;a href="#Link"&gt;&lt;img src="http://4.bp.blogspot.com/-9vOA-2QWrsA/UF7oc4Cgn5I/AAAAAAAAE1k/hVusG2XkwKU/s1600/home.png"&gt;&lt;/a&gt;&lt;/li&gt;
  
  &lt;li class="tags mega"&gt;&lt;a href="#"&gt;Category 4 Fun&lt;/a&gt;
  
  &lt;ul class="two"&gt;
  
  &lt;li class="tag-item"&gt;&lt;a title="#Title" href="#Link"&gt;Accessories&lt;/a&gt;&lt;/li&gt; 
  &lt;li class="tag-item"&gt;&lt;a title="#Title" href="#Link"&gt;Automotive&lt;/a&gt;&lt;/li&gt; 
  &lt;li class="tag-item"&gt;&lt;a title="#Title" href="#Link"&gt;Beauty&lt;/a&gt;&lt;/li&gt; 
  &lt;li class="tag-item"&gt;&lt;a title="#Title" href="#Link"&gt;Clothing/Apparel&lt;/a&gt;&lt;/li&gt;
  
  &lt;/ul&gt; &lt;/li&gt;
  
  &lt;li class="about"&gt;&lt;a href="#Link"&gt;Team 2 Hire&lt;/a&gt;
  &lt;/li&gt; &lt;li class="about"&gt;&lt;a href="# Link"&gt;Who We Are&lt;/a&gt;&lt;/li&gt; 
  &lt;li class="articles"&gt;&lt;a href="#Link"&gt;2 Contact Us&lt;/a&gt;&lt;/li&gt;
  
  &lt;/ul&gt; &lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>My Current Menu navigation bar in Css: -</p>
  
  <pre><code>#topmenu {
      background: none repeat scroll 0 0 #FBFBFB;
      display: block;
      height: 70px;
      padding-top: 15px;
      text-transform: uppercase;
      width: 990px;
  }
  #navigation {
      padding: 0 0 5px;
  }
  #navigation ul li {
      display: inline;
      margin-left: 0;
  }
  #navigation ul li a {
      padding: 8px 15px;
  }
  #header #navigation li.mega ul li a {
      font-family: 'Cuprum',arial,serif;
      font-weight: normal;
      text-transform: lowercase;
  }
  li.mega ul {
      background-color: rgba(255, 255, 255, 0.97);
      border-top: 2px solid #22C3EB;
      padding: 10px 0;
      position: absolute;
      top: 50px;
      z-index: 2;
  }
  li.mega ul li {
      display: block;
      float: left;
      width: 145px;
  }
  li.mega ul li a {
      line-height: 30px;
  }
  #navigation ul li.tags a {
      background: url("http://3.bp.blogspot.com/-ftBEvkZbSMo/TwKvUPTt-II/AAAAAAAAECE/Wrh6HobGwak/s000/arrow_rewards.gif") no-repeat scroll 160px 14px transparent;
      padding-right: 25px;
  }
  #navigation ul li.tags a:hover {
      background: url("http://3.bp.blogspot.com/-ftBEvkZbSMo/TwKvUPTt-II/AAAAAAAAECE/Wrh6HobGwak/s000/arrow_rewards.gif") no-repeat scroll 160px -10px transparent;
  }
  #navigation ul li.tags li a, #navigation ul li.tags li a:hover {
      background: none repeat scroll 0 0 transparent;
  }
  #navigation ul li.tags li a {
      display: block;
      padding: 0 15px;
  }
  #navigation ul li.tags li a:active {
      border: medium none;
  }
  #navigation ul li.tags li {
      float: left;
      width: 160px;
  }
  li.mega ul.two.second {
      display: none !important;
  }
  li.mega ul {
      left: -9999px;
      position: absolute;
  }
  li.mega:hover ul, li.mega li ul:hover {
      left: auto;
  }
  body.category-articles #navigation ul li.articles a, body.category-bestoftheweek #navigation ul li.bestoftheweek a, body.category-about #navigation ul li.about a, body.page-template-page-about-php #navigation ul li.about a, body.page-template-page-contact-php #navigation ul li.contact a {
      background-color: #22C3EB;
      color: #FFFFFF;
  }
  #topmenu #navigation a {
      color: #616060;
      font-family: 'Cuprum',arial,serif;
      font-size: 18px;
      font-weight: normal;
      text-transform: uppercase;
  }
  #topmenu #navigation a:hover {
      border-radius: 50px 50px 50px 50px;
      color: #BBBBBB;
  }
  </code></pre>
  
  <p>Right now my Sub-menu open in horizontal line and  Now I want to create my Sub-menu (Category 4 Fun) in vertical By using ul class "two" and li class "tag-item".</p>