flyout error in javascript

[nataraj jaideep]

I created a flyout menu using css and called the css class in javascript.The problem is, onmouseover the menu is highlighting and the pop up is coming under the menu when we move the mouse down towards the link the highlighting is not displaying. Please help me in how to get this resolved.

my JS code : 
var num, current = false;
    $('#site_navigation > li.items > a')
        .hoverIntent(function(e){
                    //Clear out the open subnavs
                    $('.subnav').css('display','none');
                    var $$ = $(this);
                    num = parseInt(($$.parent().attr('id')).substr(4,1));        
                    num -= 2;
                    var sel = '#subnav-' + num;
 
/*============================TRACE=========================
                    var o = {};
                    o.dir             ='IN';
                    o.target         = e.target;
                    o.relatedTarget = e.relatedTarget;
                    o.num             = num;
                    o.sel             = sel;
                    o.id            = $$.parent().attr('id').substr(4,1);
                    log(o);
//============================END TRACE=====================*/
 
 
                            //1. show the subnav
                            $(sel).css('display','block');
 
                            //2. display the overlay
                            $('#overlay').removeClass('hide');        
 
                            //3. Remove existing hover class, Add the 'hover' class to this item                    
                            rmHover();
                            $$.addClass('hover');
 
 
 
                },
 
 
                function(e){    
                    //log(e, {'dir':'OUT','target':e.target, 'relatedTarget': e.relatedTarget});    
                    //if the closest parent search returns zero, we know we're not in nav box anymore
                    checkAncestor(e,"#nav");
                });
 
        function checkAncestor(child, ancestor){
            child = child.relatedTarget || e.fromElement;
            var $elem = $(child).closest(ancestor);        
            if($elem.length <1) {        
                hideFlyout();                                
            }                    
        }
        //when mouse levaes both top nav and flyout, and doesn't go from one to the other, close the flyout
        $('#site_navigation, #flyout')
            .mouseleave(function(e){
                checkAncestor(e,"#nav");
            });
 
        //peg the first two links with a hide function.
        $('.site_navigation > li:eq(0) a, .site_navigation > li:eq(1) a, .site_navigation > li:eq(2) a, .site_navigation > li:eq(3) a, .site_navigation > li:eq(5) a, .site_navigation > li:eq(6) a, .site_navigation > li:eq(7) a')
            .mouseenter(function(){             
                hideFlyout();                                                          
            });
 
 
        function hideFlyout(){
            rmHover();
            //Hide the subnavs
            $('.subnav').css('display','none');                            
            //Hide the overlay
            $('#overlay').addClass('hide');                            
        }    
 
        function rmHover(){
            //Remove the 'hover' class on nav item
            $('#site_navigation .hover').removeClass('hover');        
 
        }

[JKing]

These types of menus are quite popular and really don't need any javascript at all. The javascript complicates things in my opinion and also may run you into problems if a user has javascript turned off.

Post your CSS and HTML and I may be able to help.

[nataraj jaideep]

Hi Jking,
Thanks a lot for your reply. please find the html, css and Js code.

 javascript
$(function(){
/*Start closure*/           
    /********************/        
    //NAVIGATION This is the flyout menu starting
    /********************/
    var num, current = false;
    $('#site_navigation > li.items > a')
        .hoverIntent(function(e){
                    //Clear out the open subnavs
                    $('.subnav').css('display','none');
                    var $$ = $(this);
                    num = parseInt(($$.parent().attr('id')).substr(4,1));        
                    num -= 2;
                    var sel = '#subnav-' + num;
 
/*============================TRACE=========================
                    var o = {};
                    o.dir             ='IN';
                    o.target         = e.target;
                    o.relatedTarget = e.relatedTarget;
                    o.num             = num;
                    o.sel             = sel;
                    o.id            = $$.parent().attr('id').substr(4,1);
                    log(o);
//============================END TRACE=====================*/
 
 
                            //1. show the subnav
                            $(sel).css('display','block');
 
                            //2. display the overlay
                            $('#overlay').removeClass('hide');        
 
                            //3. Remove existing hover class, Add the 'hover' class to this item                    
                            rmHover();
                            $$.addClass('hover');
 
 
 
                },
 
 
                function(e){    
                    //log(e, {'dir':'OUT','target':e.target, 'relatedTarget': e.relatedTarget});    
                    //if the closest parent search returns zero, we know we're not in nav box anymore
                    checkAncestor(e,"#nav");
                });
 
        function checkAncestor(child, ancestor){
            child = child.relatedTarget || e.fromElement;
            var $elem = $(child).closest(ancestor);        
            if($elem.length <1) {        
                hideFlyout();                                
            }                    
        }
        //when mouse levaes both top nav and flyout, and doesn't go from one to the other, close the flyout
        $('#site_navigation, #flyout')
            .mouseleave(function(e){
                checkAncestor(e,"#nav");
            });
 
        //peg the first two links with a hide function.
        $('.site_navigation > li:eq(0) a, .site_navigation > li:eq(1) a, .site_navigation > li:eq(2) a, .site_navigation > li:eq(3) a, .site_navigation > li:eq(5) a, .site_navigation > li:eq(6) a, .site_navigation > li:eq(7) a')
            .mouseenter(function(){             
                hideFlyout();                                                          
            });
 
 
        function hideFlyout(){
            rmHover();
            //Hide the subnavs
            $('.subnav').css('display','none');                            
            //Hide the overlay
            $('#overlay').addClass('hide');                            
        }    
 
        function rmHover(){
            //Remove the 'hover' class on nav item
            $('#site_navigation .hover').removeClass('hover');        
 
        }    
    //This is the flyout menu ending
 
    /********************/        
    //Left Nav Menu Animation
    /********************/
 
    mSetLastItem = function() {
        $(".leftNavTopics a").removeClass("noDarkBorder");
        $(".leftNavTopics a:visible:last").addClass("noDarkBorder");
    }
 
    mShowMenu = function(mE) {
        var mThis = $(this);
 
        if (mThis.next().is(":visible")) {
            mThis.next().slideUp(200);
            mThis.removeClass("otherDarkBorder");
        } else {
            mThis.parent().siblings().find("a:first").removeClass("otherDarkBorder").next().slideUp(200);
            mThis.next().slideDown(200);
            mThis.addClass("otherDarkBorder");
            mThis.next().children(":last").find("a:first").addClass("otherDarkBorder");
        }
 
        mSetLastItem();
        mE.preventDefault();
    }
 
    var mCurrentItem = $(".leftNavTopics .currentItem");
 
    mCurrentItem.parents("ul").show().prev().addClass("blackArrow");
 
    if (mCurrentItem.next()) {
        //mCurrentItem.addClass("darkBorder");
        mCurrentItem.next().children(":last").find("a:first").addClass("darkBorder");
    }
 
    mCurrentItem.next().show().children().find("a:first, a:last").bind("click", mShowMenu);
    mSetLastItem();
 
 
/********************/
        //SHARETOOL
        /********************/ 
 
        $(".content-up a.shareTool").click(function () {
            $('.content-up a.shareTool').removeClass("shareTool").addClass('shareToolActive');
            $('.content-up .page-tools').removeClass("hide");
        });
 
        $(".content-up .page-tools li.email a").click(function () {
            $('.content-up .page-tools .body').animate({ height: "305px" }, 650, function () {
                $('.content-up .page-tools .body .page-tools-email').fadeIn(200);
            });
 
        });
 
        $(".content-up .cancel-email").click(function () {
            $('.content-up .page-tools .body .page-tools-email').fadeOut(400, function () {
                $('.content-up .page-tools .body').animate({ height: "130px" }, 650);
            });
 
        });
 
        $(".content-up .page-tools .close").click(function () {
            $('.content-up a.shareToolActive').removeClass("shareToolActive").addClass('shareTool');
            $('.content-up .page-tools').addClass("hide");
            $('.content-up .page-tools .body .page-tools-email').css({ 'display': 'none' });
            $('.content-up .page-tools .body').css({ 'height': '130px' });
        });
 
        /********************/
        //ACCORDION
        /********************/
 
        // Uncomment to show first block as default
        $(".accordion h3:first").addClass("active");
        $(".accordion div:not(:first)").hide();
 
        //$(".accordion .wrapper").hide();
 
        $(".accordion h3").click(function () {
            $(this).next("div.wrapper").slideToggle(400).siblings("div.wrapper:visible").slideUp(400);
            $(this).toggleClass("active");
            $(this).siblings("h3").removeClass("active");
        });
 
        $("div.article p:last-child").css({ 'margin-bottom': '0px' });
 
})
 
 
        /********************/
        //Show and Hide radio buttons toogle
        /********************/
function hideDiv(){ 
tag = document.getElementsByTagName("div"); 
for(x=0;x<tag.length; x++){ 
if(tag[x].getAttribute('id').indexOf("choose_") != -1){ 
tag[x].style.display = "none"; 
} 
} 
} 
function view(id){ 
ge = document.getElementById('choose_' + id.value); 
hideDiv(); 
ge.style.display = "block"; 
} 
// Start of text size increase
var min=8;
var max=18;
function increaseFontSize() {
   var p = document.getElementsByTagName('p');
   for(i=0;i<p.length;i++) {
      if(p[i].style.fontSize) {
         var s = parseInt(p[i].style.fontSize.replace("px",""));
      } else {
         var s = 12;
      }
      if(s!=max) {
         s += 1;
      }
      p[i].style.fontSize = s+"px"
   }
}
function decreaseFontSize() {
   var p = document.getElementsByTagName('p');
   for(i=0;i<p.length;i++) {
      if(p[i].style.fontSize) {
         var s = parseInt(p[i].style.fontSize.replace("px",""));
      } else {
         var s = 12;
      }
      if(s!=min) {
         s -= 1;
      }
      p[i].style.fontSize = s+"px"
   }   
}
 
// End of textsize increase
 
 

 html code
<div id="nav">
        <ul id="site_navigation">
          <li class="items" id="item1"> <a href="page-5.html"> Electricity and <br />
            gas customers </a> </li>
          <li class="items" id="item2"> <a> Residential </a> </li>
          <li class="items" id="item3"> <a href="page-2.html?cur=3"> Your bills and<br />
            usage </a> </li>
          <li class="items" id="item4"> <a href="page-2.html?cur=4" class="current"> Your services </a> </li>
          <li class="items" id="item5"> <a href="page-2.html?cur=5"> Your National <br />
            Grid </a> </li>
          <li class="items" id="item6"> <a href="page-2.html?cur=6"> Safety and <br />
            outages </a> </li>
          <li class="items" id="item7"> <a href="page-3.html"> Customer <br />
            support </a> </li>
        </ul>
        <!--Start Sub Menu Navigation-->
        <div id="flyout_container">
          <div id="flyout">
            <div class="subnav" id="subnav--1">
              <div class="inner">
                <div class="column-1 columns">
                  <h5>You are currently in the Massachusetts electric service site</h5>
                  <div class="lightGraytopborder"></div>
                  <div class="whitespacer"></div>
                  <div>Would like to <a href="page-2.html">Go to the Massachusetts gas service site?</a> <br />
                    <br />
                    or <a href="page-2.html">go to the another regional energy service</a>
                    <div class="whitespacer"></div>
                    <div class="whitespacer"></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="subnav" id="subnav-0">
              <div class="inner">
                <div class="column-1 columns">
                  <h5>You are currently in Residential customers</h5>
                  <div class="lightGraytopborder"></div>
                  <div class="whitespacer"></div>
                  <div>Would you like to go to another destination?
                    <div class="whitespacer"></div>
                    <div class="lightGraytopborder"></div>
                    <ul>
                      <li><a href="#">Business customers</a></li>
                      <li><a href="#">Tradespeople and customers</a></li>
                      <li><a href="#">Energy analysts</a></li>
                      <li><a href="#">Energy supply companies</a></li>
                      <li><a href="#">Regulators</a></li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            <div class="subnav" id="subnav-1">
              <div class="inner">
                <div class="column-1 columns">
                  <h5>Your bills and usage</h5>
                  <div class="whitespacer"></div>
                  <div>Lorem ipsum dolor sit amet consectet adipisicing elit,Aliquam elefiend nisi nec mauris ullamcoprepr vitae vulpurtatue tellus aliquet cuarbiter at tortor sit amet<br />
                    <br />
                    <a href="page-2.html">Go now</a></div>
                </div>
                <div class="column-2 columns">
                  <ul>
                    <li><a href="page-2.html">View your current bill</a></li>
                    <li><a href="page-2.html">Make a online payment</a></li>
                    <li><a href="page-2.html">Billing and payment options</a></li>
                    <li><a href="page-2.html">Your billing and payment history</a></li>
                  </ul>
                  <p><img alt="Images topnav your service1" src="http://bytes.com/topic/html-css/images/nav-img1.jpg"/><br />
                    <br />
                    Consectetur adipisicing elieiusicing elieiusmod tempor lorem ipsum dolor sit amet lorem<br />
                    <br />
                    <a href="#">Lorem ipsum dolor</a></p>
                </div>
                <div class="column-3 columns">
                  <ul>
                    <li><a href="page-2.html">Your usage and cost graph</a></li>
                    <li><a href="page-2.html">Your action plan</a></li>
                    <li><a href="page-2.html">Lower your usage</a></li>
                    <li><a href="page-2.html">Understand your bill and rates</a></li>
                  </ul>
                  <p><img alt="Images topnav your service1" src="http://bytes.com/topic/html-css/images/nav-img2.jpg"/><br />
                    <br />
                    Consectetur adipisicing elieiusicing elieiusmod tempor <br />
                    <br />
                    <a href="#" class="imgBorder">Dolor lorem</a></p>
                </div>
              </div>
            </div>
            <div class="subnav" id="subnav-2">
              <div class="inner">
                <div class="column-1 columns">
                  <h5>Your service</h5>
                  <div class="whitespacer"></div>
                  <div>Intro to services offered in this region orem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lectus metus, interdum ut mollis sit amet, porttitor ac magna. Donec sed mi enim<br />
                    <br />
                    <a href="page-2.html">Go now</a></div>
                </div>
                <div class="column-2 columns">
                  <ul>
                    <li><a href="page-2.html">Turn on service</a></li>
                    <li><a href="page-2.html">Turn off service</a></li>
                    <li><a href="page-2.html">Check service availability</a></li>
                    <li><a href="page-2.html">Metering</a></li>
                  </ul>
                  <div class="boldtext">For new customers</div>
                  <div class="whitespacer"></div>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing
                    elit. Mauris sed purus nisl. Nulla sed tortor a
                    lectus suscipit tempus ipsum.<br />
                    <br />
                    <a href="#">View all information for new customers</a><br />
                    <br />
                    <a href="#">Request to turn on service</a></p>
                </div>
                <div class="column-3 columns">
                  <ul>
                    <li><a href="page-2.html">Convert from oil to gas</a></li>
                    <li><a href="page-2.html">Your supplier options</a></li>
                    <li><a href="page-2.html">Generate your own power</a></li>
                    <li><a href="page-2.html">Other services</a></li>
                  </ul>
                  <div class="boldtext">Moving?</div>
                  <div class="whitespacer"></div>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing
                    elit. Mauris sed purus nisl. Nulla sed tortor a
                    lectus suscipit tempus ipsum.<br />
                    <br/>
                    <a href="#">View all information for customers planning
                    to move</a><br />
                    <br />
                    <a href="#">Request to move service</a></p>
                </div>
              </div>
            </div>
            <div class="subnav" id="subnav-3">
              <div class="inner">
                <div class="column-1 columns">
                  <h5>Your account</h5>
                  <div class="whitespacer"></div>
                  <div><a href="page-2.html">Sign in to your Massachusetts electric service account</a></div>
                </div>
                <div class="column-2 columns">
                  <ul>
                    <li><a href="page-2.html">Manage your account</a></li>
                    <li><a href="page-2.html">Manage your payment methods</a></li>
                    <li><a href="page-2.html">Manage your alerts email</a></li>
                  </ul>
                  <div class="boldtext">"My house" and "My garage"</div>
                  <div class="whitespacer"></div>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing
                    elit. Mauris sed purus nisl. Nulla sed tortor a lectus suscipit tempus ipsum<br />
                    <br />
                    <a href="#">Learn more about account nicknames</a></p>
                </div>
                <div class="column-3 columns">
                  <ul>
                    <li><a href="page-2.html">Manage your profile and sign-in</a></li>
                    <li><a href="page-2.html">Add a new account</a></li>
                  </ul>
                  <br />
                  <div class="whitespacer"></div>
                  <div class="boldtext">You are currently in the {Massachusetts electric} service site</div>
                  <div class="whitespacer"></div>
                  <p>Would you like to <a href="#" class="imgBorder">go to the {Massachusetts
                    gas} service site?</a><br />
                    <br/>
                    Or, <a href="#" class="imgBorder">go to another regional service site.</a></p>
                </div>
              </div>
            </div>
            <div class="subnav" id="subnav-4">
              <div class="inner">
                <div class="column-1 columns">
                  <h5>Safety and outages</h5>
                  <div class="whitespacer"></div>
                  <div>Lorem ipsum dolor sit amet,
                    consectetur adipiscing elit.
                    Fusce lectus metus, interdum
                    ut mollis sit amet, porttitor ac
                    magna. Donec sed mi enim<br />
                    <br />
                    <a href="page-2.html">Go now</a></div>
                </div>
                <div class="column-2 columns">
                  <ul>
                    <li><a href="page-2.html">Report or check on an outage</a></li>
                    <li><a href="page-2.html">How to report an outage</a></li>
                    <li><a href="page-2.html">Gas interruptions</a></li>
                  </ul>
                  <div class="boldtext">Call before you dig</div>
                  <div class="whitespacer"></div>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing
                    elit. Mauris sed purus nisl. Nulla sed tortor a
                    lectus suscipit tempus ipsum.<br />
                    <br />
                    <a href="#">Learn more</a></p>
                </div>
                <div class="column-3 columns">
                  <ul>
                    <li><a href="page-2.html">Outage map</a></li>
                    <li><a href="page-2.html">Storm recovery</a></li>
                    <li><a href="page-2.html">Energy safety</a></li>
                  </ul>
                  <div class="boldtext">Carbon monoxide</div>
                  <div class="whitespacer"></div>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing
                    elit. Mauris sed purus nisl. Nulla sed tortor a
                    lectus suscipit tempus ipsum<br />
                    <br/>
                    <a href="#" class="imgBorder">Learn more</a></p>
                </div>
              </div>
            </div>
            <div class="subnav" id="subnav-5">
              <div class="inner">
                <div class="column-1 columns">
                  <h5>Customer support</h5>
                  <div class="whitespacer"></div>
                  <div>Lorem ipsum dolor sit amet,
                    consectetur adipiscing elit.
                    Fusce lectus metus, interdum
                    ut mollis sit amet, porttitor ac
                    magna. Donec sed mi enim<br />
                    <br />
                    <a href="page-2.html">Go now</a></div>
                </div>
                <div class="column-2 columns">
                  <ul>
                    <li><a href="page-2.html">Get answers to common questions</a></li>
                    <li><a href="page-2.html">Problems with your bill</a></li>
                    <li><a href="page-2.html">Payment assistance programs</a></li>
                    <li><a href="page-2.html">Service problems</a></li>
                  </ul>
                  <div class="boldtext">Service problems may include:</div>
                  <div class="whitespacer"></div>
                  <p>Power outages, energy theft,
                    street lights in need of repair, or
                    metering problems<br />
                    <br />
                    <a href="#">View details</a></p>
                </div>
                <div class="column-3 lastTab columns">
                  <ul>
                    <li><a href="page-2.html">Customer rights and responsibilities</a></li>
                    <li><a href="page-2.html">Contact us</a></li>
                    <li><a href="page-2.html">Send us feedback</a></li>
                  </ul>
                  <br />
                  <div class="whitespacer"></div>
                  <div class="boldtext">Report a gas emergenc</div>
                  <div class="whitespacer"></div>
                  <p>[insert local gas emergency module
                    - no links, only informational]</p>
                </div>
              </div>
            </div>
          </div>
        </div>
 

 css code
/*//////////////////////////// Start Top Navigation Section /////////////////////////////////////////*/
 
.hide {
    display: none;
}
#overlay {
    background:#000;
    height:1250px;
    left:0;
    opacity:0.4;
    filter:alpha(opacity= 40);
    top:149px;
    width:100%;
    position:absolute;
    z-index:1000;
}
object {
    display:block;
}
#nav {
    width: 940px;
    display: block;
    float: left;
}
#nav #flyout_container {
    position: relative;
    z-index: 1001;
}
#nav #flyout_container #flyout {
    width: auto;
    display: inline;
    float: right;
    position: relative;
    margin: 0 -120px 1.5em -1px;
    margin-right: 0;
    position: absolute;
    left: 0;
    top: 0px;
    color:#9b9b9b;
    z-index:1001;
}
#nav #flyout_container #flyout .subnav {
    background: #f2f2f2;
    height:auto;
    display: none;
}
#nav #flyout_container #flyout .subnav a {
    color:#0162c0;
}
#
#flyout_container #flyout .subnav a:hover {
    text-decoration: underline;
}
#nav #flyout_container #flyout .subnav .inner {
    width: auto;
}
#nav #flyout_container #flyout .subnav .inner .columns {
    display: inline;
    float: left;
    margin-right: 20px;
    width: auto;
    margin-top: 40px;
}
#flyout {
    background-color:#f2f2f2;
}
#nav #flyout_container #flyout .subnav .inner .column-2 a, #nav #flyout_container #flyout .subnav .inner .column-3 a {
    padding:5px 0px 10px 0px;
    font-weight:bold;
    font-size:11px;
}
#nav #flyout_container #flyout .subnav .inner .column-1 {
    margin-top: 0px;
    display: inline;
    float: left;
    margin-right: 20px;
    width: auto;
    margin: 0 20px 0 20px;
    width:300px;
    font-size:11px;
    font-weight:bold;
}
#nav #flyout_container #flyout .subnav .inner .column-1 ul li {
    padding:8px 0px 8px 0px;
    border-bottom: solid 1px #ccc;
    margin-left:-16px;
    width:300px;
}
#nav #flyout_container #flyout .subnav .inner .column-2 {
    text-align: left;
    padding: 0px 0px 0px 0px;
    width:270px;
}
#nav #flyout_container #flyout .subnav .inner .column-2 ul li {
    padding:8px 0px 8px 0px;
    border-bottom: solid 1px #ccc;
    margin-left:-16px;
    width:230px;
}
#nav #flyout_container #flyout .subnav .inner .column-2 p {
    padding: 0px 0px 0px 0px;
    color:#6d6d6d;
    width:230px;
}
#nav #flyout_container #flyout .subnav .inner .column-2 p a {
    border-bottom: none;
}
#nav #flyout_container #flyout .subnav .inner .column-3 {
    margin-right:0;
    width:270px;
}
#nav #flyout_container #flyout .subnav .inner .column-3 ul li {
    padding:8px 0px 8px 0px;
    border-bottom: solid 1px #ccc;
    margin-left:-16px;
    width:230px;
}
#nav #flyout_container #flyout .subnav .inner .column-3 p {
    padding: 0px 0px 0px 0px;
    color:#6d6d6d;
    width:250px;
}
#nav #flyout_container #flyout .subnav .inner .column-3 p a {
    border-bottom: none;
}
#nav #flyout_container h5 {
    margin:20px 5px 10px 0px;
    font-size: 16px;
    line-height: 20px;
}
.flyout-item1 {
    width:450px;
}
.lastTab {
    padding-right: 40px;
}
#site_navigation {
    margin: 0;
    height: 54px;
}
#site_navigation .items a {
    color: #333333;
    background-image: url(../images/blarrow.gif);
    background-position: right 6px;
    background-repeat: no-repeat;
    line-height:14px;
    font-size:8.8pt;
}
#site_navigation .items a:hover {
    color: #0055ab;
}
 
#site_navigation .items a.current {
    background-color: #0055ab;
    background-image: url(../images/wharrow.gif);
    background-position: right 10px;
    color: #ffffff;
}
#site_navigation .items a.current:hover {
    color: #000000;
}
#site_navigation li {
    display: inline;
    float: left;
    margin: 0;
    width: 133px;
    border-right: solid 1px #efefef;
}
#site_navigation li a {
    display: block;
    height: 50px;
    padding: 4px 3px 0 11px;
    font-weight: bold;
    letter-spacing: .3px;
}
#site_navigation #item7 {
    width: 135px;
}
#site_navigation #item8 {
    width: 100px;
}
#site_navigation #item1 a:hover, #site_navigation #item2 a:hover, #site_navigation #item3 a:hover, #site_navigation #item4 a:hover, #site_navigation #item5 a:hover, #site_navigation #item6 a:hover, #site_navigation #item7 a:hover, #site_navigation #item8 a:hover, #site_navigation #item9 a:hover {
    text-decoration:underline;
    cursor:pointer;
    background-color:#f2f2f2;
    background-image: url(../images/blarrow.gif);
}
/*//////////////////////////// End Top Navigation Section /////////////////////////////////////////*/