话不多说直接上代码

首先看看小米商城的导航栏，如图： 通过实际测试可以知道，服务和社区不属于下拉菜单，除了这两个，剩下的全是下拉菜单，想成了一个下拉菜单组，一旦鼠标进入下拉菜单组，那么就会有下拉效果，通过也有过渡效果...

HTML部分

<div class="header"><div class="conten"></div><div class="left"><a href="">小米商城</a><span>|</span><a href="">MIUI</a><span>|</span><a href="">云服务</a><span>|</span><a href="">金融</a><span>|</span><a href="">有品</a><span>|</span><a href="" id="app">下载APP</a></div><div class="right"><a href="">小米商城</a><span>|</span><a href="">MIUI</a><span>|</span><a href="">云服务</a><span>|</span><a href="">购物车<img src="./Screenshot -06-22 225115.jpg" alt=""></a></div></div><div class="two"></div><div class="fix"><ul><li>小米商城</li><li>MIUI</li><li>云服务</li><li>金融</li><li>有品</li></ul></div><script>var sum = setInterval(function(){alert("记得点赞加关注哦，谢谢大哥们")},5000)<script/>

CSS部分

先确定清除基本的默认样式跟基本的css 样式

/* 清除默认样式 */ * {margin: 0; padding: 0; } input { outline: none; border: 0; }

/*清除浮动的样式 */ .clearfix::after, .clearfix::before { content: ""; display: block;

height: 0; visibility: hidden; clear: both; } .clearfix { *zoom: 1; } 基本的css样式

/* 浮动样式 */ .fl { float: left; } .fr { float: right; }

<style>* {margin: 0;padding: 0;}body{background-color: rgb(161, 152, 234);}.header {background-color: gray;width: 1600px;height: 40px;}.left>a{font-size: 12px;text-decoration: none;padding-right: 10px;color: aliceblue;}.left>a:hover{color: black;}.left>span{padding-right: 5px;color: rgb(247, 139, 139);height: 5px;}.left{padding-top: 8px;margin-left: 100px;width: 510px;}.right{width: 500px;float: right;margin-top: -20px;}.right>a{font-size: 12px;text-decoration: none;padding-right: 10px;color: aliceblue;}.right>span{padding-right: 5px;color: rgb(247, 139, 139);height: 5px;}.right>a:last-of-type{position: relative;}.right>a>img{width: 84px;height: 89px;position: absolute;top: 33px;right: -21px;display: none;transition: all 0.8s;}.right>a:last-of-type:hover>img{display: inline-block;transform: scale(1.1);}.right>a:hover{color: black;}.two{margin: 0 auto;background-color: aqua;width: 1226px;height: 400px;}.fix{width: 100px;height: 300px;background-color: blueviolet;position: fixed;right: 50%;margin-right: -713px;top: 50px;}.fix>ul>li{list-style: none;line-height: 59px;text-align: center;border-bottom: 1px solid black;}.fix>ul>li:last-of-type{border-bottom: 1px solid transparent;}.footer{margin-left: 600px;background-image: url(./Screenshot\ -06-22\ 225115.jpg);width: 600px;height: 800px;border: 1px solid red;/* background-repeat: repeat-x; *//* background-repeat: repeat-y;background-size: 100px; *//* background-size: contain; *//* background-size: cover; */background-size: 10%;background-repeat: no-repeat;/* background-position-x: 200px ;background-position-y: 100px; */background-position: 100px;}</style>

需要图片请私信哦

如果说下拉菜单触发时，没有过渡效果，那么会造成，下拉的效果正在执行，而内容先显现出来，这体验很不好，因此加了过度效果的话，可以实现下拉效果，内容显示同时执行，但是会带来的问题就是会引起闪烁效果，但是因为时间比较短，所以闪烁效果不明显，几乎可以忽略闪烁效果的影响

前端实现小米官网导航栏的实现 主要通过HTML+CSS完成效果有下拉列表和一个固定定位 中间色块用来辨识固定定位 效果更加明显