京东头部导航


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <link rel="stylesheet" href="./reset.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
head>

<style type="text/css">
    body{
        font: 12px/1.5 '微软雅黑';
        color: #999;
        height: 2000px;
    }
    .top-bar-wrapper{
        height: 30px;
        line-height: 30px;
        background: #E3E4E5;
        border: solid 1px #DDDDDD;
        border-top: 0;
    }
    .top-tar{
        width: 1190px;
        height: 30px;
        margin: 0 auto;
    }
    .top-tar a{
        text-decoration: none;
        color: #999;
    }
    .top-tar a:hover, .top-tar .highlight{
        color: #FF0000;
    }

    /*左侧导航*/
    .location{
        float: left;
        height: 30px;
    }
    .location i{
        color: #F10215;
        font-size: 16px;
    }
    .location .current{
        height: 30px;
        padding: 0 7px;
        border: solid 1px transparent;
        border-bottom: 0;
        position: relative;
        z-index: 2;
    }
    /*鼠标悬停一定要给父元素*/
    .location:hover .current{
        border-color: #CCCCCC;
        background: #FFFFFF;
    }
    .location:hover .city-list{
        display: block;
    }
    .location .city-list{
        position: absolute;
        top: 30px;
        width: 320px;
        height: 460px;
        background: #FFFFFF;
        border: solid 1px #CCCCCC;
        display: none;
    }
    /*右侧导航*/
    .shortcut{
        float: right;
    }
    .shortcut li{
        float: left;
    }
    /*设置内边距*/
    .shortcut li{
        padding: 0 7px;
    }
    /*设置分割线*/
    .shortcut .line{
        width: 1px;
        height: 10px;
        background: #999;
        margin: 10px 5px 0 5px;
        padding: 0;
    }
    /*设置字体图标*/
    .fa-angle-down{
        font-size: 10px;
    }

style>

<body>

<div class="top-bar-wrapper">
    
    <div class="top-tar">
        
        <div class="location">
            <div class="current">
                <i class="fa fa-map-marker">i>
                <a href="javascript:;">北京a>
            div>
            
            <div class="city-list">

            div>
        div>
        
        <ul class="shortcut">
            <li>
                <a href="">你好,请登录a>
                <a class="highlight" href="">免费注册a>
            li>
            <li class="line">li>
            <li><a href="">我的订单a>li>
            <li class="line">li>
            <li>
                <a href="">我的京东a>
                <i class="fa fa-angle-down">i>
            li>
            <li class="line">li>
            <li>
                <a href="">京东会员a>
                <i>i>
            li>
            <li class="line">li>
            <li>
                <a class="highlight" href="">企业采购a>
                <i class="fa fa-angle-down">i>
            li>
            <li class="line">li>
            <li>
                <span>客户服务span>
                <i class="fa fa-angle-down">i>
            li>
            <li class="line">li>
            <li>
                <span>网站导航span>
                <i class="fa fa-angle-down">i>
            li>
            <li class="line">li>
            <li><span>手机京东span>li>
        ul>

    div>
div>
body>

html>

细节加强

hover伪类,激活一个元素可以使其兄弟元素或子元素改变

第一次是用,-margin上移下拉框,导致一个问题,该下拉框属于溢出元素,会被下边父级同级元素覆盖
使用-margin上移时,可以覆盖其他元素,但遮盖不了浮动元素和display:inlian-block元素

你可能感兴趣的:(布局练习)