CSS3 悬停时自动滑出的二级菜单

Sliding Secondary Navigation with CSS

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1538
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import url(https://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900);
body {
    background: #13ffae;
    font-family: 'Raleway', sans-serif;
}
.nav {
    background: white;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding-left: 1rem;
    padding-right: 1rem;
    z-index: 100;
}
.nav__title {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    font-weight: 800;
    padding: 1rem 0;
}
.nav__item {
    font-weight: 200;
    padding: 1rem;
}
.nav__item::after {
    border-style: solid;
    border-width: 0.19em 0.19em 0 0;
    content: '';
    display: inline-block;
    height: 0.25em;
    left: 0.25em;
    position: relative;
    top: 0.19em;
    -webkit-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg);
    vertical-align: top;
    width: 0.25em;
}
.nav__item:hover {
    background: #fffd13;
    color: #1a1a1a;
}
.nav__item:hover .dropdown {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}
.dropdown {
    background: #fffd13;
    color: #1a1a1a;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    left: 0;
    padding: 1rem;
    position: absolute;
    right: 0;
    top: 48px;
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
    -webkit-transition: 0.25s;
    transition: 0.25s;
    z-index: -1;
}
.dropdown__column {
    margin-right: 4rem;
}
.dropdown__title {
    color: #422400;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}
.dropdown__link {
    cursor: pointer;
    display: block;
    font-weight: 300;
    line-height: 1.4;
    -webkit-transition: 0.25s;
    transition: 0.25s;
}
.dropdown__link::after {
    background: #553600;
    content: '';
    display: block;
    height: 1px;
    -webkit-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    transform: translateY(-2px);
    -webkit-transition: 0.25s;
    transition: 0.25s;
    width: 0;
}
.dropdown__link:hover::after {
    width: 100%;
}

HTML

<div class='nav'>
    <div class='nav__title'>
        Sliding secondary navigation with CSS
    </div>
    <span class='nav__item'>
    Beverages
    <div class='dropdown'>
      <span class='dropdown__column'>
        <h1 class='dropdown__title'>
          Our Coffees
        </h1>
        <a class='dropdown__link'>
          Whole Bean Coffee
        </a>
        <a class='dropdown__link'>
          Ground Coffee
        </a>
        <a class='dropdown__link'>
          Starbucks VIA®
        </a>
        <a class='dropdown__link'>
          K-Cup® Packs
        </a>
        <a class='dropdown__link'>
          Verismo™ System Pods
        </a>
        <a class='dropdown__link'>
          Portion Packs
        </a>
        <a class='dropdown__link'>
          View All Coffees
        </a>
      </span>
    <span class='dropdown__column'>
        <h1 class='dropdown__title'>
          Find Your Perfect Coffee
        </h1>
        <a class='dropdown__link'>
          Starbucks Reserve® Roastery & Tasting Room
        </a>
        <a class='dropdown__link'>
          Starbucks Reserve® Coffees
        </a>
        <a class='dropdown__link'>
          Starbucks Reserve® Roastery Subscriptions
        </a>
      </span>
    <span class='dropdown__column'>
        <h1 class='dropdown__title'>
          Espresso Beverages
        </h1>
        <a class='dropdown__link'>
          Doppio
        </a>
        <a class='dropdown__link'>
          Americano
        </a>
        <a class='dropdown__link'>
          Espresso Macchiato
        </a>
        <a class='dropdown__link'>
          Flat White
        </a>
        <a class='dropdown__link'>
          Cappuccino
        </a>
        <a class='dropdown__link'>
          Latte
        </a>
        <a class='dropdown__link'>
          Caramel Macchiato
        </a>
        <a class='dropdown__link'>
          Mocha
        </a>
      </span>
    <span class='dropdown__column'>
        <h1 class='dropdown__title'>
          How to Brew Great Coffee
        </h1>
        <a class='dropdown__link'>
          Coffee Press
        </a>
        <a class='dropdown__link'>
          Pour-Over
        </a>
        <a class='dropdown__link'>
          Iced Pour-Over
        </a>
        <a class='dropdown__link'>
          Coffee Brewer
        </a>
        <a class='dropdown__link'>
          Verismo® System
        </a>
      </span>
    <span class='dropdown__column'>
        <h1 class='dropdown__title'>
          Ethical Sourcing
        </h1>
        <a class='dropdown__link'>
          Coffee
        </a>
        <a class='dropdown__link'>
          Farming Communities
        </a>
        <a class='dropdown__link'>
          Learn More
        </a>
        <a class='dropdown__link'>
          Starbucks At Home
        </a>
        <a class='dropdown__link'>
          Learn About the Starbucks Roast
        </a>
        <a class='dropdown__link'>
          Learn About Coffee Forms
        </a>
        <a class='dropdown__link'>
          Flavors in Your Cup
        </a>
        <a class='dropdown__link'>
          The Clover® Brewing System
        </a>
        <a class='dropdown__link'>
          My Starbucks Idea
        </a>
        <a class='dropdown__link'>
          Coffee FAQs
        </a>
      </span>
</div>
</span>
<span class='nav__item'>
    Food
    <div class='dropdown'>
      <span class='dropdown__column'>
        <h1 class='dropdown__title'>
          Bakery
        </h1>
        <a class='dropdown__link'>
          Starbucks Petites
        </a>
        <a class='dropdown__link'>
          Bistro Boxes
        </a>
        <a class='dropdown__link'>
          Hot Breakfast
        </a>
        <a class='dropdown__link'>
          Sandwiches, Paninis & Salads
        </a>
        <a class='dropdown__link'>
          Yogurt and Fruit
        </a>
        <a class='dropdown__link'>
          La Boulange
        </a>
      </span>
</div>
</span>
</div>

Sliding Secondary Navigation with CSS

编辑器支持Emmet

快捷键

Sliding Secondary Navigation with CSS

CSS3 带悬停信息提示框的水平时间线（紫红色调渐变背景）

CSS3 简化的京东理财红包弹出框（带光线转动背景）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：