CODEWITHSUNDEEP
css
Rahul Singh
Rahul Singh

Reputation: 1632

CSS menu doesn't work in Internet Explorer

I have some menu bar from Google. but none of that work on IE some request me permission to allow block content to run. while other doesn't show hover effect on submenues. a

This is what horizontal menu baar looks when it is open on IE. WHile it has submenues that work and open on mozilla when I are also visible on hover effect.enter image description here

The second image is screen shot on mozilla n other browser.

I am completely screwed please help me out asap.

What the soluction if explorer asked don't ask me allow ActiveX controls.. Things doesn't happen with mozilla. I want same to run smoothly without asking permission.

    ul#css3menu1,ul#css3menu1 ul{
        margin:0;list-style:none;padding:0;background-color:#dedede;border-width:1px;border-style:solid;border-color:#5f5f5f;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
    ul#css3menu1 ul{
        display:none;position:absolute;left:0;top:100%;-moz-box-shadow:3.5px 3.5px 5px #000000;-webkit-box-shadow:3.5px 3.5px 5px #000000;box-shadow:3.5px 3.5px 5px #000000;padding:0 10px 10px;background-color:#424542;border-width:2px;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;border-color:#FFF;}
    ul#css3menu1 li:hover> *{
        display:block;}
    ul#css3menu1 li:hover{
        position:relative;}
    ul#css3menu1 ul ul{
        position:absolute;left:100%;top:0;}
    ul#css3menu1{
        display:block;font-size:0;float:left;}
    ul#css3menu1 li{
        display:block;white-space:nowrap;font-size:0;float:left;}
    ul#css3menu1>li,ul#css3menu1 li{
        margin:0;}
    ul#css3menu1 a:active, ul#css3menu1 a:focus{
        outline-style:none;}
    ul#css3menu1 a,ul#css3menu1 a.pressed{
        display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 14px Trebuchet MS;color:#000;text-shadow:#FFF 0 0 1px;cursor:pointer;}
    ul#css3menu1 ul li{
        float:none;margin:10px 0 0;}
    ul#css3menu1 ul a{
        text-align:left;padding:4px;background-color:#424542;background-image:none;border-width:0;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:14px Tahoma;color:#FFF;text-decoration:none;text-shadow:#FFF 0 0 0;}
    ul#css3menu1 li:hover>a{
        background-color:#444444;border-color:#C0C0C0;border-style:solid;font:bold 14px Trebuchet MS;color:#FFF;text-decoration:none;text-shadow:#FFF 0 0 1px;background-image:url("mainbk.png");background-position:0 100px;}
    ul#css3menu1 img{
        border:none;vertical-align:middle;margin-right:10px;}
    ul#css3menu1 img.over{
        display:none;}
    ul#css3menu1 li:hover > a img.def{
        display:none;}
    ul#css3menu1 li:hover > a img.over{
        display:inline;}
    ul#css3menu1 li a.pressed img.over{
        display:inline;}
    ul#css3menu1 li a.pressed img.def{
        display:none;}
    ul#css3menu1 span{
        display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
    ul#css3menu1 a{
        padding:10px;background-color:#FFF;background-image:url("mainbk.png");background-repeat:repeat;background-position:0 0;border-width:0 0 0 1px;border-style:solid;border-color:#C0C0C0;color:#000;text-decoration:none;text-shadow:#FFF 0 0 1px;}
    ul#css3menu1 li:hover>a,ul#css3menu1 li>a.pressed{
        background-color:#444444;background-image:url("mainbk.png");background-position:0 100px;border-style:solid;border-color:#C0C0C0;color:#FFF;text-decoration:none;text-shadow:#FFF 0 0 1px;}
    ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li>a.pressed{
        background-color:#424542;background-image:none;font:14px Tahoma;color:#F2B20E;text-decoration:none;text-shadow:#FFF 0 0 0;}
    ul#css3menu1 li.topfirst>a{
        height:18px;line-height:18px;border-width:0;border-radius:4px 0 0 4px;-moz-border-radius:4px 0 0 4px;-webkit-border-radius:4px;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;}
    ul#css3menu1 li.topfirst:hover>a,ul#css3menu1 li.topfirst>a.pressed{
        line-height:18px;}
    ul#css3menu1 li.topmenu>a{
        height:18px;line-height:18px;}
    ul#css3menu1 li.topmenu:hover>a,ul#css3menu1 li.topmenu>a.pressed{
        line-height:18px;}
    ul#css3menu1 li.toplast>a{
        height:18px;line-height:18px;border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;-webkit-border-radius:0;-webkit-border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;}
    ul#css3menu1 li.toplast:hover>a,ul#css3menu1 li.toplast>a.pressed{
        line-height:18px;}




<ul id="css3menu1" class="topmenu">
<li class="topfirst"><a href="#" title="Department" style="height:18px;line-height:18px;"><span>Department</span></a>
<ul>
    <li><a href="department.php" title="All Departments">Departments</a></li>
    <li><a href="edit_dept.php" title="Edit Department">Edit Department</a></li>
    <li><a href="new_dept.php" title="Add Department">Add Department</a></li>
</ul>

</li>
<li class="topmenu"><a href="#" title="Users" style="height:18px;line-height:18px;"><span>Users</span></a>
<ul>
    <li><a href="user.php" title="All User">Users</a></li>
    <li><a href="edit_user.php" title="Edit User">Edit Users</a></li>
    <li><a href="new_user.php" title="Add User">Add New User</a></li>
</ul>

</li></ul>

Upvotes: 0

Views: 504

Answers (2)

reisio
reisio

Reputation: 3242

You need to validate your markup.

Specifically, you need to start your source with a doctype declaration, such as <!doctype html>.

Upvotes: 0

Christopher
Christopher

Reputation: 774

What have you declared as the doctype? In quirks mode, IE will not do much with the :hover pseudo.

Upvotes: 1

Related Questions