Submenu Horizontal To Vertical in CSS - html

Question

My Current Menu navigation bar in html: -
You can see my blog Live by click this Link :- www.4time2fun.com
<div id="topmenu">
<div id="navigation">
<ul class="categories">
<li class="articles"> <img src="http://4.bp.blogspot.com/-9vOA-2QWrsA/UF7oc4Cgn5I/AAAAAAAAE1k/hVusG2XkwKU/s1600/home.png"></li>
<li class="tags mega">Category 4 Fun
<ul class="two">
<li class="tag-item"><a title="#Title" href="#Link">Accessories</a></li>
<li class="tag-item"><a title="#Title" href="#Link">Automotive</a></li>
<li class="tag-item"><a title="#Title" href="#Link">Beauty</a></li>
<li class="tag-item"><a title="#Title" href="#Link">Clothing/Apparel</a></li>
</ul> </li>
<li class="about">Team 2 Hire
</li> <li class="about">Who We Are</li>
<li class="articles">2 Contact Us</li>
</ul> </div></div>
My Current Menu navigation bar in Css: -
#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;
}
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".

Answer 1

add this style to your css code
.two{
width:100px;
margin-left:50px;
}
DEMO