Pure CSS centered hover dropdown menu

index.html

<header id = 'header' class = 'default-header'>
  <div id = 'header-bar' class = 'container'>
    <a href = "#" class = >
      <img class = 'hidden-simple logo' src = "http://54.249.224.103/assets/images/BEANBROTHERS_white.png">
      <img class = 'hidden-default logo' src = "http://54.249.224.103/assets/images/BEANBROTHERS.png">
    </a>
    <ul class = 'right-nav'>
      <li class = 'hidden-simple'><a class = 'hire' href = "#">채용</a></li>
      <li class = 'hidden-simple'><a class = 'business' href = "http://b.beanbrothers.co.kr/" data-bypass>비즈니스</a></li>
      <li class = 'hidden-simple'><a class = 'event' href = "#">이벤트</a></li>
      <li class="hover-nav">
        <!--<a class = 'login' data-bypass data-hover='dropdown'>로그인</a>-->
        <a class = 'user' href = "#">이름</a>
        <div class = 'hover-menu-wrapper'>
          <div class = 'hover-menu'>
            <ul class="hover-menu-list">
              <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>
              <hr>
            </ul>
          </div>
        </div>
      </li>
      <li class="hover-nav hidden-simple">
        <a class = 'cart' href = "#" data-hover="dropdown">장바구니</a>
        <div class = 'hover-menu-wrapper'>
          <div class = 'hover-menu'>
            <ul class="hover-menu-list">
              <li><a>담긴 상품이 없습니다.</a></li>
              <hr>
            </ul>
          </div>
        </div>
      </li>
    </ul>
    <ul class = 'left-nav'>
      <li class="hover-nav">
        <a class = 'cafe' href = "#">카페</a>
        <div class = 'hover-menu-wrapper'>
          <div class = 'hover-menu'>
            <ul class="hover-menu-list">
              <li><a href = "#">합정 HQ</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>
              <hr>
            </ul>
          </div>
        </div>
      </li>
      <li><a class = 'goods' href = "#">상품</a></li>
      <li class = 'hidden-simple'><a class = 'subscribe' href = "#">커피구독</a></li>
      <li class="hover-nav hidden-simple">
        <a class = 'guide' href = "#">가이드</a>
        <div class = 'hover-menu-wrapper'>
          <div class = 'hover-menu'>
            <ul class="hover-menu-list">
              <li><a href = "#">스토리</a></li>
              <li><a href = "#">추출팁</a></li>
              <li><a href = "#">레시피</a></li>
              <hr>
            </ul>
          </div>
        </div>
      </li>
      <li class = 'hidden-simple'><a class = 'class' href = "#">클래스</a></li>
    </ul>
  </div>
</header>
<div id = 'main'>
  
</div>

Pure CSS centered hover dropdown menu.markdown

Pure CSS centered hover dropdown menu

Beanbrothers season3 header

A Pen by zeakd on CodePen.

License.

script.js

// it's just header changer

(function(){
    var $window = $(window)
    var $header = $('#header');
    $window.load(function(){
        $window.scroll(function(){
            if($window.scrollTop() > 0){
                $header.removeClass('default-header').addClass('simple-header');
            } else {
                $header.removeClass('simple-header').addClass('default-header');
            }
        });
    });
}());

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

$zindex-header:                   1000;
$zindex-banner:                   100;
$zindex-paper:                    200;
$zindex-footer:                   100;

$item-gutter:                     40px;


$header-height:                   50px;

$default-header-color:            white;
$default-header-sub-color:        #ddd;
$default-header-bg:               black;

$simple-header-color:             black;
$simple-header-sub-color:         #333;
$simple-header-bg:                white;

$logo-height:                     25px;
$logo-margin-top:                 ($header-height - $logo-height)/2;

$mobile-toggle-size:              $logo-height * 0.8;
$toggle-margin-top:               ($header-height - $mobile-toggle-size)/2;

$desktop-nav-font-size:           14px;
$desktop-nav-line-height:         20px;

$desktop-menu-line-height:        $header-height;

$dropdown-list-height:            30px;
$dropdown-list-padding:           5px;
$dropdown-list-line-height:       $dropdown-list-height - 2 * $dropdown-list-padding;

$mobile-nav-font-size:            14px;
$mobile-nav-padding:              10px;
$mobile-nav-hr-height:            30px;
$mobile-nav-li-height:            $mobile-nav-font-size + 2*$mobile-nav-padding;
$mobile-nav-phone-height:         10 * ($mobile-nav-li-height) + 2 * $mobile-nav-hr-height;
$mobile-nav-tablet-height:        5 * ($mobile-nav-li-height) + 2 * $mobile-nav-hr-height;

$hover-menu-width :               150px;

$simple-header-border-color:      #dddddd;
$simple-header-border:            1px;

//_reset
ul {
  list-style : none;
  padding: 0;
}
a {
  text-decoration: none !important;
}

//_header
#header {
  transition : background 0.5s;

  font-family: 'Apple SD Gothic Neo', NanumBarunGothic, '나눔고딕', 'NG', 'Malgun Gothic', dotum, sans-serif;
  font-size: $desktop-nav-font-size;
  font-weight: lighter;
  line-height: $desktop-nav-line-height;

  z-index: $zindex-header;
  height: $header-height;
  position: fixed;
  width : 100%;
  top : 0;

  .logo {
    height : $logo-height;
    margin-top: $logo-margin-top;
    position: absolute;
    display: block;
  }
  .nav {
    //overide bootstrap .nav

    // hide for season2
    //@include breakpoint(phone){
    //  display: none;
    //}
    //@include breakpoint(desktop){
    //  display: block;
    //}
    height : 100%;
    margin-bottom: 0;
    margin-top: 0;
    padding-left: 0; // Override default ul/ol
    list-style: none;
    text-decoration: none;

    >li {
      height : 100%;
      //float : left;

      display: inline-block;
      text-align: center;
      position: relative;
      &.hover-nav {
        &:hover {
          .hover-menu-list {
            top: 0;
            height: auto;
            visibility: visible;
          }
        }
      }
      >a {
        width : 80px;
        //padding-top:    10px;
        //padding-bottom: 10px;
        line-height: $desktop-menu-line-height;
        display: inline-block;
        width : 80px;
        //z-index: $zindex-hover-nav;
        &:focus,
        &:hover {
          //padding : 50px;
          background-color: transparent;
          //z-index: $zindex-hover-nav;
        }
      }
    }
  }
  .hover-menu {
    // hm-wrapper > hm > hm-list 총 세개의 블록이 필요한데,
    // 이는 hover-menu가 가운데정렬되기 위해서 꼭 필요한 형태이다.
    // hm-wrapper는 inline-block을 통해 menu의 왼쪽끝이 가운데로 오게끔 하고
    // hm에 left -50%를 줌으로써 블록 전체가 가운데 정렬이 된다.서
    // 이때 블록을 두개만 사용하여 hm에 transition을 주면 hm이 nav를 일부분 가리게 되어
    // tansition되는 블록과, overflow : hidden을 적용하는 블록을 나누어
    // hm-wrapper와 hm은 블록이 가운데정렬되기 위해,
    // hm 과 hm-list는 transition 될 때 메뉴가 nav를 가리지않기 위해 필요하다.

    &-wrapper {
      display: inline-block;
      position: absolute;
      top : $header-height;
      visibility: hidden;
    }
    top: 0;
    width : $hover-menu-width;

    // nav를 가리는 것 방지
    overflow-y: hidden;
    // 가운데 맞춤
    left: -50%;
    position: relative;

    &-list {
      width: 100%;
      position: relative;
      transition : top 0.5s;

      top : -100px;
      visibility: hidden;

      li {
        &:first-child {
          padding-top : 15px;
        }
        line-height: $dropdown-list-line-height;
        padding : $dropdown-list-padding 0;
      }
      hr {
        border-bottom: 0;
        border-left: 0;
        border-right: 0;
        padding-bottom: $dropdown-list-height/2;
        margin : $dropdown-list-padding 10px 0 10px;
      }
    }
  }


  //menus
  .left-nav {
    @extend .nav;
    float: left;

  }
  .right-nav {
    @extend .nav;
    float: right;
  }
  &.simple-header {
    background: white;
    border-bottom: solid $simple-header-border $simple-header-border-color;
    .hover-menu {
      &-wrapper {
        padding-top: 1px;
      }
      &-list {
        background-color: $simple-header-bg;
      }
    }


    a {
      color: $simple-header-sub-color;
      &:hover {
        color: $simple-header-color;
      }
    }
    .hidden-simple {
      display: none;
      visibility: hidden;
    }
    .logo {
      left: 0; right: 0;
      margin-left: auto;
      margin-right: auto;

      float: left;
      left: auto; right: auto;
      // replace for season2
      //@media screen and (min-width: $screen-desktop) {
      //  float: left;
      //  left: auto; right: auto;
      //}
    }
    #mobile-toggle {
      //background-color: $simple-header-bg;
      span,
      span:before,
      span:after {
        background-color: $simple-header-sub-color;
      }
    }
    #mobile-nav {
      background-color: $simple-header-bg;
    }
    .left-nav {
      float: right;
    }

  }
  &.default-header{
    background-color: $default-header-bg;
    a {
      color: $default-header-sub-color;
      &:hover {
        color: $default-header-color;
      }
    }
    .hover-menu-list {
      background-color: $default-header-bg;
    }
    .hidden-default {
      display: none;
    }
    //.default {
    //  display: block;
    //}
    .logo {
      left: 0; right: 0;
      margin-left: auto;
      margin-right: auto;
    }
    #mobile-toggle {
      //background-color: de;
      span,
      span:before,
      span:after {
        background-color: $default-header-sub-color;
      }
    }
    #mobile-nav {
      background-color: $default-header-bg;
    }
    //overide nav
    .nav {
      >li {
        >a {
          &:hover {
            //background-color: #333;
          }
        }
      }
    }
  }
}


#main {
  min-height : 1000px;
}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />