.Topbar
  .Topbar__logo
  .Topbar__nav
    a.Topbar__link href="#check" tabindex="1" Accueil
    .Topbar__link.has-dropdown tabindex="1"
      | Blog
      .dropdown
        a.Topbar__link href="#last" tabindex="1" Dernier articles
        a.Topbar__link href="#authors" tabindex="1" Tous les auteurs
    a.Topbar__link href="#contact" tabindex="1" Contact
View Compiled
body 
  background: #0142bb

h2 
  margin-top: 0
  
a 
  color: inherit

.Topbar
  position: fixed
  top: 0
  left: 0
  right: 0
  height: 3.5em
  display: flex
  flex-flow: row
  align-items: center
  gap: 1em
  padding: 0 1em
  background-color: #fff
  border-radius: 0.5em
  margin: 1em
  box-shadow: 0 5px 30px rgba(#fff,0.05)
  
  &__nav 
    display: flex
    flex-flow: row
    align-items: center
    gap: 1.5em
    margin-left: auto
    margin-right: 1em
  
  &__logo 
    height: 42px
    width: 68px
    background: rgba(#0142bb, 0.3)
    border-radius: 0.325em
  

.has-dropdown
  position: relative
  &:after
    content: '▼'
    opacity: 0.7
    font-size: 0.75em
  
.dropdown
  position: absolute
  right: 0
  top: 100%
  width: 8em
  display: flex
  flex-flow: column
  align-items: flex-end
  padding: 1em
  gap: 0.5em
  background-color: #fff
  border-radius: 0.5em
  box-shadow: 0 2px 3px rgba(#000,0.1), 0 5px 30px rgba(0,0,0,0.05)
  transition: all 0.16s ease
  
  opacity: 0
  transform-origin: top
  transform: scaleY(0)

  .has-dropdown:focus &,
  .has-dropdown:hover &,
  &:focus-within
    opacity: 1
    transform: none
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.