html - Making menu (div) scale down when screen is resized -

I have a menu on the website :. If the window is given a small size then I am trying to create this menu on the scale below.

CSS

  # menu_wap {max-width: 100% ; Status: fixed; Top: 50%; Width: 100%; Display: Inline-block; Bottom: 0%; Left: 2%; Z-index: 500; } #Menu {background: # FFD700; Border-color: # 000000; Width: 180px; }   
 HTML  
  & lt; Div id = "menu_wrap" & gt; & Lt; Div id = "menu" & gt; & Lt; Ul id = "navbar" & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Home & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; About & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Contact & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt; & Lt; / Div & gt;    
 
 
 All types of screen (such as PC, mobile, iPad, etc.) > @ Media screen , please see  
 because the Web site will not fit for all screens, you want to set the diff property screen for the difference.