Professional CSS Hover Menu with images

This professional hover menu is designed on pure CSS. For pages that already contains a high volume of code and is already almost surpassing the page speed limit, this hover menu can help you add that featured content without tampering with latency. Like most featured contents, this hover menu also allows you to input keywords that will help you rank better in search engines. Let's get started, but first and foremost, always remember to back-up your current existent template in case it doesn't turn out as expected.

Click here to view a demo

Download the entire zip file
(Zip files include entire codings along with images needed to implement this tutorial.)

CSS SECTION CODE
(Section code below should be placed in the CSS part of your template, located right before your closing head tag.)

<style type="text/css">
#holder {width:750px; height:350px; position:relative; font-family:arial, sans-serif; border:1px solid #004479;z-index:100;}
#holder table {border-collapse:collapse; margin:-1px;}
#holder ul {float:left; padding:0; margin:0; list-style:none;}
#holder ul.sub {margin-bottom:-4px;}
#menuOuter li a.lv1-a {background:blue; zoom:1;}
#menuOuter li a.lv1-a:hover {direction:ltr;}

#holder ul.sub {float:left;}
#holder ul.sub ul {position:absolute; left:-9999px; top:180px;}
#holder ul.sub li.sub-li a img {display:block; position:absolute; left:-9999px; border:0; height:200px; width:750px;}

#holder ul.sub li.sub-li {display:block; float:left; width:150px; height:240px;}
#holder ul.sub li.sub-li a {margin-top:200px; width:110px; display:block; padding:0 20px; height:40px; line-height:40px; color:#fff; text-decoration:none; font-family:arial, sans-serif; font-size:14px;}
#holder ul.sub li.sub-li a.a1 {background:#000000;}
#holder ul.sub li.sub-li a.a2 {background:#000000;}
#holder ul.sub li.sub-li a.a3 {background:#000000;}
#holder ul.sub li.sub-li a.a4 {background:#000000;}
#holder ul.sub li.sub-li a.a5 {background:#000000;}

#menuOuter li:hover ul.sub li.current a {margin-top:200px; height:40px;}
#menuOuter li:hover ul.sub li.current ul {left:-9999px;}
#menuOuter li:hover ul.sub li.current a img {left:-9999px;}

#menuOuter a:hover ul.sub li.current a {margin-top:200px; height:40px;}
#menuOuter a:hover ul.sub li.current ul {left:-9999px;}
#menuOuter a:hover ul.sub li.current a img {left:-9999px;}

#holder ul.sub li.sub-li:hover > a {margin-top:0; height:350px;}
#holder ul.sub li.sub-li a:hover {margin-top:0; height:350px;}

#holder ul.sub li.current a {margin-top:0; height:350px;}
#holder ul.sub li.current a.a1 img {left:0; top:0; z-index:-1;}
#holder ul.sub li.current a.a2 img {left:-150px; top:0; z-index:-1;}
#holder ul.sub li.current a.a3 img {left:-300px; top:0; z-index:-1;}
#holder ul.sub li.current a.a4 img {left:-450px; top:0; z-index:-1;}
#holder ul.sub li.current a.a5 img {left:-600px; top:0; z-index:-1;}

#menuOuter li:hover ul.sub li.current:hover a {margin-top:0; height:350px;}
#menuOuter li:hover ul.sub li.current:hover ul {left:0;}
#menuOuter li:hover ul.sub li.current:hover ul li {float:left; height:15px; padding:0; margin:0;}
#menuOuter li:hover ul.sub li.current:hover ul li a {height:15px; line-height:15px; margin:0; padding:0 20px;}
#menuOuter li:hover ul.sub li.current:hover ul li a:hover {height:15px; line-height:15px; margin:0; padding:0 20px; text-decoration:underline;}

#menuOuter a:hover ul.sub li.current a:hover {margin-top:0; height:350px;}
#menuOuter a:hover ul.sub li.current a:hover ul {left:0;}
#menuOuter a:hover ul.sub li.current a:hover ul li {float:left; height:15px; padding:0; margin:0;}
#menuOuter a:hover ul.sub li.current a:hover ul li a {height:15px; line-height:15px; margin:0; padding:0 20px;}
#menuOuter a:hover ul.sub li.current a:hover ul li a:hover {height:15px; line-height:15px; margin:0; padding:0 20px; text-decoration:underline;}

#holder ul.sub li {position:relative;}
#holder ul.sub li.sub-li:hover ul {left:0; width:130px;}
#holder ul.sub li.sub-li:hover ul li {float:left; height:15px; padding:0; margin:0;}
#holder ul.sub li.sub-li:hover ul li a {height:15px; line-height:15px; margin:0; padding:0 20px; font-size:11px;}
#holder ul.sub li.sub-li:hover ul li a:hover {height:15px; line-height:15px; margin:0; padding:0 20px; text-decoration:underline;}
#holder ul.sub li.sub-li:hover a.a1 img {left:0; top:0; z-index:-1;}
#holder ul.sub li.sub-li:hover a.a2 img {left:-150px; top:0; z-index:-1;}
#holder ul.sub li.sub-li:hover a.a3 img {left:-300px; top:0; z-index:-1;}
#holder ul.sub li.sub-li:hover a.a4 img {left:-450px; top:0; z-index:-1;}
#holder ul.sub li.sub-li:hover a.a5 img {left:-600px; top:0; z-index:-1;}

#holder ul.sub li.sub-li a:hover ul {left:0; width:130px;}
#holder ul.sub li.sub-li a:hover ul li {float:left; height:15px; padding:0; margin:0;}
#holder ul.sub li.sub-li a:hover ul li a {height:15px; line-height:15px; margin:0; padding:0 20px; font-size:11px;}
#holder ul.sub li.sub-li a:hover ul li a:hover {height:15px; line-height:15px; margin:0; padding:0 20px; text-decoration:underline;}
#holder ul.sub li.sub-li a.a1:hover img {left:0; top:0; z-index:-1;}
#holder ul.sub li.sub-li a.a2:hover img {left:-150px; top:0; z-index:-1;}
#holder ul.sub li.sub-li a.a3:hover img {left:-300px; top:0; z-index:-1;}
#holder ul.sub li.sub-li a.a4:hover img {left:-450px; top:0; z-index:-1;}
#holder ul.sub li.sub-li a.a5:hover img {left:-600px; top:0; z-index:-1;}

#holder ul.sub li.current ul {left:0; width:130px;}
#holder ul.sub li.current ul li {float:left; height:15px; padding:0; margin:0;}
#holder ul.sub li.current ul li a {height:15px; line-height:15px; margin:0; padding:0 20px; font-size:11px;}

#holder ul.sub li span {display:block;position:absolute; top:240px; left:0; line-height:15px; width:130px; padding:10px; height:90px; z-index:-1; color:#fff; text-decoration:none; font-size:11px;}
#holder ul.sub li.p1 span {background:#d7d7d7;}
#holder ul.sub li.p2 span {background:#d7d7d7;}
#holder ul.sub li.p3 span {background:#d7d7d7;}
#holder ul.sub li.p4 span {background:#d7d7d7;}
#holder ul.sub li.p5 span {background:#d7d7d7;}
</style> 

HTML SECTION CODE
(section code below should be placed in your desired location but in your HTML section code, you can also use "Add a Gadget" under Page Elements and move it to your desired location.)

<div id="holder">
<ul id="menuOuter">
<li class="lv1-li">
<!--[if lte IE 6]><a class="lv1-a" href="#url1"><table><tr><td><![endif]-->
<ul class="sub">
<li class="sub-li p1"><a class="a1" href="#url"><img src="
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKw8-JUV6InexPODIwDR0V_zlO3TL7-cLUOGXAwx7Tdr_2PRNpyuOyERiZ96mxajgq8Jib7nG880ZDAKDBrsFbaDCdCdIZ6wjEBg4w3sHibX0sshiIucHT72XaI_DetlHYGCUqluJj8DJe/" /><b>Womens Wear</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]--> <ul>
<li><a href="#url">Dresses</a></li>
<li><a href="#url">Coats &amp; Jackets</a></li>
<li><a href="#url">Jeans</a></li>
<li><a href="#url">Knitwear</a></li>
<li><a href="#url">Shirts &amp; Blouses</a></li>
<li><a href="#url">Skirts</a></li>
<li><a href="#url">Shoes</a></li>
</ul>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non nunc dolor. Morbi vestibulum volutpat porttitor.</span>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="sub-li p2"><a class="a2" href="#url"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUUNV2j1F3PS5hjzBWPLesjPA1YvnHOB13EdrA4LgeaMG8KtWHTGq6S83tNAQjrTtCwvOHoV1SlR5HjOp-DIlGi3XWHAbX89aL4CCs-JLFVFXJNWELLO5H7umJAlji4zgeoZ6hnjf11s8g/" /><b>Mens Wear</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url">Jackets</a></li>
<li><a href="#url">Trousers</a></li>
<li><a href="#url">Shirts</a></li>
<li><a href="#url">Suits</a></li>
<li><a href="#url">Jeans</a></li>
<li><a href="#url">Shoes</a></li>
</ul>
<span>Morbi eget purus elit, sed interdum diam. Maecenas ultricies, nisi ac scelerisque sagittis, est eros euismod nulla.</span>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="sub-li p3"><a class="a3" href="#url"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKy04DOmgvEb2PTVw2b6QSJS5jWyPW0e0pEoWDZL4E3zvGqB_47ac9TWptS78cWM9HGLHzrfTjC1duyEQ-5EgxtRxBMCKeyL7fK_QiB6IiEkJ_oaL1eFkv2DSa33A0RT9KQlmSjErQDne4/" /><b>Boys Wear</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url">Shirts</a></li>
<li><a href="#url">Jumpers</a></li>
<li><a href="#url">Trousers &amp; Jeans</a></li>
<li><a href="#url">Trainers</a></li>
<li><a href="#url">School Wear</a></li>
</ul>
<span>Vestibulum at ultricies mauris. Suspendisse potenti. Suspendisse potenti. Fusce lacinia sem et ipsum mattis mollis.</span>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="sub-li p4"><a class="a4" href="#url"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv-xQBnbCtt2ZYiVJJBUUtfUapjH-aBJo9PPMVn6BAi2Dq3vnwAbepBQJxwmEPWMKAIbWHk-jtYpWlusddAo8LSl86ANIUFnywWh8NqZDiEx6TdVtL2Yy0jdfXnledesSiMEFeWbDnJGrR/" /><b>Girls Wear</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url">Dresses &amp; Skirts</a></li>
<li><a href="#url">'T' Shirts</a></li>
<li><a href="#url">Coats</a></li>
<li><a href="#url">Jeans</a></li>
<li><a href="#url">Accessories</a></li>
<li><a href="#url">Belts</a></li>
<li><a href="#url">Trainers &amp; Shoes</a></li>
</ul>
<span>Nulla vitae enim nisl, sed vestibulum neque. Praesent eu malesuada nunc. Aenean fermentum, nulla ut convallis lacinia.</span>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="sub-li p5 current"><a class="a5" href="#url"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw3xtmIESO-UCIXt1yXgm10RZrnzfQUYKtn1yCJDaxitvQp4gciaw2Di6L4xEky8k67Bt-MQAGZCkrwYQbUGx3bqav59kQ0v0KnM4hhup1vN9DmYk8YB-RVzFNW3IcA3UgPTvyjHxB3ugj/" /><b>Baby Wear</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url">Sleep Suits</a></li>
<li><a href="#url">Baby Grows</a></li>
<li><a href="#url">Vests</a></li>
<li><a href="#url">Socks &amp; shoes</a></li>
<li><a href="#url">Coats &amp; Jackets</a></li>
<li><a href="#url">Hats</a></li>
<li><a href="#url">Jumpers</a></li>
</ul>
<span>Sed convallis lobortis porttitor. Morbi congue, est ac fermentum elementum, augue tortor tristique libero, quis lobortis erat elit eu eros.</span>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>

Questions or Comments? Just ask or leave a note, I'd be glad to help you out or take any advice.

Page crease for DIV boxes using CSS

This tutorial is will produce those page crease containers you usually see on most blogs/site. This tutorial allows you to do just that to any DIV elements located anywhere on your blog/site. It does so by using relative positioning to slightly offset a DIV to the bottom right while using it's background image (in this case, the creased image) as its border of the outer DIV. Let's get started, but first and foremost, always remember to back-up your current existent template in case it doesn't turn out as expected.



Click here to view a demo
(Although the demo is not showing the border, when implemented in Blogger, border will be visible.)

Download the entire zip file
(Zip files include entire codings along with images needed to implement this tutorial.)

CSS SECTION CODE
(Section code below should be placed in the CSS part of your template, located right before your closing head tag.)

<style type="text/css">
.curlycontainer{
border: 1px solid #b8b8b8;
margin-bottom: 1em;
width: 300px;
}

.curlycontainer .innerdiv{
background: transparent url(media/brcorner.gif) bottom right no-repeat;
position: relative;
left: 2px;
top: 2px;
padding: 1px 4px 15px 5px;
}
</style>

HTML SECTION CODE
(section code below should be placed in your desired location but in your HTML section code, you can also use "Add a Gadget" under Page Elements and move it to your desired location.)

<div class="curlycontainer">
<div class="innerdiv">
<b>Some title</b> <br />
Some text here.Some text here. Some text here.<br />
Some text here.Some text here. Some text here.<br />
Some text here.Some text here. Some text here.<br />
Some text here.Some text here.
</div>
</div>

NOTE: Remember that you can always modify the CSS part of the section code to your desired styles.

Questions or Comments? Just ask or leave a note, I'd be glad to help you out or take any advice.

CSS DIV Arrow Comment Box

Add a simple arrow comment box using css and an "arrow" image and sub texts right beneath it. It's a nice interface to use for your blog's comment boxes, for example. The arrow image is being used as a background image, meaning you can control how much of it is shown by adjusting it's horizontal and vertical positions.

/ demo / - / download /



CSS Code

.commentbox{
background-color: #ececec;
width: 450px;
padding: 10px;
}

.commentfooter{
background: url(media/arrow.gif) 20px 0 no-repeat; /*20px 0 equals horizontal and vertical position of arrow. Adjust as desired (ie: 20px -5px).*/
padding-left: 58px;
padding-top: 1px;
margin-bottom: 2em;
font-size: 90%;
color: #4A4A4A;
}

HTML Code

<div class="commentbox">
This is some comment.<br />This is some comment.<br />This is some comment.
</div>
<div class="commentfooter">Posted by Author on 05/10, 03:39 AM</div>

CSS DIV boxes with gradient shadow

This example integrates javascript with CSS to create a gradient shadow effect for containers or elements on your page with a customizable shadow depth and coloring. To enable the effect; simply add the "shadow" class name tags to your desired element.

[ download files ] - [ demo ]



CSS Code

<style type="text/css">

.shadow{ border:1px solid silver; font:10pt arial; position:relative; display:inline; background:white; z-index:100 }

.shadow_inner{ overflow:hidden; position:absolute; top: -1000px; filter:alpha(Opacity=10); /*modify to change the shade solidity/opacity, same as below*/ opacity:0.1; /*firefox 1.5 opacity*/ -moz-opacity:0.1; /*mozilla opacity*/ -khtml-opacity:0.1; /*opacity*/ z-index:10 }

</style>

<script type="text/javascript">

var gradientshadow={} gradientshadow.depth=6 //Depth of shadow in pixels gradientshadow.containers=[]
gradientshadow.create=function(){ var a = document.all ? document.all : document.getElementsByTagName('*') for (var i = 0;i < a.length;i++) { if (a[i].className == "shadow") { for (var x=0; x<gradientshadow.depth; x++){ var newSd = document.createElement("DIV") newSd.className = "shadow_inner" newSd.id="shadow"+gradientshadow.containers.length+"_"+x //Each shadow DIV has an id of "shadowL_X" (L=index of target element, X=index of shadow (depth) if (a[i].getAttribute("rel")) newSd.style.background = a[i].getAttribute("rel") else newSd.style.background = "black" //default shadow color if none specified document.body.appendChild(newSd) } gradientshadow.containers[gradientshadow.containers.length]=a[i] } } gradientshadow.position() window.onresize=function(){ gradientshadow.position() } }

gradientshadow.position=function(){ if (gradientshadow.containers.length>0){ for (var i=0; i<gradientshadow.containers.length; i++){ for (var x=0; x<gradientshadow.depth; x++){ var shadowdiv=document.getElementById("shadow"+i+"_"+x) shadowdiv.style.width = gradientshadow.containers[i].offsetWidth + "px" shadowdiv.style.height = gradientshadow.containers[i].offsetHeight + "px" shadowdiv.style.left = gradientshadow.containers[i].offsetLeft + x + "px" shadowdiv.style.top = gradientshadow.containers[i].offsetTop + x + "px" } } } }

if (window.addEventListener) window.addEventListener("load", gradientshadow.create, false) else if (window.attachEvent) window.attachEvent("onload", gradientshadow.create) else if (document.getElementById) window.onload=gradientshadow.create

</script>

HTML Code

<p class="shadow" style="display: block" rel="red">This is some paragraph.<br />Set display="block" inside it.<br />This is some paragraph.</p>

<img src="http://img201.imageshack.us/img201/7907/streetkz4.gif" class="shadow" rel="blue" /><br />

<p><a href="http://www.blogspotvision.com" class="shadow" rel="green">Some link</a></p>

CSS DIV boxes with drop shadows

This example shows how to add a drop shadow style to any container element using CSS. It does this by wrapping the desired content in a DIV with its background color set to a color of the desired color for the shadow. Another DIV is set for your content and is shifted slightly upwards and to the left to expose the shadow. The "master" DIV wraps it all up but is shifted to the right and downwards, returning the entire markup to it's original page position.

IE6 is not compatible with this example, but you can apply conditional HTML to hide the effect in that browser. In contrast, IE7 is compatible with this example for finally updating to proper CSS.

Note: If you will be using an image for your content, you should give ".shadowcontainer" an explicit height, reflecting that of the image's for fixed and set location when viewed.



CSS Code

<![if !IE 6]>
.shiftcontainer{
position: relative;
left: 5px; /*Number should match -left shadow depth below*/
top: 5px; /*Number should match -top shadow depth below*/
}

.shadowcontainer{
width: 300px; /* container width*/
background-color: #d1cfd0;
}

.shadowcontainer .innerdiv{
/* Add container height here if desired */
background-color: white;
border: 1px solid gray;
padding: 6px;
position: relative;
left: -5px; /*shadow depth*/
top: -5px; /*shadow depth*/
}
<![endif]>

HTML Code

<div class="shiftcontainer">
<div class="shadowcontainer">
<div class="innerdiv">
<b>Your Header</b> <br />
Your content here. Your content here.<br />
Your content here. Your content here.<br />
Your content here. Your content here.<br />
Your content here. Your content here.
</div>
</div>
</div>

Meta tags for Blogger Blogspot

Meta tags are used on websites as a source of information to help search engines decide on the order of listing and ranking of your website(s). Meta tags only provides metadata about the HTML document; typically used by search engines to specify page description, keywords, author, etc, and will not be displayed on your blog. Though not mandatory, meta tags should be implemented in the sense that it does impact your listing and ranking in search engines, thus the higher your page rank, the more traffic you can drive. All meta tags should be placed inside your head element.

Meta tags definition and usage

Page Title
Your page title is the most important attribute for rankings. Your page title should be more than your actual page title and contain words located within the page contents.

*Blogger Blogspot handles the title for you.

Description Meta Tag
Description tags should contain a coherent description of your page, and should also contain words that are located within the page contents.

<meta content='Description Goes Here' name='description'/>

Keywords Meta Tag
A list of keywords that describes your page. For better results, select between 10 to 15 of the most popular and relevant keywords to that particular page. Keywords can be words and/or paraphrases related to your page and should not contain more than 20, otherwise, search engines won't be able to detect the main theme of your page, thus watering your page relevancy down. The ordering of your keywords also impacts it's ranking or listing so use the most important first and least important last. To determine each keywords relevancy, use Google Analytics or Webmasters Tools.

<meta content='Keywords Goes Herename' name='keywords'/>

Copyright Meta Tag
This tag simply indicates that your page and information is copy righted. For example, Copyright YOUR-BUSINESS - 2010.

<meta content='Copyright Company Goes Here - 2010' name='copyright'/>

Author Meta Tag
This tag is used to indicate the name of the webmaster, blogger, or company.

<meta content='Author Goes Here' name='author'/>

Email Meta Tag
This tag is used to display the relevant contact address for your page or blog.

<meta content='Email Goes Here' name='email'/>

Character Set Meta Tag
This tag is used to let the browser know which character set to use for the particular page. Different character sets will render your page differently.

<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>

Rating Meta Tag
Rating meta tags enables search engines to set an audience content rating for your page.

<meta content='General' name='Rating'/>

Robots Meta Tag
Robots are used to either allow or disallow index and/or crawl of a page.

<meta content='index,follow' name='Robots'/>

Revisit Meta Tag
Because your page could be indexed and/or crawled several times a minute; the revisit meta tag will tell search engines when you want them to come back next after the first index/crawl.

<meta content='7 Days' name='Revisit-after'/>

Expires Meta Tag
This tag is used to tell search engines when the page and it's content is no longer valid or available.

<meta content='Enter Date Here' name='expires'/>