如何使粘菜单，更改浏览器或变焦时不移动

我有一个导航菜单，我注意到，每一次我改变浏览器缩放。它的位置发生了变化，以便将菜单固定在其位置上。

名为.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>

我用这个menu

来源

2011-07-21 Anyname Donotcare

这是要放大，但你可以把它坚持更换：

<div style=" margin-right:20%; width:100%" >

与

<div style="position:absolute; top: 0px; left: 20px;" >

来源

2011-07-21 18:18:16 Joe

谢谢，但仍然是同样的问题，你试过吗？ –

我做到了。我不完全了解你的问题。你能详细说明一下吗？ – Joe

对不起我english.the问题发生了，当我在放大或缩小或最大化和最小化浏览器，在菜单的位置而改变。这是如此糟糕，因为我不知道每个用户的设置如何。尽量放大或缩小（浏览器缩放，你会发现在万阿英，蒋达清 –

你只需要做两件事情，它会解决你的问题！

1）从div删除边距。

Previous :<div style=" margin-right:20%" > 

Modified: <div>

2）更新如下您topnav CSS：

ul#topnav { 
    background: none repeat scroll 0 0 #CC6A11; 
    float: right; 
    font-size: 1.2em; 
    list-style: none outside none; 
    margin-bottom: 50px; 
    margin-top: 15px; 
    padding: 0; 
    position: relative; 
    text-align: left; 
}

希望这将解决您的问题!!!!!

来源

2013-02-01 06:13:29

确保你在你的HTML文件中有你的元视口标签应该有帮助，并且在菜单的CSS中设置'position'属性为'fixed'会使它变得粘滞/浮动。

来源

2017-08-16 17:54:40

如果你添加一些代码行与您的解释和说明它甚至会更好 –

如何使粘菜单，更改浏览器或变焦时不移动

回答

相关问题