/* ===================================
   版型
   ===================================*/
* {
  box-sizing: border-box;
}  
ul {
  padding 0
  a {
    display: inline-block;
    text-decoration: none;
    color: #666;
  }	
}	
 /* ===================================
   布局樣式
   ===================================*/
.menu {
    max-width: 300px;
    margin: 0 auto;
    list-style-type: none ;
}	
/* ===================================
   動態效果
   ===================================*/
.drop-down {
  position: relative;
}  
.submenu {
  position: relative;
  opacity: 0;
  width: 100%;
  z-index: 8
  transition: opacity .5s ease;
}
.submenu-item {
  display: block;
  height: 0px;
  overflow: hidden;
  transition: height .5s ease;
}  
.drop-down:hover {
  .submenu {
    opacity: 1;
  }	
  .submenu-item {
    overflow: visible;
    height: 30px;
  }
}  
    
 /* ===================================
   視覺樣式
   ===================================*/
.item {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
}  

.item:hover {
  background: #ddd;
}
  
.submenu-item {
  background #333;
  color: #eee;
  width: 100%;
  padding-left: 20px;
  line-height: 30px;
}  
.submenu-item:hover {
  background: #555;
}  
.now {
  .item (
    background: #ddd;
  }	
  .submenu {
    opacity: 1;
  }	
  .submenu-item {
    background: #555;
    overflow: visible;
    height: 30px;
  }
}