Q:
I have a navigation menu that seems to change position every time I adjust the browser zoom. How can I make the menu stay fixed in its place?
The CSS:
ul#topnav
{
margin-left:0;
margin-bottom:50px;
margin-top:5px;
padding: 0;
float: right;
width: 800px;
list-style: none;
position: relative; /*--Set relative positioning on the unordered list itself - not on the list item--*/
font-size: 1.2em;
background:#CC6A11; /*url(topnav_stretch.gif) repeat-x;*/
}
ul#topnav li
{
float: right;
margin: 0;
padding: 0;
border-right: 1px solid #555; /*--Divider for each parent level links--*/
}
ul#topnav li a
{
padding: 10px 15px;
display: block;
color: #f0f0f0;
text-decoration: none;
}
ul#topnav li:hover
{
background: #1376c9 url(../images/topnav_active.gif) repeat-x;
}
ul#topnav li span
{
float: right;
padding: 10px 0;
position: absolute;
left: 0;
top: 35px;
display: none; /*--Hide by default--*/
width: 800px;
background: #1376c9;
color: #fff; /*--Bottom right rounded corner--*/
-moz-border-radius-bottomright: 5px;
-khtml-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px; /*--Bottom left rounded corner--*/
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
}
ul#topnav li:hover span
{
display: block;
}
/*--Show subnav on hover--*/
ul#topnav li span a
{
display: inline;
}
/*--Since we declared a link style on the parent list link, we will correct it back to its original state--*/
ul#topnav li span a:hover
{
text-decoration: underline;
}
.aspx
<div style=" margin-right:20%" >
<ul id="topnav">
<li><a href="frm_AssistantCV.aspx">الرئيسية</a></li>
<li><a href="#">النشاط التعليمي</a> <span><a href="frm_TeachingLoad.aspx">العبأ التدريسي</a>
| <a href="frm_EducationalActivities.aspx">الأنشطة التعليمية</a> | <a href="frm_EducationalActivitiesDirectly.aspx">
الأنشطة التعليمية المباشرة</a> </span></li>
<li><a href="#">النشاط العلمي</a> <span><a href="frm_ScientificActivity.aspx">النشاط
العلمي 1</a> | <a href="frm_ScientificActivity2.aspx">النشاط العلمي 2</a> | <a href="frm_ScientificActivity3.aspx">
النشاط العلمي 3</a> </span></li>
<li><a href="frm_ManagementActivity.aspx">النشاط الاداري</a></li>
<li><a href="frm_StudentActivities.aspx">االاشتراك في أنشطة طلابية</a></li>
<li><a href="frm_Evaluation.aspx">التقييم العام</a></li>
<li><a href="LoginPage.aspx">خروج</a></li>
</ul>
</div>
I implemented this menu