Making a Horizontal Menu resize for devices - html

Question

In the navigation menu below, could somebody please show me how I would make it responsive to resize in width for iPad to iPhone etc. I have it looking perfectly how I want it on desktop however when I view the website on iPad or iPhone the menu is too wide still resulting in the main content of the page looking smaller and off center.
css
#menu, #menu ul {
margin: 0 auto;
padding: 0;
background-color: #FFFFFF;
}
#menu {
display: table;
width: 100%;
list-style: none;
position: relative;
top: -30px;
text-align: center;
-webkit-box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.75);
font-size: 18px;
height: 20px;
z-index: 101;
}
#menu.fixed {
position: fixed;
top: 0;
width: 100%;
}
#menu li {
display: table-cell;
list-style: none;
padding-right: 50px;
left: 50px;
vertical-align: middle;
}
#menu > li:hover > ul {
background: #FFF;
display: block;
left: 0;
width: 100%;
-webkit-box-shadow: 0px 3px 2px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 3px 2px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 3px 2px 0px rgba(50, 50, 50, 0.75);
border-top: thin dotted #999;
top: 32px;
}
#menu > li > ul {
display: none;
position: absolute;
text-align: center;
}
#menu li a {
display: block;
padding: 2px 10px;
text-decoration: none;
font-weight: lighter;
white-space: nowrap;
color: #333;
}
#menu li a:hover {
color: #CCCCCC;
font-size: 18px;
vertical-align: middle;
}
#menu li ul li {
display: inline-block;
float: none;
}
HTML
<div id="menu">
<ul>
<li>Milk</li>
<li>Eggs</li>
<li>Cheese</li>
<li>Vegetables</li>
<li>Fruit</li>
</ul>
</div>

Answer 1

You indeed should use css Media Queries.
By using #media (min-width: 768px){} you tell the browser that all windows above 768px width will include the following css-code. This is the right way to use it, because this is a mobile first approach, not familiar with that term.. google it.
Just by changing you're display: table-cell; to a display: table-row for the mobile format, will put the items under each other.
I made an example by using the things above, including an html button and a little jQuery.
See Demo here

Answer 2

try like this: LINK
CSS:
#media handheld, only screen and (max-width: 768px) {
#menu li {
clear:both;
float:none;
display:block;
background-color:#f0f0f0;
margin-bottom:2px;
}
}
According to the devices you need, just change the max-width of media query

Answer 3

Just use media queries, find the dimensions of the devices you wish to optimize for, and assign those dimensions in your media query. After that you may select the classes for the menu bar and create new rules and margins etc.
::Sources::
http://www.w3schools.com/css/css_mediatypes.asp
http://www.youtube.com/watch?v=aPtA4nYkvDw - Khoury's channel and website are really helpful.