实例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>定位练习</title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<!-- <link rel="stylesheet" type="text/css" href="css/index.css" /> -->
<style>
.clearfix::after {
content: "";
display: block;
clear: both;
}
.header {
background: #e3e4e5;
color: #999;
height: 40px;
line-height: 40px;
position: fixed;
width: 100%;
left: 0;
top: 0;
}
.header .topnav>li {
float: left;
margin: 0 20px;
width: 150px;
text-align: center;
height: 40px;
box-sizing: border-box;
position: relative;
}
.header .topnav>li:hover{
background: #fff;
border: 2px solid #ccc;
border-bottom: none;
line-height: 36px;
background: #fff;
}
.header .topnav>li .submenu{
text-align: left;
line-height: 1.5;
width: 300px;
/* 不生成盒子 */
display: none;
border: 2px solid #ccc;
box-sizing: border-box;
position: absolute;
right: -2px;
background: #fff;
}
.header .topnav>li:hover .submenu{
display: block;
padding: 10px;
}
.header .topnav>li:hover::after{
content: "";
position: absolute;
width: 100%;
height: 5px;
background: red;
bottom: 0;
left: 0;
background: #fff;
}
.header .topnav>li .submenu .left{
font-size: 14px;
color: #666;
font-weight: 700;
}
.header .topnav>li .submenu .right li{
float: left;
width: 82px;
line-height: 2;
}
</style>
</head>
<body>
<header class="header">
<ul class="topnav clearfix">
<li><a href="">我的京东</a></li>
<li><a href="">京东会员</a></li>
<li><a href="">企业采购</a></li>
<li>
<a href="">客户服务</a>
<div class="submenu">
<div class="left">客户:</div>
<ul class="right">
<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>
<li><a href="">金融资讯</a></li>
<li><a href="">全球售客户</a></li>
</ul>
<!-- <div class="right">商户:</div>
<ul class="left">
<li>帮助中心</li>
<li>在线客户</li>
<li>售后服务</li>
<li>意见建议</li>
<li>电话服务</li>
<li>客户邮箱</li>
<li>金融资讯</li>
<li>全球售客户</li>
</ul> -->
</div>
</li>
<li><a href="">网站导航</a></li>
</ul>
<div style="width: 3500ox; background: lightblue;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias ex at necessitatibus saepe rem minima ab
laborum beatae nam inventore culpa ducimus voluptas voluptatibus id facilis placeat harum officia eius iure aperiam
modi consectetur asperiores in voluptatum facere. Provident libero eveniet rem ad sit similique. Suscipit fugit
maiores possimus reiciendis corporis illo exercitationem hic sunt veritatis temporibus omnis maxime voluptates
dolorem. Natus ducimus quos aliquid magnam et impedit quam blanditiis modi! Libero fugiat nam sapiente illo ipsum
voluptatibus aliquid illum amet cupiditate reprehenderit quia deleniti fugit tempore error provident ratione hic
magni consequatur eveniet veritatis! Molestias odio facilis excepturi eveniet ab minima voluptate ipsam totam
consectetur aliquam cupiditate repellat ad ea iure ducimus praesentium atque aut architecto impedit mollitia
dignissimos quo omnis et quis veniam enim debitis molestiae officia eius ipsum consequatur amet provident aliquid
repudiandae aspernatur nesciunt perferendis ut dolore doloribus itaque. Minima itaque debitis quo facere quaerat
excepturi dolore dolor id error nisi porro inventore? Explicabo sunt pariatur officiis error itaque modi voluptate
alias optio quia inventore cum vitae laudantium quaerat aliquam repudiandae delectus beatae et eum dicta ipsam
necessitatibus eius voluptas corporis odit nemo temporibus ipsum rem id rerum quae quos eos in animi suscipit autem
molestias perferendis magnam numquam ex dolores. Cum autem illum blanditiis officiis aspernatur? Dolorum sed
tempore aspernatur obcaecati rem assumenda dolores autem. Vitae sequi fugiat deserunt pariatur ut qui nisi
voluptatibus nostrum eligendi et totam voluptates illo similique ex harum possimus officia nesciunt repudiandae
consectetur at quidem ea blanditiis ullam dolorem ipsa perferendis ad suscipit! Nihil odio et. Laudantium sequi
fugiat hic eveniet reprehenderit ea eos fugit optio repellendus facere? Minus dicta rem aspernatur et molestiae
vitae nemo blanditiis aliquid quisquam officiis voluptate neque accusantium ducimus. Expedita voluptas ea totam
dolor nobis illo accusamus cumque voluptatum sit placeat assumenda fugit esse quasi molestias omnis nihil molestiae
est perferendis voluptatibus iste. Nulla delectus rerum illo omnis animi numquam voluptas necessitatibus velit
possimus atque sunt unde eos eaque. Perferendis magnam distinctio necessitatibus animi at doloremque quidem debitis
voluptatem. Deserunt praesentium non ab repellat magnam nihil quam est qui beatae facere ipsum fugiat sequi
voluptatibus culpa veniam eveniet sapiente quod deleniti veritatis voluptate possimus ea unde corporis dolorum
repellendus asperiores provident. Perferendis fugiat animi quasi eaque aperiam totam repudiandae aut blanditiis
alias ipsam consectetur architecto quibusdam at maiores nobis enim laudantium? A doloribus natus ea odit explicabo
ad at illo omnis ullam enim hic nesciunt voluptatum dolore deserunt vitae modi eos rem deleniti perferendis iste
earum quibusdam architecto officia asperiores blanditiis totam maiores commodi? Reprehenderit in possimus quaerat
incidunt fuga blanditiis sequi magni sunt illo quam corporis dolore eaque illum labore dolor totam aliquid alias
adipisci voluptates amet. Quibusdam odio itaque facere! Fugit cupiditate consequuntur odit aliquam tenetur dolores
doloribus non pariatur animi quia neque accusamus ipsa quidem obcaecati expedita eveniet atque! Molestiae ex a
dolore accusantium consequuntur omnis veniam numquam consectetur illum quis quae repellat blanditiis minima
laboriosam alias ratione debitis possimus aut deserunt harum quas. Ipsum fugit sit quos repellendus voluptates
quibusdam reiciendis magni accusantium dolore dignissimos aliquid enim doloremque magnam iure nam similique ipsam.
Eligendi tenetur fuga fugiat doloremque doloribus aliquam culpa ullam optio odio cumque facere cupiditate ratione
et ducimus obcaecati architecto illum error quaerat! Nulla sit dicta asperiores dolor veniam nihil beatae delectus
in minus provident sunt tenetur molestias optio placeat amet molestiae odit error sint at magnam voluptas
repellendus facilis animi quisquam facere consequuntur dolores maiores est porro. Similique voluptas asperiores
consequatur mollitia sequi eaque ullam ipsam doloremque iusto repellat id hic at sint facilis porro accusantium
illo. Possimus nemo esse adipisci incidunt quibusdam? Sed cumque tenetur debitis facere quibusdam dolore mollitia
laudantium a? Ullam molestiae magnam ipsum cupiditate iusto reiciendis deserunt eius necessitatibus. Perferendis
aspernatur laboriosam quae ipsum quas voluptates accusantium hic cupiditate recusandae deleniti distinctio saepe.
Id enim iste reprehenderit voluptas corporis itaque labore laborum asperiores at delectus repudiandae eum quas
nulla tempora voluptatum. Rem omnis vel a excepturi inventore facilis non nam placeat ducimus illum earum id
necessitatibus sapiente commodi nihil libero explicabo. Velit quis voluptatum culpa cupiditate totam laborum
similique asperiores eius excepturi distinctio consequuntur praesentium ipsum tempora nostrum amet tempore
voluptates blanditiis ipsam magnam reiciendis doloremque quisquam saepe iusto ullam aliquid minus iste iure
necessitatibus modi ratione? Ut temporibus optio quasi nulla saepe ipsa totam. Aliquid perspiciatis quibusdam sint
dolorum eum deserunt id nostrum voluptatem nobis explicabo obcaecati incidunt mollitia aperiam esse dignissimos
maiores quis minus sunt voluptas in! Tenetur fugiat molestias odit odio beatae nostrum itaque hic eaque dolores
sapiente officia reiciendis distinctio aspernatur. Tempore repellendus voluptate aut iusto voluptatem ullam esse
optio veritatis fuga error recusandae at dolorem eum culpa rem. Aperiam nisi vel eum eligendi debitis error
suscipit ipsum laborum soluta modi quis qui quam dolore libero unde. Cupiditate non debitis minus deleniti rem in
nobis modi quam natus officiis impedit numquam veritatis eligendi ea a corporis iusto adipisci soluta dicta magnam
totam incidunt harum nihil excepturi ab cum amet quo sit architecto ipsum illo porro delectus consequuntur! Debitis
in architecto non consectetur eveniet quia ducimus nemo sit eaque quisquam ea delectus dolor nobis voluptate cum
perferendis vitae. A ab quas necessitatibus culpa eos nam adipisci nostrum tempore ad aspernatur aut laboriosam
placeat architecto at consectetur quibusdam maiores eveniet cumque autem odit est rem eius itaque officia dicta.
Sapiente quaerat corporis voluptas debitis voluptatem necessitatibus odio suscipit sint fugit doloremque id eos
totam dolores! Commodi ex rem quidem officiis facere rerum adipisci numquam aspernatur enim tenetur itaque sint hic
porro recusandae magni ratione quis tempore consequatur optio ad nostrum delectus assumenda obcaecati cupiditate
accusamus dolores omnis totam quo aperiam ducimus? Deleniti laborum harum in nam eius ea facilis delectus error.
Sit sunt et sint vitae esse nisi alias nostrum vero nam iusto animi voluptate neque soluta eos placeat magni
officiis deserunt quae illo exercitationem suscipit saepe libero eveniet dolorum facilis recusandae laboriosam
assumenda eius repellendus impedit? Modi rem fuga explicabo error! Cupiditate hic porro natus et inventore quidem
non voluptate nulla commodi quis veritatis sapiente assumenda voluptates! Ab quibusdam doloremque porro.
</div>
</header>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
