Hello I have a problem that I havent been able to fix. My menu Moves when the browser is resized. I want the menu to stay fixed no matter when size the browser window is.
If someone could please help me in solving this issue that would be much appreciated! thank you
HTML code --------------------------------------------------------------
<body>
<div id="wrap">
<ul class="menu lblue slide" id="menu">
<li><a href="#"><img src="images/nav.png" width="25" height="21" align="texttop">Login<span class="bubble-alt"> Your Account</span></a></li>
<li><a href="#"><img src="images/nav.png" width="25" height="21" align="texttop">Register<span class="bubble-alt"> </span></a></li>
<li><a href="#"><img src="images/nav.png" width="25" height="21" align="texttop">Browse <span class="bubble-alt"> </span></a>
</li>
</ul>
</div>
</body>
CSS code --------------------------------------------------------------
body {
margin: 0;
padding: 0;
width: 100%px;
}
.lblue {
height:46px;
font-family:Arial, Helvetica, sans-serif;
background-image:url(images/nav1.png)
}
.lblue a {text-decoration:none; }
.lblue > li > a {
color:#fff;
font-weight:bold;
font-size:14px;
line-height:8px;
padding:13px 20px 6px;
height:27px;
}
.lblue > li:hover > a {
background-color:#8ab66b;
border-left:none;
padding-left:21px;
}
.lblue > li {border-right:1px solid #0d3f72;border-right:1px solid rgba(0, 0, 0, .33);}
.lblue > li > a {border-left:1px solid #4c8bcb;border-left:1px solid rgba(255, 255, 255, .20);}
.lblue > li > a img, .lblue li > ul > li > a img {
border:0;
margin-right:7px;
}
.menu, .menu ul {
margin:0;
padding:0;
list-style:none;
}
/* --------------------------------------- */
.menu li, .menu ul a {position:relative; display:block;}
.menu > li {float:right;}
.menu > li.floatr {float:left; padding-left:120px; font-size: 60px;
color: #ffffff;
letter-spacing:1px;
font-family: 'Jockey One', cursive;
line-height: 28px; }
.menu li > a {display:block;}
/* --------------------------------------- */
.menu ul {
position:absolute;
display:block;
width:125px;
float:right;
z-index:999;
}
.menu ul ul {
top:0;
left:-125px;
}
.menu > li.floatr > ul {right:0;}
.menu > li.floatr > ul ul {left:-125px;}
.menu li:hover > ul {display:block;}