Vertical Menu Sample

CSS for vertical menu .menu {width:700px; text-align:left; position:relative; margin:0 auto; border:solid 0px #CCCCCC; float:left;}
.menu ul.topic {padding:0; margin:0; list-style:none; width:700px; height:auto; position:relative; z-index:10; border:solid 0px #999999;}
.menu ul.topic li.fist {display:block; margin:0 0px 0 0px; padding:0; float:left; position:relative; background:url(images/menu-right-line.gif) no-repeat right;}
.menu ul.topic li.last-li { background:none;}
div.getaquote {padding:5px 0px 0px 0px;}
.menu ul.topic li.fist a.set {font-size:12px; font-weight:bold; text-align:center; color:#FFF; text-decoration:none; font-family:vardana,arial, sans-serif; margin:0; display:block; height:33px;line-height:33px;padding:0 10px 1px 10px; width:70px;}
.menu ul.topic li.fist a ul.body, .menu ul.topic li.fist ul.body
{display:none;}
.menu ul.topic li.active a{color:#FFF; background:#bbb;}
.menu ul.topic li.fist a:hover, .menu ul.topic li.fist:hover a
{color:#000; border:none; text-decoration:none; background:#ffa80e url(images/main_links_orange_bg.gif) repeat-x top}
.menu ul.topic li.fist a:hover ul.body, .menu ul.topic li.fist:hover ul.body
{display:block; position:absolute; left:0; top:34px; list-style:none; margin:0; background:#ffa80e; width:auto; padding:0px 2px 5px 2px; border:solid 1px #ea8105; border-width:0 1px 1px 1px; z-index:100; text-align:left}
.menu ul.topic li.fist ul.body li.secund
{display:inline; width:auto; height:; float:left; border:none; margin:0px; line-height:16px;}
.menu ul.topic li.fist ul.body li.secund a
{ background:url(images/menu-arw.gif) no-repeat 2px 8px; border:0; margin:0; padding:0 0 0 10px; clear:both; color:#000000; text-decoration:none; font-weight:normal;}
.menu ul.topic li.fist ul.body li.secund a:hover { border:0; color:#fdec9d; text-decoration:none;}
ul.drop-data { margin:0; padding:0; list-style:none;}
ul.drop-data li { margin:0; padding:0; list-style:none; padding:0px 0 0px 0; border-bottom:solid 1px #ffc545;}
ul.drop-data li a { color:#000; line-height:22px; height:22px; font-size:12px; padding:0; margin:0; font-family:Arial, Helvetica, sans-serif; display:block;}
.span-arw { color:#FFF; font-weight:bold; float:left;}
.img-enquiry { float:right; padding:5px 10px 0 0;}
.Navnnavigation{ width:900px; height:38px; text-align:left; background: url(test1_files/new-link_bg.gif) repeat-x left top; margin:0 auto;}

Copy the code and insert into html page

<div class=”Navnnavigation”>
<div class=”menu”>
<ul class=”topic”>
<li class=”fist”><a class=”set” href=”#” style=”width: 20px;”><img src=”test1_files/home-icon1.png” border=”0″></a> </li>
<li class=”fist”><a class=”set” href=”#”>Company
<!–[if gte IE 7]><!–>
</a>
<!–<![endif]–>
<!–[if lte IE 6]><table><tr><td><![endif]–>
<ul class=”body”>
<li class=”secund”>
<table width=”120″>
<tbody><tr>
<td><ul class=”drop-data”>
<li><a href=”#”>About Us </a></li>
<li><a href=”#” class=”SubmenuLink”>The Infrastructure</a> </li>
<li> <a href=”#” class=”SubmenuLink”>Area of Expertise</a> </li>
<li> <a href=”#” class=”SubmenuLink”>Careers</a> </li>
<li> <a href=”#” class=”SubmenuLink”>Contact Us</a></li>
<li> <a href=”#” class=”SubmenuLink”>Inquiry</a></li>
</ul></td>
</tr>
</tbody></table>
</li>
</ul>
<!–[if lte IE 6]></td></tr></table></a><![endif]–>
</li>
<li class=”fist”><a class=”set” href=”#”>Services
<!–[if gte IE 7]><!–>
</a>
<!–<![endif]–>
<!–[if lte IE 6]><table><tr><td><![endif]–>
<ul class=”body”>
<li class=”secund”>
<table width=”140″>
<tbody><tr>
<td><ul class=”drop-data”>
<li><a href=”#” class=”SubmenuLink”>Web Designing</a></li>
<li> <a href=”#” class=”SubmenuLink”>PHP Development </a> </li>
<li> <a href=”#” class=”SubmenuLink”>ASP.Net Development </a> </li>
<li> <a href=”#” class=”SubmenuLink”>iPhone Development </a> </li>
<li> <a href=”#” class=”SubmenuLink”>Yahoo Store </a></li>
<li> <a href=”#” class=”SubmenuLink”>SEO Services</a></li>
<li> <a href=”#” class=”SubmenuLink”>Inquiry</a></li>
</ul></td>
</tr>
</tbody></table>
</li>
</ul>
<!–[if lte IE 6]></td></tr></table></a><![endif]–>
</li>
<li class=”fist”><a class=”set” href=”#”>Solutions
<!–[if gte IE 7]><!–>
</a>
<!–<![endif]–>
<!–[if lte IE 6]><table><tr><td><![endif]–>
<ul class=”body”>
<li class=”secund”>
<table width=”170″>
<tbody><tr>
<td><ul class=”drop-data”>
<!–<li><a href=”wordpress-blogs-installation-service.html”>Wordpress Integration </a> </li>–>
<li> <a href=”#”>XUL Programming </a> </li>
<li> <a href=”#” class=”SubmenuLink”> Magento Commerce</a></li>
<li><a href=”#” class=”SubmenuLink”>iPhone Applications </a></li>
<li> <a href=”#” class=”SubmenuLink”>Rapid Ecommerce </a> </li>
<li><a href=”#” class=”SubmenuLink”>Amazon Web Store</a> </li>
<li> <a href=”#” class=”SubmenuLink”>Inquiry</a></li>
</ul></td>
</tr>
</tbody></table>
</li>
</ul>
<!–[if lte IE 6]></td></tr></table></a><![endif]–>
</li>
<li class=”fist”><a class=”set” href=”#”>Expertise
<!–[if gte IE 7]><!–>
</a>
<!–<![endif]–>
<!–[if lte IE 6]><table><tr><td><![endif]–>
<ul class=”body”>
<li class=”secund”>
<table width=”170″>
<tbody><tr>
<td><ul class=”drop-data”>
<li><a href=”#”>PHP</a> </li>
<li> <a href=”#”>ASP.Net </a> </li>
<li> <a href=”#” class=”SubmenuLink”> Open Source </a></li>
<li><a href=”#” class=”SubmenuLink”>Yahoo Store </a> </li>
<li> <a href=”#” class=”SubmenuLink”>Inquiry</a></li>
</ul></td>
</tr>
</tbody></table>
</li>
</ul>
<!–[if lte IE 6]></td></tr></table></a><![endif]–>
</li>
<li class=”fist last-li”><a class=”set” href=”#”>Portfolio
<!–[if gte IE 7]><!–>
</a>
<!–<![endif]–>
<!–[if lte IE 6]><table><tr><td><![endif]–>
<ul class=”body”>
<li class=”secund”>
<table width=”170″>
<tbody><tr>
<td><ul class=”drop-data”>
<li><a href=”#” class=”SubmenuLink”>Custom Websites ASP.NET </a> </li>
<li> <a href=”#” class=”SubmenuLink”>Custom Websites PHP </a> </li>
<li> <a href=”#” class=”SubmenuLink”>Flash</a> </li>
<li> <a href=”3″ class=”SubmenuLink”>Yahoo Store </a> </li>
<li> <a href=”#” class=”SubmenuLink”>Open Source CMS </a> </li>
<li> <a href=”#” class=”SubmenuLink”>Graphic &amp; Multimedia</a></li>
</ul></td>
</tr>
</tbody></table>
</li>
</ul>
<!–[if lte IE 6]></td></tr></table></a><![endif]–>
</li>
<li><div class=”getaquote”><!–<a href=”http://www.indianic.com/nic_private/instant_quote.php?keepThis=true&TB_iframe=true&height=380&width=700&#8243; title=”” class=”thickbox”>–>
<a href=”#” class=”SubmenuLink”>
<img src=”test1_files/icon-enquiry.gif” title=”Instant Quote Form” alt=”Instant Quote Form” border=”0″></a></div></li>
</ul>
</div>
<div class=”question_wrapper floatR”><img src=”test1_files/phone.gif” title=”Phone” alt=”Phone” align=”absmiddle” border=”0″>&nbsp;<span>CALL US</span> 1-866-666-3471</div>
<!– –> </div>

Advertisements

Posted on October 23, 2008, in Vertical Menu and tagged , . Bookmark the permalink. Leave a comment.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: