Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/main.css">
    <script src="js/main.js"></script>
</head>
<body>
<header>
    <div class="head-top">
        <div class="logo"><a href="#"><img src="http://t-1.tuzhan.com/96d9c7894f8f/p-2/l/2015/05/07/20/89738f25e8a448afa1ebeb5d3ec2bacc.gif" alt="若邻网"></a></div>
        <div class="search">
            <form action="#">
                <div id="dropdown-toggle" class="dropdown-toggle">
                    <div id="dropdown-default" class="dropdown-default">职位</div>
                    <ul id="diropdown-menu" class="diropdown-menu">
                        <li>职位</li>
                        <li>伯乐</li>
                        <li>人脉</li>
                        <li>公司</li>
                        <li>面经</li>
                        <li>工资</li>
                    </ul>
                </div>
                <div class="search-ipt">
                    <input type="text" placeholder="请输入职位、公司关键字">
                </div>
                <div class="search-btn">
                    <button type="submit">搜索</button>
                </div>
            </form>
        </div>
        <div class="ucenter">
                    <a href="#">登录</a> | <a href="#">求职者注册</a> | <a href="#">招聘方注册</a>
        </div>
        <div class="clearfloat"></div> 
    </div>
    <nav>
        <ul>
            <li class="current"><a href="#">首页</a></li>
            <li><a href="#">职位</a></li>
            <li><a href="#">伯乐</a></li>
            <li><a href="#">人脉</a></li>
            <li><a href="#">公司</a></li>
            <li><a href="#">面经</a></li>
            <li><a href="#">工资</a></li>
        </ul>
        <a href="#" class="phone-link">手机版</a>
    </nav>
</header>
<div class="content">
    <div class="content-left"></div>
    <div class="content-right"></div>
</div>
<footer>
    
</footer>
<script>
    
</script>
</body>
</html>
 
* {
    margin: 0;
    padding:0;
}
body {
    background: #f5f7fa;
    font: 12px/1.5 'Microsoft Yahei',tahoma, arial, 'Hiragino Sans GB', sans-serif;
}
a {
    color: #08c;
    text-decoration: none;
}
ul,li {
    list-style-type: none;
}
header { 
    width: 960px; 
    height: auto;
    margin: 0 auto; 
    padding-top: 20px;
}
header .logo {
    width: 311px;
    height: 48px;
    float: left;
}
header .search {
    float: left;
    height: 34px;
    line-height: 34px;
    background: #6dd373;
    /*border:3px solid #6dd373;*/
    margin: 5px 0 0 25px;
    padding:3px 0 3px 3px;
    position: relative;
}
header .dropdown-toggle, header .search-ipt, header .search-btn { float: left;}
header .dropdown-toggle { background: #fff; }
header .dropdown-toggle .dropdown-default { 
    width: 56px; 
    height: 34px; 
    /*line-height: 34px;*/
    color: #666;
    font-size: 14px;
    margin-left: 8px;
    border-right: 1px solid #6dd373;
    background: url(http://f-1.tuzhan.com/6e8060b66027/p-2/m/2015/05/07/20/7d94225e959c47c482aa01f2a6f1a59f.jpg) no-repeat 38px -226px;
    cursor: pointer;
}
header .dropdown-toggle .diropdown-menu { display: none; position: absolute; top: 37px; left: 0px; width: 64px; border:3px solid #65b769; border-top: none;}
header .dropdown-toggle .diropdown-menu li { height: 30px; line-height: 30px; background: #fff; padding-left: 8px; font-size: 14px; color: #666; cursor: pointer;}
header .dropdown-toggle .diropdown-menu li:hover { background: #eee;}
header .search-ipt { width: 220px;  padding: 0 15px; background: #fff;} 
header .search-ipt input { height: 20px; border:none; outline: none; line-height: 20px; font-family: 'Microsoft Yahei';}
header .search-btn { }
header .search-btn button { width: 70px; height: 34px; outline: none; background: none; color: #fff; font-family: 'Microsoft Yahei'; font-size: 18px; text-align: center; border:none; cursor: pointer; }
header .search:hover { background: #65b769;}
header .head-top .ucenter  { float: right; margin-top: 15px;}
header .head-top .ucenter a { color: #08c; text-decoration: none;}
header .clearfloat { clear: both;}
nav { height: 40px; background: #6dd373; margin-top: 15px; border-radius: 2px;  line-height: 40px; }
nav ul li { float: left;}
nav ul li a { width: 90px; color: #fff; text-align: center;font-size: 16px; display: block;}
nav ul li.current a{ background: #25af60;}
nav ul li a:hover { background: #25af60;}
nav .phone-link { color: #fff; font-size: 16px; float: right; background: url(http://f-1.tuzhan.com/998a2a2cfde9/p-2/m/2015/05/07/20/85740ad4b22240c9912d999091039c79.jpg) no-repeat 55px 12px; padding-right: 30px;}
 
window.onload = function(){
    var dropdownDef = document.getElementById('dropdown-default');
    var diropdownMenu = document.getElementById('diropdown-menu');
    var dropdown = document.getElementById('dropdown-toggle');
    dropdownDef.onclick= function(){
        diropdownMenu.style.display = "block";
    };
    dropdown.onmouseout=function(){
        diropdownMenu.style.display = "none";
    };
    
};
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers