Адаптивное меню

Всем знатокам привет, такая проблема, вот так выглядит меню с ПК,
фото 1

А вот так с телефона
фото 2

Как сделать, так чтобы на телефоне отображалось скрытое меню, типа такого плана как на фото ?
фото 3

вот код и css

HTML:

1. <ul id="menu">
2.    <li><a href="index.php">Главная</a></li>
3.         <li>
4.             <a href="#">Рубрики &darr;</a>
5.                <ul class="sub-menu">
6.                   <li><a href="#">Личный опыт</a></li>
7.                   <li><a href="#">Чужой опыт</a></li>
8.                    <li><a href="#">Неизвестный опыт</a></li>
9.                </ul>
10.         </li>
11.         <li>
12.              <a href="#">Мои работы &darr;</a>
13.                 <ul class="sub-menu">
14.                    <li><a href="#">Для новичка</a></li>
15.                    <li><a href="#">Опытного пользователя</a></li>
16.                     <li><a href="#">И еще для кого-то..</a></li>
17.                 </ul>
18.         </li>
19.         <li><a href="contact.php">Контакты</a></li>
20.         <li><a href="#">Карта сайта</a></li>
21. </ul>
22.  
23.  

Код (CSS):

1. /* стили для ПК */
2.  
3. #menu  {
4.        min-width: 100%;
5.         background: #3d404e linear-gradient(to bottom, #2f650d 0%, #3d9e1d 100%);
6.     border-radius: 3px;
7.     box-shadow: 0 1px 0 rgba(236, 237, 237, 0.1) inset, 0 1px 2px rgba(0, 0, 0, 0.1);
8.     display: table;
9.     list-style: outside none none;
10.     margin: 0 auto;
11.     padding: 0;
12.     text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
13.     visibility:visible;
14. }
15.  
16. #menu li {
17.         display:block;
18.         float: left;
19.         position:relative;
20. }
21.  
22. #menu li a {
23.         display:table;
24.         padding: 0 20px;
25.         height: 50px;
26.         text-align: center;
27.         font:600 13px/50px arial;
28.         color: #fff;
29.         border-left: 1px solid rgba(255, 255, 255, 0.08);
30.     border-right: 1px solid rgba(0, 0, 0, 0.4);
31.         text-decoration: none;
32.         transition: 0.5s;
33.         -webkit-transition:0.5s;
34. }
35.  
36. #menu li:first-child a {
37.     border-left: medium none;
38. }
39. #menu li:last-child a {
40.     border-right: medium none;
41. }
42.  
43. #menu li:hover a {
44.     background: #df4706;
45.     box-shadow: 0 0 5px rgba(0,0,0,0.3)inset;
46. }
47. #menu li:hover .sub-menu a {
48.     background: #f3f3f3;
49.     color: #2f3036;
50.     height: 40px;
51.     line-height: 40px;
52.         box-shadow: 0 2px 2px rgba(0,0,0,0.1);
53. }
54.  
55. #menu li:hover .sub-menu a:hover {
56.     color: #df4706;
57. }
58.  
59. /* стили для выпадающего списка */
60.  
61. .sub-menu {
62.   visibility:hidden;
63.   opacity:0;
64.   position:absolute;
65.   z-index:-1;
66.   transition:visibility 0s linear 0.5s, opacity 0.5s linear;
67.   left: 0;
68. }
69.  
70. #menu li:hover > ul{
71.    visibility:visible;
72.    opacity:1;
73.    transition-delay:0s;
74.    z-index:1;
75. }
76.  
77. #menu .sub-menu li {
78.     float:none ;
79.         border-top:1px solid #dddddd;
80. }
81.  
82. #menu .sub-menu li a {
83.         width: auto;
84.         min-width: 100%;
85.         padding: 0 11px;
86.         white-space:nowrap;
87.         text-align:center;
88.         border:none;
89.         box-shadow:none;
90. }
91.  
92. #menu li a:hover + .sub-menu, .sub-menu:hover {
93.         display: block;
94. }
95.  
96. /* стили для адаптивности */
97.  
98. @media screen and (max-width : 760px){
99.  
100. .sub-menu {
101.         position: static;
102.         display: none;              
103. }
104.  
105. .sub-menu li {
106.         margin-bottom: 1px;
107. }
108. #menu li, #menu li a {
109.         width: 100%;
110.         border:none;
111.         padding:0px;
112. }
113.        
114. #menu .sub-menu li a {
115.         padding:0px;
116. }
117.        
118. #menu  {
119.     width: 100%;
120.     }
121. }