Blogspot Vision: How to add an opaque professional any width four level vertical menu to Blogger

CSS Code Snippet

This CSS code should be inserted right before the closing head tag.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/anywidth-flyout.html
Copyright (c) 2005-2009 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements. Bloggerized by Blogspot Vision.
=================================================================== */

#menu {width:960px; height:500px; background:url(http://blogspotvision.com/tutorials/menus/anywidth/images/webdesign.jpg) bottom right no-repeat; margin:0 auto; position:relative;}

#menu ul {margin:0; padding:0; list-style:none; white-space:nowrap; text-align:left; background:url(http://blogspotvision.com/tutorials/menus/anywidth/images/opaque.png); padding:1px 1px 0 1px;}

#menu li {margin:0; padding:0; list-style:none;}
#menu li {display:inline-block; display:inline;}
#menu ul {position:absolute; left:-9999px;}
#menu ul.level1 {position:absolute; left:0; top:60px;}

#menu a {display:block; font:normal 11px verdana,arial,sans-serif; color:#000; line-height:22px; text-decoration:none;padding:0 20px 0 10px; border-bottom:1px solid #ddd;}

#menu ul li:hover > ul {visibility:visible; left:100%; margin-top:-24px; margin-left:-1px;}

#menu a:hover ul,
#menu a:hover a:hover ul, 
#menu a:hover a:hover a:hover ul {left:100%; visibility:visible;}
#menu a:hover ul ul, 
#menu a:hover a:hover ul ul {left:-9999px;}

#menu li a:hover {background:#868ea1;} 
#menu li:hover > a {background:#868ea1;}
#menu li a.fly {background: url(http://blogspotvision.com/tutorials/menus/anywidth/images/arrow.gif) no-repeat right top;}
#menu li a.fly:hover {background:#868ea1 url(http://blogspotvision.com/tutorials/menus/anywidth/images/arrow.gif) no-repeat right top;} 
#menu li:hover > a.fly {background:#868ea1 url(http://blogspotvision.com/tutorials/menus/anywidth/images/arrow.gif) no-repeat right top;}

#menu table {position:absolute; left:99%; height:0; width:0; border-collapse:collapse; margin-top:-7px; margin-left:-1px;}

</style>

HTML Code Snippet
This HTML code should be inserted where you want the output to appear.

<div id="menu">
 <ul class="level1">
  <li><a href="#url">Home</a></li>
  <li><a class="fly" href="#url">Contact Us</a>
  
   <ul>
    <li><a href="#url">Email</a></li>
    <li><a href="#url">Telephone</a></li>
    <li><a href="#url">Online Form</a></li>
    <li><a href="#url">Snail Mail Address</a></li>
   </ul>
  
  </li>
  <li><a class="fly" href="#url">Resort</a>
  
   <ul>
    <li><a href="#url">Ski Hire Facilities</a></li>
    <li><a class="fly" href="#url">Main Ski Slopes</a>
    
     <ul>
      <li><a href="#url">Beginners Slopes</a></li>
      <li><a href="#url">Intermediate Slopes</a></li>
      <li><a class="fly" href="#url">Advanced Skill Levels</a>
      
       <ul>
        <li><a href="#url">Local</a></li>
        <li><a href="#url">Nearby</a></li>
        <li><a href="#url">With instructor</a></li>
        <li><a href="#url">Snow boarding</a></li>
       </ul>
      
      </li>
      <li><a href="#url">Expert</a></li>
     </ul>
    
    </li>
    <li><a href="#url">Night Life</a></li>
    <li><a class="fly" href="#url">Restaurants</a>
    
     <ul>
      <li><a href="#url">Snow Hotel</a></li>
      <li><a href="#url">The Snowman</a></li>
      <li><a href="#url">Ice Cavern</a></li>
      <li><a href="#url">Ski Inn</a></li>
     </ul>
    
    </li>
    <li><a class="fly" href="#url">Car Hire</a>
    
     <ul>
      <li><a href="#url">From Airport</a></li>
      <li><a href="#url">In Resort</a></li>
      <li><a href="#url">Multiple Resorts</a></li>
     </ul>
    
    </li>
   </ul>
  
  </li>
  <li><a class="fly" href="#url">Information</a>
  
   <ul>
    <li><a href="#url">Money Exchange</a></li>
    <li><a class="fly" href="#url">Resort Essential Information</a>
    
     <ul>
      <li><a href="#url">Lift Passes</a></li>
      <li><a href="#url">Insurance</a></li>
      <li><a class="fly" href="#url">Gear Rental</a>
      
       <ul>
        <li><a href="#url">Boots</a></li>
        <li><a href="#url">Skis</a></li>
        <li><a href="#url">Ski Wear</a></li>
        <li><a href="#url">Goggles</a></li>
       </ul>
      
      </li>
      <li><a href="#url">Ski Schools</a></li>
      <li><a href="#url">Snow Report</a></li>
     </ul>
    
    </li>
    <li><a class="fly" href="#url">Language</a>
    
     <ul>
      <li><a href="#url">Austrian</a></li>
      <li><a href="#url">German</a></li>
      <li><a href="#url">French</a></li>
      <li><a href="#url">English</a></li>
     </ul>
    
    </li>
    <li><a href="#url">Short Breaks</a></li>
   </ul>
  
  </li>
  <li><a class="fly" href="#url">Surrounding Area</a>
  
   <ul>
    <li><a href="#url">Where to go</a></li>
    <li><a href="#url">What to do</a></li>
    <li><a href="#url">Places of interest</a></li>
    <li><a href="#url">National parks & Museums</a></li>
   </ul>
  
  </li>
  <li><a href="#url">Privacy</a></li>
 </ul>
</div>

Blogspot Vision

Sunday, January 30, 2011

How to add an opaque professional any width four level vertical menu to Blogger

No comments:

Post a Comment

Search This Blog