1

问：

我有一个导航菜单，我注意到每次我更改浏览器缩放。它的位置改变了。如何使菜单固定在它的位置。

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

我用这个菜单

4

3 回答 3

2

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

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-01T06:13:29.707 回答
1

它会缩放，但您可以通过替换使其保持不变：

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

和

<div style="position:absolute; top: 0px; left: 20px;" >
于 2011-07-21T18:18:16.900 回答
0

确保您的 HTML 文件中有元视口标签应该会有所帮助，并且在菜单的 CSS 中将“位置”属性设置为“固定”将使其具有粘性/浮动。

于 2017-08-16T17:54:40.583 回答