birghtyoursite » sub-menu http://www.brightyoursite.com/blog Bright your site Mon, 19 Dec 2011 09:39:57 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 ul li css none-js SEO friendly sub-menu http://www.brightyoursite.com/blog/2010/01/10/ul-li-css-seo-friendly-sub-menu/ http://www.brightyoursite.com/blog/2010/01/10/ul-li-css-seo-friendly-sub-menu/#comments Sun, 10 Jan 2010 14:35:38 +0000 admin http://www.brightyoursite.com/blog/?p=84 We will use ul,li,css to create non-js seo friendly dropdown menu and horizontal sub-menu Which can be used in the wordpress .


non-js seo friendly dropdown menu

First of all, let’s use ul,li to build the frame ,look the codes below : 

<div id="menus">
<ul>
     <li> 
     <a href=''>ABOUT</a>
     <ul><li><a href=''>Company Overview</a></li> <li><a href=''>Management</a></li> <li><a href=''>News &amp; Press</a></li> <li><a href=''>Partners</a></li></ul>
     </li>
     <li> 
     <a href=''>SERVICES</a>  
     <ul><li><a href=''>Enterprise Infrastructure</a></li> <li> <a href=''>Business Intelligence </a> </li> <li><a href=''>Application Development</a></li> <li><a href=''>SOA(Solution Oriented Architecture)</a></li></ul>
     </li>
     <li> 
     <a href=''>PRODUCTS</a> 
     <ul><li><a href=''>Data Anayzer</a></li> <li><a href=''>MRSS-Remote DBA Services</a></li></ul>
     </li>
     <li> 
     <a href=''>CONTRACTS</a>
     <ul><li><a href=''>Data Anayzer</a></li> <li><a href=''>MRSS-Remote DBA Services</a></li></ul>
     </li>
     <li> 
     <a href=''>CLIENTS</a>
     <ul><li><a href=''>Data Anayzer</a></li> <li><a href=''>MRSS-Remote DBA Services</a></li></ul>
     </li>
     <li> 
     <a href=''>CAREERS</a>
     <ul><li><a href=''>Data Anayzer</a></li> <li><a href=''>MRSS-Remote DBA Services</a></li></ul>
     </li>
     <li> 
     <a href=''>CONTACT US</a>
     <ul><li><a href=''>Data Anayzer</a></li> <li><a href=''>MRSS-Remote DBA Services</a></li></ul>
     </li> 
     </ul>
</div>

Css codes:

#menus
{
	height:37px;
	background:url(images/menu_bg.png) repeat-x left top;
}
#menus ul
{
	 margin:0px;
	 padding:0px;
 
 
}
#menus ul li
{
	list-style:none;
	display:inline-block;
	float:left;
	position:relative;
	line-height:37px;
	height:37px;
	background:url(images/menu_bg.png) repeat-x left top;
	width:100px;
	text-align:center;
	behavior: url("csshover3.htc");
}
#menus ul li ul
{
	display:none;
}
#menus ul li a
{
	color:#fff;
	 padding:0px 15px;
	 line-height:37px;
	 text-decoration:none;
	 font-size:12px;
 
}
#menus a:hover
{
	text-decoration:underline;
}
#menus ul li:hover ul
{
	position:absolute;
	left:0px;
	top:37px;
	display:block;
 
}
#menus ul li ul li
{
	 width:160px;
	 text-align:left;
	 padding-left:10px;
	 height:34px;
	 overflow:hidden;
	 background:url(images/subbg.png) repeat-x left top;
}

Click here to see the live demo . DownLoad HERE

If you understand this demo well , you also can understand follow the demo horizontal sub-menu easily.they are same principium.But this is demo is more Complex and Flexible .click here to see the live demo .
It’s a elegant menu ,isn’t ? DownLoad HERE when u know those 2 demos well , you can create many type of your elegant menu. ]]> http://www.brightyoursite.com/blog/2010/01/10/ul-li-css-seo-friendly-sub-menu/feed/ 9