Home/ Questions/Q 8035515
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T02:20:14+00:00

I hope you’ll be able to help me. I have the a dropdown menu

  • 0

I hope you’ll be able to help me. I have the a dropdown menu that used to work across all browsers but for some reason, starting today it stopped displaying the dropdown submenus.

Could you please have a look and let me know what is going on? I have already lost about 3 hours trying to figure this one out. I have condensed the code to the bare minimum.

Thanks in advance…

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>title here</title>
        <style type="text/css">
            ul
            {
                list-style: none;
            }

            body
            {
                font-size: 12px; /* Base Font Size */
                line-height: 1.5; /* 21px */
                color: #525252;
                font-family: "Helvetica" ,Arial,sans-serif;
            }

            a
            {
                color: #409ff8;
                text-decoration: none;
                -o-transition-property: color;
                -webkit-transition-property: color;
                -moz-transition-property: color;
                transition-property: color;
                -o-transition-duration: 0.3s;
                -webkit-transition-duration: 0.3s;
                -moz-transition-duration: 0.3s;
                transition-duration: 0.3s;
            }

            a:hover
            {
                color: #2d6ca8;
                text-decoration: underline;
            }

            #wrapper
            {
                width: 940px;
                margin: 0 auto;
            }

            #header
            {
                height: 90px;
                position: relative;
            }

            .navigation ul
            {
                position: absolute;
                bottom: 0;
                right: 0;
                border-radius: 5px 5px 0 0;
                -moz-border-radius: 5px 5px 0 0;
                -webkit-border-radius: 5px 5px 0 0;
                box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
                -moz-box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
                -webkit-box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
            }

            .navigation ul li
            {
                float: left;
                display: inline;
                position: relative;
                text-align: center;
            }

            .navigation ul li img
            {
                position: absolute;
                bottom: 0;
            }

            .navigation ul li a
            {
                color: #fff;
                padding: 0 13px;
                display: block;
                line-height: 35px;
                background: #234A7A;
                background: -moz-linear-gradient(bottom,  #234A7A,  #26528D);
                background: -webkit-gradient(linear, left bottom, left top, from(#234A7A), to(#26528D));
                border-top: 1px solid #4871b0;
                border-left: 1px solid #3f6299;
                border-right: 1px solid #1b3a5f;
                border-bottom: 1px solid #000;
                text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
                font-size: 1.083em;
            }

            .navigation ul li:first-of-type a
            {
                border-radius: 5px 0 0 0;
                -moz-border-radius: 5px 0 0 0;
                -webkit-border-radius: 5px 0 0 0;
            }

            .navigation ul li:last-of-type a
            {
                border-radius: 0 5px 0 0;
                -moz-border-radius: 0 5px 0 0;
                -webkit-border-radius: 0 5px 0 0;
            }

            .navigation ul li a:hover, .navigation ul li:hover a
            {
                background: #26528D;
                background: -moz-linear-gradient(bottom,  #26528D,  #436A9A);
                background: -webkit-gradient(linear, left bottom, left top, from(#26528D), to(#436A9A));
                text-decoration: none;
            }

            .navigation .sub
            {
                display: none;
                position: absolute;
                top: 36px;
                left: 0;
                bottom: auto;
                right: auto;
                width: 180px;
                text-align: left;
                z-index: 100;
                box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
                -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
                -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
                border-radius: 0 0 5px 5px;
                -moz-border-radius: 0 0 5px 5px;
                -webkit-border-radius: 0 0 5px 5px;
            }

            .navigation .last .sub
            {
                right: 0;
                left: auto;
            }

            .navigation .sub li
            {
                float: none;
            }

            .navigation li .sub li a
            {
                border: none;
                background: #26528D;
                border-top: 1px solid #3f6299;
                border-bottom: 1px solid #1b3a5f;
                text-align: left;
            }

            .navigation li .sub li:first-of-type a
            {
                border: none;
                border-bottom: 1px solid #1b3a5f;
                border-radius: 0;
                -moz-border-radius: 0;
                -webkit-border-radius: 0;
            }

            .navigation li .sub li:last-of-type a
            {
                border-radius: 0 0 5px 5px;
                -moz-border-radius: 0 0 5px 5px;
                -webkit-border-radius: 0 0 5px 5px;
                border: none;
                border-top: 1px solid #3f6299;
            }

            .navigation li .sub li a:hover, .navigation li .sub li:hover a
            {
                background: #26528D;
                background: -moz-linear-gradient(bottom,  #234A7A,  #537A9A);
                background: -webkit-gradient(linear, left bottom, left top, from(#234A7A), to(#56729D));
            }
        </style>
    </head>
    <body>
        <div id="wrapper">
            <div id="header">
                <div class="navigation">
                    <ul>
                        <li><a href="m1.html">M1</a>
                            <ul class="sub">
                                <li><a href="m1_1.html">M1_1</a></li>
                                <li><a href="m1_2.html">M1_2</a></li>
                                <li><a href="m1_3.html">M1_3</a></li>
                            </ul>
                        </li>
                        <li><a href="m2.html">M2</a>
                            <ul class="sub">
                                <li><a href="m2_1.html">M2_1</a></li>
                                <li><a href="m2_2.html">M2_2</a></li>
                                <li><a href="m2_3.html">M2_3</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </body>
    </html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Working example: http://jsfiddle.net/Xjj5W/5/

    Just replace .navigation .sub { with .navigation:hover .sub { and change display:none to display:block.. Add a display:none to the .sub

    .sub {
     display: none;
     }

.navigation:hover .sub {
     display: block;
     position: absolute;
     top: 36px;
     left: 0;
     bottom: auto;
     right: auto;
     width: 180px;
     text-align: left;
     z-index: 100;
     box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
     -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
     -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
     border-radius: 0 0 5px 5px;
     -moz-border-radius: 0 0 5px 5px;
     -webkit-border-radius: 0 0 5px 5px;
     }
    • 0