Make CSS menu responsive and each item certain width - html

Question

I am using this CSS Code for a HTML menu:
#CustomerMenu {
margin-bottom:35px;
}
#CustomerMenu ul {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
-webkit-box-shadow: 0 0 5px rgba(243, 111, 37, 5);
-moz-box-shadow: 0 0 5px rgba(243, 111, 37, 5);
box-shadow: 0 0 5px rgba(243, 111, 37, 5);
}
#CustomerMenu ul li {
display: inline-block;
position:relative;
}
#CustomerMenu ul li a {
font: bold 12px/18px Arial;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #FFFFFF;
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;
}
#CustomerMenu ul li a:hover {
background: #F36F25;
color: #FFFFFF;
}
#CustomerMenu ul li:hover > a {
background-color: #F36F25;
color: #FFFFFF;
}
#CustomerMenu ul li ul {
padding: 0;
position: absolute;
z-index:999;
top: 34px;
left: 0;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
#CustomerMenu ul li ul li a {
background: #666666;
display: block;
color: #FFFFFF;
width:100px;
}
#CustomerMenu ul li ul li a:hover {
background: #F35F25;
}
#CustomerMenu ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
i want to make each <li> link a certain width whether it be a percentage or fixed
Also, can i make the menu responsive, whats the best jway to do this?
http://jsfiddle.net/ko69pyLz/

Answer 1

Use media queries
i am not adding full code, just showing how you can proceed, there are plenty of tutorials available in online.
#media screen and (min-width:0px) and (max-width:480px),
screen and (min-device-width:0px) and (max-device-width:480px){
#CustomerMenu ul li {
display: block;
}
#CustomerMenu ul li a {
font: bold 24px/36px Arial;
}
}
JSfiddle - resize the browser to atake effect
http://jsfiddle.net/ko69pyLz/5/

Answer 2

As the user Manjunath Siddappa stated, I'm not adding full code, or in this case, my example won't be using your code.
For the sizing part of it, you will need to use media queries, but since you want a mobile nav, you most likely want it to pull up into one large drop down bar, and that's where this comes in..
This code will help you create a mobile nav that can get vertically stacked/hidden, and then uses a onClick jQuery function to open and close the options.
JsFiddle: http://jsfiddle.net/qy6a185b/