点击下载：jQuery或原生js网站头部下拉导航鼠标经过显示二维码.zip

HTML代码：

<div class="topOuter"><div class="topInner"><div class="top">
<div class="L">您好，欢迎来到网站程序网！</div>
<div class="R">
    <ul class="topmenu" id="topmenu">
        <li class="hb weibo"><strong>微博</strong><div class="hidebox"></div></li>
        <li class="hb weixin"><strong>微信</strong>
            <div class="hidebox">
                <div class="wxht"><b>网站程序网</b><br>微信号：<br>wangzhanchengxu</div>
            </div>
        </li>
        <li><strong><a href="/">返回首页</a></strong></li>
        <li><strong><a href="/list-123-1.html">网站模板</a></strong></li>
        <li><strong><a href="/cms/">CMS常见问题</a></strong></li>
        <li class="hb otherlink"><strong class="icon_arr">畅销网站模板</strong>
            <div class="hidebox">
<a href="/moban/20.html">营销型超声波设备网站模板+手机版+源PSD设计图</a>
<a href="/moban/11.html">商标转让商标买卖网站模板整站程序文件+数据库+phpcms后台</a>
<a href="/moban/4.html">旅游网站模板带整站程序文件(dedecms后台+数据库)</a>
<a href="/moban/18.html">营销型五金塑胶模具加工注塑成形相框礼品盒网站模板(中英版本)</a>
<a href="/moban/1.html">中英文冷热设备行业网站模板带后台(包含手机版本,首页PSD源图)</a>
<a href="/moban/29.html">矿产花岗岩白麻黄金麻网站模板+手机版+源PSD设计图</a>
<a href="/moban/22.html">网络科技网站建设网站设计网络公司模板</a>
<a href="/moban/25.html">房地产网站模板+手机版</a>
<a href="/moban/26.html">体系认证食品认证客户验厂服务商网站模板</a>
            </div>
        </li>
    </ul>
</div>
</div></div></div>

CSS代码：

<style type="text/css">
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;outline:none;list-style:none}
img,a img{border:0px;vertical-align:bottom}

.topOuter {height:31px;font-size:12px;margin-bottom:20px;background:#f9f9f9}
.topInner {width:100%;height:31px;margin:0 auto;padding:0 10px;box-shadow:0 1px 1px #ddd}
.top {position:relative;width:100%;height:31px;line-height:30px;margin:0 auto}
.top .L {float:left}
.top .R {float:right}
.top .R a {color:#444;text-decoration:none}
.top .R a:hover {color:#cc0033;-webkit-transition:none;-moz-transition:none;transition:none}

ul.topmenu {margin:5px 0 0;padding:0;line-height:22px}
ul.topmenu li {position:relative;float:left;list-style:none;margin:0;padding:0;background:url("/uploadfile/jseffects/headermenu/topmenu.gif") no-repeat right top}
ul.topmenu li:last-child {background:none}
ul.topmenu li strong {position:relative;z-index:20;display:block;height:25px;padding:0 10px;font-weight:normal}
ul.topmenu li strong.icon_arr {padding-right:23px;background:url("/uploadfile/jseffects/headermenu/topmenu.gif") no-repeat right -23px}
ul.topmenu .hidebox {display:none;position:absolute;z-index:10;left:0;top:25px;padding:10px;margin:-1px -1px 0 -1px;background:white;border:1px solid #dfdfdf;box-shadow:0 1px 2px #ccc}

ul.topmenu li.weibo strong {padding-left:29px;background:url("/uploadfile/jseffects/headermenu/topmenu.gif") no-repeat 0 -75px}
ul.topmenu li.weibo .hidebox {width:200px}

ul.topmenu li.weixin strong {padding-left:30px;background:url("/uploadfile/jseffects/headermenu/topmenu.gif") no-repeat 0 -46px}
ul.topmenu li.weixin .wxht {height:74px;padding-left:84px;white-space:nowrap;background:url("/uploadfile/jseffects/headermenu/topmenu.gif") no-repeat 0 -175px}

ul.topmenu li.otherlink .hidebox {left:auto;right:0}
ul.topmenu li.otherlink .hidebox a {display:block;white-space:nowrap}

ul.topmenu li.hover strong {border:1px solid #dfdfdf;border-bottom:none;background-color:white;margin:-1px -1px 0 -1px}
ul.topmenu li.hover strong.icon_arr {background-position:right -46px}
</style>

使用jQuery方法实现：

<script type="text/javascript" src="/statics/ljs/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#topmenu li.hb").hover(function(){
        $(this).addClass("hover").find("div.hidebox").show();
    },function(){
        $(this).removeClass("hover").find("div.hidebox").hide();
    });
});
</script>

或者不借助jQuery库，自己动手写原生javascript方法来实现：

<script type="text/javascript">
(function(){

    if(!window["ADS"])window["ADS"]={};

    function isCompatible(other){
        if(other===false || !Array.prototype.push || !Object.hasOwnProperty || !document.createElement || !document.getElementsByTagName){
            return false;
        }
        return true;
    }
    window["ADS"]["isCompatible"] = isCompatible;

    function $(){
        var elements = new Array();
        for(var i=0; i<arguments.length; i++){
            var element = arguments[i];
            if(typeof element == "string"){
                element = document.getElementById(element);
            }
            if(arguments.length == 1){
                return element;
            }
            elements.push(element);
        }
        return elements;
    }
    window["ADS"]["$"] = $;

    function addEvent(node, type, listener){
        if(!isCompatible()) return false;
        if(!(node = $(node))) return false;
        if(node.addEventListener){
            node.addEventListener(type, listener, false);
            return true;
        }else if(node.attachEvent){
            node["e"+type+listener] = listener;
            node[type+listener] = function(){node["e"+type+listener](window.event);};
            node.attachEvent("on"+type,node[type+listener]);
            return true;
        }
        return false;
    }
    window["ADS"]["addEvent"] = addEvent;

    function getElementsByClassName(className, tag, parent){
        parent = parent || document;
        if(!(parent = $(parent))) return false;
        var allTags = (tag == "*" && parent.all) ? parent.all : parent.getElementsByTagName(tag);
        var matchingElements = new Array();
        className = className.replace(/\-/g, "\\-");
        var regex = new RegExp("(^|\\s)" + className + "(\\s|$)");
        var element;
        for(var i=0; i<allTags.length; i++){
            element = allTags[i];
            if(regex.test(element.className)){
                matchingElements.push(element);
            }
        }
        return matchingElements;
    }
    window["ADS"]["getElementsByClassName"] = getElementsByClassName;

    function getClassNames(element){
        if(!(element = $(element))) return false;
        return element.className.trim().replace(/\s+/," ").split(" ");
    }
    window["ADS"]["getClassNames"] = getClassNames;

    function hasClassName(element, className){
        if(!(element = $(element))) return false;
        var classes = getClassNames(element);
        for(var i=0; i < classes.length; i++){
            if(classes[i] === className){return true;}
        }
        return false;
    }
    window["ADS"]["hasClassName"] = hasClassName;

    function addClassName(element, className){
        if(!(element = $(element))) return false;
        if(hasClassName(element,className)) return false;
        element.className += (element.className ? " " : "") + className;
        return true;
    }
    window["ADS"]["addClassName"] = addClassName;

    function removeClassName(element, className){
        if(!(element = $(element))) return false;
        var classes = getClassNames(element);
        var length = classes.length;
        for(var i=length-1; i>=0; i--){
            if(classes[i] === className){delete(classes[i]);}
        }
        element.className = classes.join(" ");
        return (length == classes.length ? false : true);
    }
    window["ADS"]["removeClassName"] = removeClassName;

    function camelize(s){
        return s.replace(/-(\w)/g,function(strMatch, p1){
            return p1.toUpperCase();
        });
    }
    window["ADS"]["camelize"] = camelize;

    function uncamelize(s,sep){
        sep = sep || "-";
        return s.replace(/([a-z])([A-Z])/g, function(strMatch,p1,p2){
            return p1 + sep + p2.toLowerCase();
        });
    }
    window["ADS"]["camelize"] = camelize;

    function setStyleById(element,styles){
        if(!(element = $(element))) return false;
        for(property in styles){
            if(!styles.hasOwnProperty(property)) continue;
            if(element.style.setProperty){
                element.style.setProperty(uncamelize(property,"-"),styles[property],null);
            }else{
                element.style[camelize(property)] = styles[property];
            }
        }
        return true;
    }
    window["ADS"]["setStyle"] = setStyleById;
    window["ADS"]["setStyleById"] = setStyleById;

    var hbEles = ADS.getElementsByClassName("hb","li","topmenu");
    for(var i=0; i<hbEles.length; i++)
    {
        ADS.addEvent(hbEles[i],"mouseover",function(W3CEvent){
            ADS.addClassName(this,"hover");
            ADS.setStyle(ADS.getElementsByClassName("hidebox","div",this)[0],{display:"block"});
        });
        ADS.addEvent(hbEles[i],"mouseout",function(W3CEvent){
            ADS.removeClassName(this,"hover");
            ADS.setStyle(ADS.getElementsByClassName("hidebox","div",this)[0],{display:"none"});
        });
    }
})();
</script>