|
|
@@ -44,6 +44,12 @@
|
|
|
/* 取消下划线 */
|
|
|
text-decoration:none ;
|
|
|
font-size: 12px;
|
|
|
+ display: inline-block;
|
|
|
+ height: 40px;
|
|
|
+ vertical-align: top;
|
|
|
+ }
|
|
|
+ .top-nav a:hover{
|
|
|
+ color: #fff;
|
|
|
}
|
|
|
.top-nav .sep{
|
|
|
font-size: 12px;
|
|
|
@@ -69,6 +75,45 @@
|
|
|
text-align: center;
|
|
|
margin-left: 15px;
|
|
|
}
|
|
|
+ .top-nav .download-app-link{
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .top-nav .download-app-link:hover .download-app{
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ .top-nav .download-app-link .download-app{
|
|
|
+ width: 124px;
|
|
|
+ position: absolute;
|
|
|
+ top: 40px;
|
|
|
+ left: 50%;
|
|
|
+ margin-left: -62px;
|
|
|
+ box-shadow: 0 1px 5px #aaa;
|
|
|
+ text-align: center;
|
|
|
+ padding-top: 10px;
|
|
|
+ line-height: 20px;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .top-nav .download-app-link .download-app::before{
|
|
|
+ content: "";
|
|
|
+ display: block;
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ border-left: 10px solid transparent;
|
|
|
+ border-right: 10px solid transparent;
|
|
|
+ border-bottom: 10px solid #fff;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ margin-left: -10px;
|
|
|
+ top:-10px;
|
|
|
+ }
|
|
|
+ .top-nav .download-app-link .download-app img{
|
|
|
+ width: 104px;
|
|
|
+ }
|
|
|
+ .top-nav .download-app-link .download-app p{
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
/* 顶部导航栏 end */
|
|
|
</style>
|
|
|
</head>
|
|
|
@@ -98,7 +143,13 @@
|
|
|
<span class="sep">|</span>
|
|
|
<a href="#">协议规则</a>
|
|
|
<span class="sep">|</span>
|
|
|
- <a href="#">下载app</a>
|
|
|
+ <a href="#" class="download-app-link">
|
|
|
+ 下载app
|
|
|
+ <div class="download-app">
|
|
|
+ <img src="./img/xiaomi/download.png" alt="download">
|
|
|
+ <p>小米商城App</p>
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
<span class="sep">|</span>
|
|
|
<a href="#">Select Location</a>
|
|
|
</div>
|
