仿新浪头部导航栏(附带图片)

-------------------------------aspx页面-------------------------------------

<div id="head-navigation">
    <div id="topnavigation">
        <!--头部导航内容开始-->
        <div id="logopic"></div>
        <div id="onediv">首页</div>
        <div class="logo1">应用<span class="sanjiao">▼</span></div>
        <div class="logo1">微吧<span class="sanjiao">▼</span></div>
        <div class="logo1">游戏<span class="sanjiao">▼</span></div>
        <div id="topselect"><!--<div id="divpic1"></div><div id="divpic2"></div>--><div id="txtload" title="搜索文本框">搜索微博、找人</div><input type="text" id="txtselect" title="搜索文本框" /><a href="#" id="taselect1" title="搜索按钮"></a></div>
        <div id="usernamediv"><asp:Label ID="labusername" runat="server" Text="Label"></asp:Label></div>
        <div class="logo2" title="快速发微博"><div id="faweibo1" class="logo2pic"></div></div>
        <div id="xingxi2" class="logo2" title="信息管理"><div id="xinxi1" class="logo2pic"></div></div>
        <div id="shezhi2" class="logo2" title="设置管理"><div id="shezhi1" class="logo2pic"></div></div>
        <div id="huiyuan2" class="logo2" title="会员管理"><div id="huiyuan1" class="logo2pic"></div></div>
    </div>
    <div id="xian"></div>
    <div id="showdiv1"></div>
    <div id="topdiv1" class="topdiv"></div><div id="topdiv2" class="topdiv"></div><div id="topdiv3" class="topdiv"></div>
    </div>

------------------------------------------css样式------------------------------

/*头部样式*/
#head-navigation
{position: fixed;top: 0px;left: 0px;height: 40px;width: 100%;background-image: url(../images/bg_nav.png);margin:0px;padding:0px;}
#xian
{position:fixed;top:38px;height:2px;width:1366px;background-image: url(../images/2013-05-13_101208.png);margin:0px;padding:0px;}
/*导航内容样式*/
#logopic
{width:175px;height:40px;background-image: url(../images/WB_logo.png);margin:0px;padding:0px;float:left;margin-left:13%;}
#logopic:hover
{background-image: url(../images/WB_logo.png);background-position:0px -39px;cursor:pointer;}
.logo1
{float:left;margin:0px;padding:0px;width:70px;height:28px;text-align:center;padding-top:10px;color:#fff;font-size:14px;}
.logo1:hover
{background-color:#000;cursor:pointer;}
#onediv
{background-color:#000;float:left;margin:0px;padding:0px;width:70px;height:27px;text-align:center;padding-top:10px;color:#fff;font-size:14px;}
#onediv:hover
{cursor:pointer;}
.sanjiao
{margin-left:4px;font-size:12px;}
/*搜索框样式*/
#topselect
{float:left;padding:0px;margin:0px;height:27px;width:236px;margin-top:8px;margin-left:20px;background: url(../images/bg_line.png);background-position:0px -5px;}
#topselect:hover
{background: url(../images/bg_line.png);background-position:-237px -5px;}
/*#divpic2
{float:left;padding:0px;margin:0px;height:24px;width:225px;background: url(../images/bg_btn.png) right top no-repeat;background-position:-188px -510px;}
#divpic2:hover
{background:url('../images/bg_btn.png') right top no-repeat;background-position:-188px -570px;}
#divpic1
{float:left;height:24px;width:10px;background:url('../images/bg_btn.png') left top no-repeat;background-position:0px -480px;}*/
#txtselect
{border:0;width:180px;height:20px;font-size:20px;margin-top:1px;margin-left:16px;float:left;display:none;}
#txtload
{border:0;width:180px;height:20px;font-size:12px;margin-top:5px;float:left;display:block;margin-left:16px;color:#808080;}
#taselect1
{margin:0px;padding:0px;position:fixed;width:20px;height:20px;margin-left:9px;margin-top:2px;float:left;}
#usernamediv
{float:left;margin:0px;padding:0px;width:70px;height:28px;text-align:center;padding-top:10px;color:#fff;font-size:14px; margin-left:40px;}
#usernamediv:hover
{background:#000000;cursor:pointer;}
.logo2
{margin:0px;padding:0px;float:left;height:28px;width:40px;padding-top:10px;text-align:center;}
.logo2:hover
{background:#000;cursor:pointer;}
.logo2pic
{padding:0px;margin:0px;width:14px;height:12px;border:0px;margin-left:13px;margin-top:3px;background:url('../images/icon.png');}
#faweibo1
{background:url('../images/icon.png');background-position:-50px 0px;}
#xinxi1
{background-position:-50px -50px;}
#shezhi1
{background-position:-50px -100px;width:16px;height:16px;margin-left:11px;margin-top:1px;}
#huiyuan1
{background-position:-50px -175px;}
#topnavigation
{position:absolute;width:1366px;z-index:99;}/*是内容在小窗口下不错乱*/
#showdiv1
{width:602px;height:211px;border:1px solid #000;position:absolute;top:40px;left:352px;display:none;}
/*#taselect1
{background: url(../images/bg_line.png);background-position:-715px -5px;}
#taselect1:hover
{background: url(../images/bg_line.png);background-position:-737px -5px;}*/
#topdiv1
{width:150px;height:200px;border:1px solid #000;position:absolute;top:39px;left:927px;display:none;}
#topdiv2
{width:130px;height:200px;border:1px solid #000;position:absolute;top:39px;left:987px;display:none;}
#topdiv3
{width:130px;height:200px;border:1px solid #000;position:absolute;top:39px;left:1027px;display:none;}

 

----------------------------------------js文件---------------------------------

$(function () {
    $('.logo1').mousemove(function () { $(this).css({ 'background': '#fff', 'color': '#000', 'height': '31px' }); $(this).children().text('▲'); $('#showdiv1').css('display', 'block'); })
    $('.logo1').mouseout(function () { $(this).css({ 'background': 'none', 'color': '#fff', 'height': '27px' }); $(this).children().text('▼'); $('#showdiv1').css('display', 'none'); })
    $('#topselect').click(function () { $('#topselect').css('background-position', '-474px -5px'); $('#txtload').css('display', 'none'); $('#txtselect').css('display', 'block'); $('#txtselect').val(''); $('#txtselect').focus(); $('#taselect1').css({ 'background': 'url(../images/bg_line.png)', 'background-position': '-737px -5px' }) })
    $('#txtselect').blur(function () { $('#topselect').css('background-position', '0px -5px'); $('#txtload').css('display', 'block'); $('#txtselect').css('display', 'none'); $('#taselect1').css('background-image', 'url(imgs)'); })
    $('#taselect1').mousemove(function () { $(this).css({ 'background-position': '-715px -5px' }); })
    $('#taselect1').mouseout(function () { $(this).css({ 'background-position': '-737px -5px' }); })
    $('#xingxi2').mousemove(function () { $(this).css({ 'background': '#fff', 'height': '31px' }); $(this).children().css('background-position', '-50px -75px'); $('#topdiv1').css('display', 'block'); })
    $('#xingxi2').mouseout(function () { $(this).css({ 'background': 'none', 'height': '27px' }); $(this).children().css('background-position', '-50px -50px'); $('#topdiv1').css('display', 'none') })
    $('#shezhi2').mousemove(function () { $(this).css({ 'background': '#fff', 'height': '31px' }); $(this).children().css('background-position', '-50px -125px'); $('#topdiv2').css('display', 'block'); })
    $('#shezhi2').mouseout(function () { $(this).css({ 'background': 'none', 'height': '27px' }); $(this).children().css('background-position', '-50px -100px'); $('#topdiv2').css('display', 'none'); })
    $('#huiyuan2').mousemove(function () { $(this).css({ 'background': '#fff', 'height': '31px' }); $(this).children().css('background-position', '-50px -200px'); $('#topdiv3').css('display', 'block'); })
    $('#huiyuan2').mouseout(function () { $(this).css({ 'background': 'none', 'height': '27px' }); $(this).children().css('background-position', '-50px -175px'); $('#topdiv3').css('display', 'none'); })
})

 

-----------------------------附带图片---------------------