HTML+CSS实现小米官网顶部导航栏

 效果图

效果图

 

html代码

    
    
    
    


    

            

                

                    

                        小米官网
                        |
                        小米商城
                        |
                        MIUI
                        |
                        IoT
                        |
                        云服务
                        |
                        天星数科
                        |
                        有品
                        |
                        小爱开放平台
                        |
                        企业团购
                        |
                        资质证照
                        |
                        协议规则
                        |
                        
                            下载app
                            
                                

                                
                                
小米商城APP
                            
                        
                        |
                        Select Location
                    

                    

                        
                            购物车(0)
                        

                        

                            

                                购物车中还没有商品，赶紧选购吧!
                            
                        
                    

                    

                        登录
                        |
                        注册
                        |
                        
                            
                                消息通知
                            
                        
                    
                
            

css代码

index.css

ul{
    list-style: none;
}

*{
    margin:0px;
    padding:0px;
}
a{
    text-decoration: none;
    color: black;

}
div{
    display: block;
}

body{
    color: #333;
}

.topbar{
    position: relative;
    z-index: 30;
    height: 40px;
    font-size: 12px;
    color: #b0b0b0;
    background-color: #333;
}
.topbar a{
    color: #757575;
}

.menu-container{
    width: 1226px;
    margin-right: auto;
    margin-left: auto;
}
.topbar  .topbar-nav {
    float: left;
    height: 40px;
    line-height: 40px;
}

.menu-container a{
    color: #b0b0b0;
    line-height: 40px;
    display: inline-block;
}
.menu-container .sep {
    margin: 0 .3em;
    color: #424242;
}

.topbar .topbar-download {
    position: relative;
}
.topbar .topbar-download .appcode {
    position: absolute;
    top: 40px;
    left: 50%;
    width: 124px;
    height: 148px;
    background: #fff;
    margin-left: -55px;
    text-align: center;
    font-size: 14px;
    color: #333;
    line-height: 1;
    display: none;

}

.hover_white:hover{
    color: rgb(255,255,255);
}
.topbar-cart:hover .cart-mini{
    background-color: white;
    color: rgb(255,103,0);

}
.appcode>.sj{
    width: 0px;
    height: 0px;
    position: relative;
    border:10px solid  red;
    border-color: transparent transparent white transparent;
    left: 50px;
    top:-20px;

}


.appcode>img {
    position: relative;
    top:-20px
}
.text{
    position: relative;
    top:-20px;
}
.topbar .topbar-download img {
    display: block;
    margin: 18px auto 12px;
}

.topbar .topbar-download:hover  .appcode{
    display: block;
}

.topbar .topbar-cart {
    position: relative;
    float: right;
    width: 120px;
    height: 40px;
    margin-left: 15px;
    -webkit-transition: all .2s;
    transition: all .2s;
    font-size: 12px;
}

.topbar .cart-mini {
    position: relative;
    z-index: 32;
    display: block;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #b0b0b0;
    background: #424242;
}


.topbar .cart-mini {
    position: relative;
    z-index: 32;
    display: block;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #b0b0b0;
    background: #424242;
}


.topbar .cart-menu {
    position: absolute;
    right: 0;
    top: 40px;
    z-index: 31;
    width: 316px;
    height: 100px;
    color: #424242;
    background: #fff;
    display: none;
}


.topbar  .topbar-cart:hover  .cart-menu{
    display: block;
    border-left: 1px solid grey;
    border-bottom: 1px solid grey;
    border-right: 1px solid grey;
}

.topbar .cart-menu .menu-content {
    text-align: center;
    line-height: 100px;
}

.topbar .cart-menu .loading, .topbar .cart-menu .msg {
    text-align: center;
    line-height: 100px;
}

.topbar .cart-list {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.topbar .topbar-info {
    position: relative;
    float: right;
    height: 40px;
    line-height: 40px;
}

.topbar .topbar-info .link {
    padding: 0 5px;
    text-align: center;
}

.topbar .topbar-info .link, .topbar .topbar-info .message, .topbar .topbar-info .sep, .topbar .topbar-info .user {
    float: left;
}