javascript - 我如何设置我的 CSS 下拉菜单，它在 "margin-top:0"时工作正常，但在 "margin-top:135"时不工作？

Question

编辑:它在 IE 中工作正常但在 chrome 浏览器中不工作

我在我的网页中制作了 CSS 下拉菜单，它将应用于所有页面，但导航栏在顶部工作正常但在 margin-top:135 或任何其他地方不起作用。我该如何修复我的 asp.net 网站中的这个错误。请任何人帮助我......在“margin-top:135”无法选择子菜单。

html代码

<div style="position:absolute; top: 3px; left: 179px; height: 165px; width: 944px;" 
           id="cont"> 

           <ul id="sddm">
               <li><a href="index.aspx">

               Home</a>


    </li>
    <li><a href="#" 
        onmouseover="mopen('m2')" 
        onmouseout="mclosetime()">Company</a>
        <div id="m2" 
            onmouseover="mcancelclosetime()" 
            onmouseout="mclosetime()">
        <a href="#">About Us</a>
        <a href="#">GEPCO BoD</a>
        <a href="#">Top Management</a>
        <a href="#">Organizational Chart</a>
         <a href="#">Telephone Directory</a>
          <a href="#">Consumer</a>
           <a href="#">Existing Stuff Strength</a>
        </div>
    </li>
   <li><a href="#" 
        onmouseover="mopen('m1')" 
        onmouseout="mclosetime()">Customer Service</a>
    <div id="m1" 
            onmouseover="mcancelclosetime()" 
            onmouseout="mclosetime()">
        <a href="#">Electric Tariff</a>
        <a href="#">Print Duplicate Bill</a>
        <a href="#">Customer Centered</a>
        <a href="#">Load Shedding Schedule</a>
        <a href="#">Consumer Service Manual</a>
        <a href="#">Safety Guide</a>
        <a href="#">Procedures</a>
        </div></li>
    <li><a href="#" 
        onmouseover="mopen('m3')" 
        onmouseout="mclosetime()">News & Media</a>
        <div id="m3" 
            onmouseover="mcancelclosetime()" 
            onmouseout="mclosetime()">
        <a href="#">Tender</a>
        <a href="#">Press Release</a>
        <a href="#">Jobs</a>

        </div>
    </li>
    <li><a href="#" 
        onmouseover="mopen('m4')" 
        onmouseout="mclosetime()">Downloads</a>
        <div id="m4" 
            onmouseover="mcancelclosetime()" 
            onmouseout="mclosetime()">
        <a href="#">For Customer</a>
        <a href="#">For Employee</a>

        </div></li>
<li><a href="#" >FAQs</a></li>
<li>
<a href="#" 
        onmouseover="mopen('m5')" 
        onmouseout="mclosetime()">Usefull Links</a>
        <div id="m5" 
            onmouseover="mcancelclosetime()" 
            onmouseout="mclosetime()">
        <a href="#">About Us</a>
        <a href="#">GEPCO BoD</a>
        <a href="#">Top Management</a>
        <a href="#">Organizational Chart</a>
         <a href="#">Telephone Directory</a>
          <a href="#">Consumer</a>
           <a href="#">Existing Stuff Strength</a>
        </div>
</li>

</ul>
</div>

CSS代码

<style type="text/css">
#sddm
{   
    margin-top:135px;
    padding:0;


    }

#sddm li
{   
    padding:0;
    list-style: none;
    float: left;
    font: bold 11px arial;

    }

#sddm li a
{   display: block;
    margin: 0 0 0 0;
    border:none;
    padding: 4px 10px;
    height:20px;
    width: 100px;

    background: #5970B2 url('index/blue.png');
    color: #FFF;
    text-align: center;
    text-decoration: none;

    }

#sddm li a:hover
{   background: #49A3FF}

#sddm div
{   position: absolute;
    visibility: hidden;
    margin: 0;
    padding: 0;
    margin-left:0px;
    background: #49A3FF;
    }

    #sddm div a
    {   position: relative;
        display: block;

        margin: 0;
        padding: 0;
        width: auto;
        white-space: nowrap;
        text-align: left;
        text-decoration: none;
        background: #EAEBD8;
        color: #2875DE;
        font: 11px arial}

    #sddm div a:hover
    {   background: #49A3FF;
        color: #FFF}
        </style>

JavaScript代码

    var timeout = 500;
        var closetimer = 0;
        var ddmenuitem = 0;

        // open hidden layer
        function mopen(id) {
            // cancel close timer
            mcancelclosetime();

            // close old layer
            if (ddmenuitem) ddmenuitem.style.visibility = 'hidden';

            // get new layer and show it
            ddmenuitem = document.getElementById(id);
            ddmenuitem.style.visibility = 'visible';

        }
        // close showed layer
        function mclose() {
            if (ddmenuitem) ddmenuitem.style.visibility = 'hidden';
        }

        // go close timer
        function mclosetime() {
            closetimer = window.setTimeout(mclose, timeout);
        }

        // cancel close timer
        function mcancelclosetime() {
            if (closetimer) {
                window.clearTimeout(closetimer);
                closetimer = null;
            }
        }

        // close layer when click-o

ut
    document.onclick = mclose; 

Answer 1

当您对您的 div 使用 position:absolute 时，它​​也取决于它的父级。确保你有一个 div 或任何其他具有 position:relative 的父级并使用 top:135px;而不是边距顶部。