마우스오버시 4단 전체메뉴 질문입니다..ㅠㅠㅠㅠ 채택완료

예전에 그누보드5 스킨방에 빨간소금쟁이님께서 올려주신 [2단 전체 메인 메뉴]소스를 수정해서 그누보드 4에 넣어보았더니 IE 10, 11에서는 나오는데 9이하 버전에서는 작동이 되지 않습니다. ㅠ ㅠ

IE 9이하에서도 작동되게 하는 방법이 있을까요 ㅠ ㅠ?

빨간소금쟁이님의 원본글은 링크로 걸어놓겠습니다..

*** menu.php ****

*** style_redsalt.css ****

/* 상단메뉴 적용 */ #hd { z-index:5 !important; } .navi { position:relative; z-index:15; margin:0; height:60px;background:#0c74bc;} .navBox { position:absolute; z-index:15; width:100%;} .navBox:after {display:block;visibility:hidden;clear:both;} .nav { position:absolute; z-index:15; top:0px; left:50%; margin-left:-50%; width:1000px; height:60px;}

.nav ul.depth1 {z-index:10;} .nav ul.depth1:after {display:block; visibility:hidden; clear:both; content:""; } .nav ul.depth1 li.gnb1 { position:relative; text-align:left; display:inline; width:1000px; margin:0 auto;} .logo {display:block; float:left; margin-left:-30px;} .nav_1da {display:block; float:right; font-weight:bold; height:38px; padding:0 20px 0 0; line-height:2.95em; font-size:14px; color:#FFF !important; text-decoration:none; } .nav_1da:focus, .nav_1da:hover {text-decoration:none; font-size:14px; color:#ff8b0f !important; }

.subBox { position:absolute; z-index:15; width:1000px; height:307px; top:60px; background-color:#fff; border:2px solid #0c74bc; display:none; } .subBox:after {display:block;visibility:hidden;clear:both;content:""}

.nav ul.depth1 ul.depth2 { position:absolute; width:950px; display:none; top:65px; padding:inherit !important ; margin-left:-6px; list-style:none; } .nav ul.depth1 ul.depth2 li {display:block !important; width:158px;} .nav_2da {display:block !important; float:left !important; text-align:left !important; line-height:40px; font-size:14px; color:#2383d2 !important; font-weight:bold;} .nav_2da:focus, .nav_2da:hover {text-decoration:none;}

.nav ul.depth1 ul.depth2 ul.depth3 { position:relative; width:158px; display:block !important; padding:inherit !important;} .nav ul.depth1 ul.depth2 ul.depth3 li {display:block !important;} .nav_3da {display:block !important; float:left; width:188px; height:20px; text-align:left; line-height:22px; font-size:12px; text-decoration:none; color:#666 !important; font-weight:bold; clear:both;} .nav_3da:focus, .nav_3da:hover {text-decoration:none; color:2383d2 !important;}

.nav ul.depth1 ul.depth2 ul.depth3 ul.depth4 { position:relative; width:158px; display:block !important; padding:inherit !important; } .nav ul.depth1 ul.depth2 ul.depth3 ul.depth4 li { display:block !important; clear:both;} .nav_4da {display:block !important; float:left; width:158px; text-align:left; line-height:18px !important; font-size:11px; text-decoration:none; font-weight:normal; color:#666 !important; clear:both; padding-left:3px;} .nav_4da:focus, .nav_4da:hover {text-decoration:none; color:2383d2 !important;}

*** jquery.iframe-auto-height ***

/*jslint white: true, indent: 2, onevar: false, browser: true, undef: true, nomen: false, eqeqeq: true, plusplus: false, bitwise: true, regexp: true, strict: false, newcap: true, immed: true */ /*global window, console, jQuery, setTimeout */

/*   Plugin: iframe autoheight jQuery Plugin   Version: 1.9.3   Author and Contributors   ========================================   NATHAN SMITH (http://sonspring.com/">http://sonspring.com/)   Jesse House (https://github.com/house9">https://github.com/house9)   aaron manela (https://github.com/aaronmanela">https://github.com/aaronmanela)   Hideki Abe (https://github.com/hideki-a">https://github.com/hideki-a)   Patrick Clark (https://github.com/hellopat">https://github.com/hellopat)   ChristineP2 (https://github.com/ChristineP2">https://github.com/ChristineP2)   Mmjavellana (https://github.com/Mmjavellana">https://github.com/Mmjavellana)   yiqing-95 (https://github.com/yiqing-95">https://github.com/yiqing-95)   jcaspian (https://github.com/jcaspian">https://github.com/jcaspian)   adamjgray (https://github.com/adamjgray">https://github.com/adamjgray)   Jens Bissinger (https://github.com/dpree">https://github.com/dpree)

  File: jquery.iframe-auto-height.plugin.js   Remarks: original code from http://sonspring.com/journal/jquery-iframe-sizing">http://sonspring.com/journal/jquery-iframe-sizing   Description: when the page loads set the height of an iframe based on the height of its contents   see README: http://github.com/house9/jquery-iframe-auto-height">http://github.com/house9/jquery-iframe-auto-height

*/ (function ($) {   $.fn.iframeAutoHeight = function (spec) {

    var undef;     if ($.browser === undef) {       var message = [];       message.push("WARNING: you appear to be using a newer version of jquery which does not support the $.browser variable.");       message.push("The jQuery iframe auto height plugin relies heavly on the $.browser features.");       message.push("Install jquery-browser: https://raw.github.com/house9/jquery-iframe-auto-height/master/release/jquery.browser.js">https://raw.github.com/house9/jquery-iframe-auto-height/master/release/jquery.browser.js");       alert(message.join("\n"));       return $;     }

    // set default option values     var options = $.extend({         heightOffset: 0,         minHeight: 0,         callback: function (newHeight) {},         animate: false,         debug: false,         diagnostics: false, // used for development only         resetToMinHeight: false,         triggerFunctions: [],         heightCalculationOverrides: []       }, spec);

    // logging     function debug(message) {       if (options.debug && options.debug === true && window.console) {         console.log(message);       }     }

    // not used by production code     function showDiagnostics(iframe, calledFrom) {       debug("Diagnostics from '" + calledFrom + "'");       try {         debug("  " + $(iframe, window.top.document).contents().find('body')[0].scrollHeight + " for ...find('body')[0].scrollHeight");         debug("  " + $(iframe.contentWindow.document).height() + " for ...contentWindow.document).height()");         debug("  " + $(iframe.contentWindow.document.body).height() + " for ...contentWindow.document.body).height()");       } catch (ex) {         // ie fails when called during for each, ok later on         // probably not an issue if called in a document ready block         debug("  unable to check in this state");       }       debug("End diagnostics -> results vary by browser and when diagnostics are requested");     }

    // show all option values     debug(options);

    // ******************************************************     // iterate over the matched elements passed to the plugin ; return will make it chainable     return this.each(function () {

      // ******************************************************       // http://api.jquery.com/jQuery.browser/">http://api.jquery.com/jQuery.browser/       var strategyKeys = ['webkit', 'mozilla', 'msie', 'opera'];       var strategies = [];       strategies['default'] = function (iframe, $iframeBody, options, browser) {         // NOTE: this is how the plugin determines the iframe height, override if you need custom         return $iframeBody[0].scrollHeight + options.heightOffset;       };

      jQuery.each(strategyKeys, function (index, value) {         // use the default strategy for all browsers, can be overridden if desired         strategies[value] = strategies['default'];       });

      // override strategies if registered in options       jQuery.each(options.heightCalculationOverrides, function (index, value) {         strategies[value.browser] = value.calculation;       });

      function findStrategy(browser) {         var strategy = null;

        jQuery.each(strategyKeys, function (index, value) {           if (browser[value]) {             strategy = strategies[value];             return false;           }         });

        if (strategy === null) {           strategy = strategies['default'];         }

        return strategy;       }       // ******************************************************

      // for use by webkit only       var loadCounter = 0;

      // resizeHeight       function resizeHeight(iframe) {         if (options.diagnostics) {           showDiagnostics(iframe, "resizeHeight");         }

        // set the iframe size to minHeight so it'll get smaller on resizes in FF and IE         if (options.resetToMinHeight && options.resetToMinHeight === true) {           iframe.style.height = options.minHeight + 'px';         }

        // get the iframe body height and set inline style to that plus a little         var $body = $(iframe, window.top.document).contents().find('body');         var strategy = findStrategy($.browser);         var newHeight = strategy(iframe, $body, options, $.browser);         debug(newHeight);

        if (newHeight < options.minHeight) {           debug("new height is less than minHeight");           newHeight = options.minHeight + options.heightOffset;         }

        debug("New Height: " + newHeight);         if (options.animate) {           $(iframe).animate({height: newHeight + 'px'}, {duration: 500});         } else {           iframe.style.height = newHeight + 'px';         }

        options.callback.apply($(iframe), [{newFrameHeight: newHeight}]);       } // END resizeHeight

      // debug me       debug(this);       if (options.diagnostics) {         showDiagnostics(this, "each iframe");       }

      // if trigger functions are registered, invoke them       if (options.triggerFunctions.length > 0) {         debug(options.triggerFunctions.length + " trigger Functions");         for (var i = 0; i < options.triggerFunctions.length; i++) {           options.triggerFunctions[i](resizeHeight, this);         }       }

      // Check if browser is Webkit (Safari/Chrome) or Opera       if ($.browser.webkit || $.browser.opera) {         debug("browser is webkit or opera");

        // Start timer when loaded.         $(this).load(function () {           var delay = 0;           var iframe = this;

          var delayedResize = function () {             resizeHeight(iframe);           };

          if (loadCounter === 0) {             // delay the first one             delay = 500;           } else {             // Reset iframe height to 0 to force new frame size to fit window properly             // this is only an issue when going from large to small iframe, not executed on page load             iframe.style.height = options.minHeight + 'px';           }

          debug("load delay: " + delay);           setTimeout(delayedResize, delay);           loadCounter++;         });

        // Safari and Opera need a kick-start.         var source = $(this).attr('src');         $(this).attr('src', '');         $(this).attr('src', source);       } else {         // For other browsers.         $(this).load(function () {           resizeHeight(this);         });       } // if browser

    }); // $(this).each(function () {   }; // $.fn.iframeAutoHeight = function (options) { }(jQuery)); // (function ($) {