how i can set my CSS dropdown menu its works fine at "margin-top:0" but dont work at "margin-top:135

Gepco
Gepco Member Posts: 1 New User

EDIT: its working fine in IE but not in chrome browser

i made CSS dropdown menu in my web page which will be applied on all pages but navigation bar works fine at top but didn't work at margin-top:135 or any other place. how can i fix this error in my asp.net website. please anyone help me... At "margin-top:135" no submenu can be selected.

html code

<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 Bill 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 code

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

    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;
            }
        }

Answers

  • billsey
    billsey ACE Posts: 34,912 Trailblazer

    I don't know why you are asking web programming questions in this user forum for Acer computers, but typically when something works in IE and doesn't in any modern browsers it's because what you are trying to do has been depreciated… :)

    Click on "Like" if you find my answer useful or click on "Yes" if it answers your question.