List navigation menu moves around when minimizing browser [CSS, HTML] - html

Question

I made a fixed menu bar for my homepage in css using a list. It looks fine, but when I minimize the browser, the menu items move to the left, which I don't want them to do.
How can I prevent that and make the browser keep the position of the menu the way it is, if necessary the browser could add a horizontal scroll bar, but the menu shouldn't move around.
Can anyone help, please?
Here is the HTML coode:
<div id="menu">
<li style="list-style: none;"> <img src="images/head.png"/><br></li>
<div id='cssmenu'>
<ul>
<li><a href='index.html'><span>xxx</span></a></li>
<li><a href='index.html'><span>xxx</span></a></li>
<li><a href='index.html'><span>xxx</span></a></li>
<li><a href='index.html'><span>xxx</span></a></li>
<li><a href='index.html'><span>xxx</span></a></li>
<li><a href='index.html'><span>xxx</span></a></li>
</ul>
</div>
</div>
Here is the CSS code - Menu Navigation Bar:
#cssmenu
{
position: relative;
margin: 0 auto;
clear: both;
}
#cssmenu a
{
list-style: none;
margin: 0;
padding: 0;
border: 0;
line-height: 1.5;
}
#cssmenu li
{
border: 1px solid transparent;
padding-top: 7px;
display: block;
width: 160px;
float: right;
margin: 0 10px;
}
#cssmenu ul
{
margin: 0 auto;
padding: 0;
text-align: center;
padding-right: 20px;
margin-bottom: -70px;
max-height: 80px;
}
#cssmenu li a
{
padding-top: 8px;
padding-right: 20px;
padding-left: 20px;
padding-bottom: 10px;
border: 1px solid #dfdfdf;
text-decoration: none;
display: block;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-khtml-border-radius: 2px;
font-size: 17px;
font-family: Verdana, Tahoma;
color: #292F33;
}
#cssmenu li:hover a
{
border-bottom: 3px solid #30B0FF;
display: block;
color: #30B0FF;
clear: both;
font-size: 17px;
font-family: Verdana, Tahoma;
transition-duration: 0.1s;
transition-delay: 0.03s;
}
#menu
{
height: 86px;
width: 100%;
float: center;
padding-top: 10px;
padding-right: 20px;
padding-left: 20px;
margin-left: -20px;
margin-top: -106px;
font-family: Verdana, Tahoma;
font-size: 15px;
position: fixed;
border: 5px solid #292F33;
box-shadow: 0px 0px 125px rgba(255, 255, 255, 0.35);
background-color: #fff;
color: #292F33;
}

Answer 1

The below code works. I have tested this myself in Chormium CSS editor. All you need to do is add min-width: 1200px or something suitable to your need, then change position: fixed to position: absolute
#menu {
height: 86px;
width: 100%;
min-width: 1200px;
float: center;
padding-top: 10px;
padding-right: 20px;
padding-left: 20px;
margin-left: -20px;
margin-top: -106px;
font-family: Verdana, Tahoma;
font-size: 15px;
position: absolute;
border: 5px solid #292F33;
box-shadow: 0px 0px 125px rgba(255, 255, 255, 0.35);
background-color: #fff;
color: #292F33;
}

Answer 2

You need to change the width of the #menu div. Now it is width:100%, so when de body is minimized, the #menu div too. If you set a size of, for example, 1200px, this size will not change when the body is minimized.
I tested it with Chrome CSS editor on your page and it works.
So,
#menu {
height: 86px;
width: 1200px;
float: center;
padding-top: 10px;
padding-right: 20px;
padding-left: 20px;
margin-left: -20px;
margin-top: -106px;
font-family: Verdana, Tahoma;
font-size: 15px;
position: fixed;
border: 5px solid #292F33;
box-shadow: 0px 0px 125px rgba(255, 255, 255, 0.35);
background-color: #fff;
color: #292F33;
}
EDITED:
Also set:
body{
min-width:1200px;
}

Answer 3

Replace this style Done :-
#cssmenu li{
width: 12%;
}

Answer 4

Try positioning it to "absolute" rather than "relative".
For making it more good try applying bootstrap.