메뉴에서 항목을 숨길 수 없습니다.

Question

그래서 간단한 NAV가 생겼습니다. 화면이 작을 때만 나타나는 버거 아이콘을 추가하려고합니다.

현재 내 버거는 메뉴라는 단어이지만 기본적으로 숨겨져 있습니다. 그러나 내 코드는 디스플레이에 의해 무시됩니다. 인라인은 코드의 앞부분에 있습니다. 비록 내가 추가한다고해도!

아무 것도 메뉴 요소를 숨길 수있는 방법에 대한 아이디어가 있습니까?

JSFIDDLE https://jsfiddle.net/Lwwgpx9k/

내 코드는 다음과 같습니다.

.html 중에서

<div class="nav"> 
    <ul> 
    <li class="hidden">Menu</li> 
    <li class="home"><a class="active" href="#">Home</a></li> 
    <li class="gallery"><a href="#">Gallery</a></li> 
    <li class="tutorials"><a href="#">Tutorials</a></li> 
    <li class="about"><a href="#">About</a></li> 
    </ul> 
</div> 

.CSS

body { 
    background: #333; 
} 

.nav ul { 
    color: #e6e9e9; 
    position: fixed; 
    top: 60px; 
    padding-left: 5%; 
    text-align: center; 
    margin: 0; 
} 

.nav ul li { 
    line-height: 35px; 
    float: left; 
    width: 120px; 
    display: inline-block; 
    margin-right: -4px; 
    position: relative; 
    padding: 0px 10px; 
    cursor: pointer; 
    -webkit-transition: all 0.2s; 
    -moz-transition: all 0.2s; 
    -ms-transition: all 0.2s; 
    -o-transition: all 0.2s; 
    transition: all 0.2s; 
} 

.nav ul li:hover { 
    background: #6A1B9A; 
    color: #e6e9e9; 
} 

.nav ul li ul { 
    padding: 0; 
    position: absolute; 
    top: 35px; 
    left: 0; 
    text-align: left; 
    display: none; 
    opacity: 0; 
    visibility: hidden; 
    -webkit-transiton: opacity 0.5s; 
    -moz-transition: opacity 0.5s; 
    -ms-transition: opacity 0.5s; 
    -o-transition: opacity 0.5s; 
    -transition: opacity 0.5s; 
} 

.nav ul li ul li { 
    width: 200px; 
    background: #555; 
    display: block; 
    color: #e6e9e9; 
} 

.nav ul li ul li:hover { 
    background: #6A1B9A; 
} 

.nav ul li:hover ul { 
    display: block; 
    opacity: 1; 
    visibility: visible; 
    transition-delay: 2s; 
    -webkit-transition-delay: 2s; 
    /* Safari */ 
} 

.nav a { 
    font-size: 1.4em; 
    text-decoration: none; 
    color: #e6e9e9; 
    display: block; 
    transition: .3s background-color; 
} 

.nav a:hover { 
    background-color: #6A1B9A; 
    color: #e6e9e9; 
} 

.nav a.active { 
    background-color: #6A1B9A; 
    color: #e6e9e9; 
    cursor: default; 
} 

.nav ul { 
    color: #e6e9e9; 
    position: fixed; 
    top: 60px; 
    padding-left: 5%; 
    text-align: center; 
    margin: 0; 
} 

.nav ul li { 
    line-height: 35px; 
    float: left; 
    width: 120px; 
    display: inline-block; 
    margin-right: -4px; 
    position: relative; 
    padding: 0px 10px; 
    cursor: pointer; 
    -webkit-transition: all 0.2s; 
    -moz-transition: all 0.2s; 
    -ms-transition: all 0.2s; 
    -o-transition: all 0.2s; 
    transition: all 0.2s; 
} 

.nav ul li:hover { 
    background: #6A1B9A; 
    color: #e6e9e9; 
} 

.nav ul li ul { 
    padding: 0; 
    position: absolute; 
    top: 35px; 
    left: 0; 
    text-align: left; 
    display: none; 
    opacity: 0; 
    visibility: hidden; 
    -webkit-transiton: opacity 0.5s; 
    -moz-transition: opacity 0.5s; 
    -ms-transition: opacity 0.5s; 
    -o-transition: opacity 0.5s; 
    -transition: opacity 0.5s; 
} 

.nav ul li ul li { 
    width: 200px; 
    background: #555; 
    display: block; 
    color: #e6e9e9; 
} 

.nav ul li ul li:hover { 
    background: #6A1B9A; 
} 

.nav ul li:hover ul { 
    display: block; 
    opacity: 1; 
    visibility: visible; 
    transition-delay: 2s; 
    -webkit-transition-delay: 2s; 
    /* Safari */ 
} 

.nav a { 
    font-size: 1.4em; 
    text-decoration: none; 
    color: #e6e9e9; 
    display: block; 
    transition: .3s background-color; 
} 

.nav a:hover { 
    background-color: #6A1B9A; 
    color: #e6e9e9; 
} 

.nav a.active { 
    background-color: #6A1B9A; 
    color: #e6e9e9; 
    cursor: default; 
} 

.hidden { 
    display: none; !important 
} 

Answer 1

문제는 여기

hidden { 
    display: none; !important<---- this important should be inside ";" 
} 

입니다 그것은해야

hidden { 
    display: none !important; 
}