Pro Drop Down-4 subs with Bulkhead Black&Blue style Posted by vuluganck | at Friday, June 26, 2009

This is the second version about CSS menu with multiple subs in different style-Black and Blue style.If you would like to take a look at the first version you can view the Blue style with 5 subs here.This is a vertical menu,too but its new feature is the bulkhead, at each column , you can make your labels to be separated by the main category name if you don't want to put more sub.

• View live demo


• Download

Let's do it!
Log in your blogger account and go to your source template.
Add this whole code before the ]]></b:skin> tag:

/* ================================================================
This copyright notice must be kept untouched in the stylesheet at
all times.
The original version of this stylesheet and the associated html
is available at http://www.stunicholls.com.
Follow the instruction to make this menu on Zenplate.blogspot.com
=================================================================== */

.preload1 {background: url(three_0a.gif);}
.preload2 {background: url(three_1a.gif);}

#nav {padding:0; margin:0; list-style:none; height:38px; background:#fff url(three_0.gif) repeat-x; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}
#nav li.top {display:block; float:left;}
#nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#ccc; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(three_0.gif);}
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(three_0.gif) right top no-repeat;}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(three_0a.gif) no-repeat right top;}

#nav li:hover a.top_link {color:#fff; background: url(three_1.gif) no-repeat;}
#nav li:hover a.top_link span {background:url(three_1.gif) no-repeat right top;}
#nav li:hover a.top_link span.down {background:url(three_1a.gif) no-repeat right top; padding-bottom:3px;}

/* Default list styling */

#nav li:hover {position:relative; z-index:200;}

#nav li:hover ul.sub
{left:1px; top:38px; background: #50b5d0; padding:3px; border:1px solid #0b4d97; white-space:nowrap; width:90px; height:auto; z-index:300;}
#nav li:hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:90px; font-weight:normal;}
#nav li:hover ul.sub li a
{display:block; font-size:11px; height:18px; width:88px; line-height:18px; text-indent:5px; color:#000; text-decoration:none;border:1px solid #50b5d0;}
#nav li ul.sub li a.fly
{background:#50b5d0 url(arrow.gif) 80px 6px no-repeat;}
#nav li:hover ul.sub li a:hover
{background:#3f96a9; color:#fff; border-color:#fff;}
#nav li:hover ul.sub li a.fly:hover
{background:#3f96a9 url(arrow_over.gif) 80px 6px no-repeat; color:#fff;}

#nav li b {display:block; font-size:11px; height:18px; width:88px; line-height:18px; margin-bottom:3px; text-indent:6px; color:#ff6; border-bottom:1px solid #ff6; cursor:default;}

#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:90px; top:-4px; background: #50b5d0; padding:3px; border:1px solid #0b4d97; white-space:nowrap; width:90px; z-index:400; height:auto;}

#nav ul,
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

#nav li:hover li:hover a.fly,
#nav li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover li:hover a.fly
{background:#3f96a9 url(arrow_over.gif) 80px 6px no-repeat; color:#fff; border-color:#fff;}

#nav li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li:hover li a.fly
{background:#50b5d0 url(arrow.gif) 80px 6px no-repeat; color:#000; border-color:#50b5d0;}
<script type="text/javascript">
stuHover = function() {
var cssRule;
var newSelector;
for (var i = 0; i < document.styleSheets.length; i++)
for (var x = 0; x < document.styleSheets[i].rules.length ; x++)
{
cssRule = document.styleSheets[i].rules[x];
if (cssRule.selectorText.indexOf("LI:hover") != -1)
{
newSelector = cssRule.selectorText.replace(/LI:hover/gi, "LI.iehover");
document.styleSheets[i].addRule(newSelector , cssRule.style.cssText);
}
}
var getElm = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<getElm.length; i++) {
getElm[i].onmouseover=function() {
this.className+=" iehover";
}
getElm[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" iehover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", stuHover);
</script>

Now notice the red code, click the button above to download the file, you will receive the images, upload them and paste the direct links instead of the red code.

After you have finished the step above, Save all and create a HTML/Javascript, paste this code ( or you can add this code in your source template if you know exactly the place it will appear):

<ul id='nav'>
<li class='top'><a class='top_link' href='#zenplate'><span>Home</span></a></li>
<li class='top'><a class='top_link' href='#zenplate' id='products'><span class='down'>Products</span></a>
<ul class='sub'>

<li><b>Cameras</b></li>
<li><a class='fly' href='#zenplate3'>Cameras</a>
<ul>
<li><a href='#zenplate'>Nikon</a></li>
<li><a href='#zenplate'>Minolta</a></li>
<li><a href='#zenplate'>Pentax</a></li>

</ul>
</li>
<li><a class='fly' href='#zenplate'>Lenses</a>
<ul>
<li><a href='#zenplate'>Wide Angle</a></li>
<li><a href='#zenplate'>Standard</a></li>
<li><a href='#zenplate'>Mirror</a></li>

<li><a href='#zenplate'>Telephoto</a></li>
<li><b>Zoom</b></li>
<li><a href='#zenplate'>35mm to 125mm</a></li>
<li><a href='#zenplate'>50mm to 250mm</a></li>
<li><a href='#zenplate'>125mm to 500mm</a></li>

<li><b>Non standard</b></li>

<li><a href='#zenplate'>Bayonet mount</a></li>
<li><a href='#zenplate'>Screw mount</a></li>
</ul>
</li>
<li><b>Accessories</b></li>
<li><a href='#zenplate'>Flash Guns</a></li>
<li><a href='#zenplate'>Tripods</a></li>

<li><a href='#zenplate'>Filters</a></li>
</ul>
</li>
<li class='top'><a class='top_link' href='#zenplate' id='services'><span class='down'>Services</span></a>
<ul class='sub'>
<li><a href='#zenplate'>Printing</a></li>
<li><a href='#zenplate'>Photo Framing</a></li>

<li><a href='#zenplate'>Retouching</a></li>
<li><a href='#zenplate'>Archiving</a></li>
</ul>
</li>
<li class='top'><a class='top_link' href='#zenplate' id='contacts'><span class='down'>Contacts</span></a>
<ul class='sub'>
<li><a href='#zenplate'>Support</a></li>

<li><a class='fly' href='#zenplate'>Sales</a>
<ul>
<li><b>European</b></li>
<li><a class='fly' href='#zenplate'>British</a>
<ul>
<li><b>City</b></li>
<li><a href='#zenplate'>London</a></li>

<li><a href='#zenplate'>Liverpool</a></li>
<li><a href='#zenplate'>Glasgow</a></li>
<li><a class='fly' href='#zenplate'>Bristol</a>
<ul>
<li><b>District</b></li>
<li><a href='#zenplate'>Redland</a></li>

<li><a href='#zenplate'>Hanham</a></li>
<li><a href='#zenplate'>Eastville</a></li>
</ul>
</li>
<li><a href='#zenplate'>Cardiff</a></li>
<li><a href='#zenplate'>Belfast</a></li>
</ul>

</li>
<li><a href='#zenplate'>French</a></li>
<li><a href='#zenplate'>German</a></li>
<li><a href='#zenplate'>Spanish</a></li>
<li><b>Worldwide</b></li>
<li><a href='#zenplate'>USA</a></li>

<li><a href='#zenplate'>Canadian</a></li>
<li><a href='#zenplate'>South American</a></li>
<li><a href='#zenplate'>Australian</a></li>
<li><a href='#zenplate'>Asian</a></li>
</ul>
</li>
<li><a href='#zenplate'>Buying</a></li>

<li><a href='#zenplate'>Photographers</a></li>
<li><a href='#zenplate'>Stockist</a></li>
<li><a href='#zenplate'>General</a></li>
</ul>
</li>
<li class='top'><a class='top_link' href='#zenplate' id='shop'><span class='down'>Zenplate</span></a>
<ul class='sub'>

<li><a href='http://zenplate.blogspot.com/'>Zenplate Page</a></li>
<li><a href='http://www.zenplate.blogspot.com/search/label/Premium%20Blogger%20Template'>Premium template</a></li>
<li><a href='http://zenplate.blogspot.com/2008/10/contact-me.html'>Contact</a></li>
<li><a href='http://zenplate.blogspot.com/2008/12/about-me.html'>Need to help</a></li>
</ul>
</li>
<li class='top'><a class='top_link' href='http://zenplate.blogspot.com/2009/06/pro-drop-down-4-subs-with-bulkhead.html' id='privacy'><span>How to make this menu</span></a></li>
</ul>

At this step , change somethings by yours.Save all and join it.Subscribe me to get more cool tips.
Please offer me a back link if you like this post.Thank you!

Requirements: CSS
Website: http://www.stunicholls.com
Demo: http://blackpower-zenplate.blogspot.com
Bring to Blogger : Zenplate