dcsimg
www.webdeveloper.com
Results 1 to 10 of 10

Thread: CSS Dropdown menu not working in Safari/Chrome

  1. #1
    Join Date
    Mar 2012
    Posts
    9

    CSS Dropdown menu not working in Safari/Chrome

    http://hrrubin.dk/
    I have a troublesome dropdown menu, consisting of css.
    Need a suggestion to what is wrong. Validating the site didnīt help.

    Site is working in: firefox, ie and opera

  2. #2
    Join Date
    Mar 2012
    Posts
    1,814
    You really have to give better info than that. If you cannot be bothered to copy and paste the relevant code from your site, why, and how, do you expect anyone to help you?

  3. #3
    Join Date
    Mar 2012
    Posts
    9
    You are right of course:
    I have three stylesheets that control the dropdown. It was a pre-made code i downloaded and then tried to compress into one css file without succes.

    CSS: dropdown.linear.css
    ul.dropdown-linear {
    width: auto;
    }

    ul.dropdown-linear ul li {
    float: left;
    }

    ul.dropdown-linear li.hover,
    ul.dropdown-linear li:hover {
    position: static;
    }

    ul.dropdown-linear ul ul {
    display: none !important;
    }

    dropdown.css
    ul.dropdown,
    ul.dropdown li,
    ul.dropdown ul {
    list-style: none;
    margin: 0;
    padding: 0;
    }

    ul.dropdown {
    position: relative;
    z-index: 597;
    float: left;
    margin-left:40px;
    margin-top:30px;
    }

    ul.dropdown li {
    float: left;
    line-height: 2.5em;
    vertical-align: middle;
    }

    ul.dropdown li.hover,
    ul.dropdown li:hover {
    position: relative;
    z-index: 599;
    cursor: default;
    }

    ul.dropdown ul {
    visibility: hidden;
    position: absolute;
    top: 100%;
    left:0;
    z-index: 598;
    width: auto;
    }

    ul.dropdown ul li {
    float: none;
    }

    ul.dropdown ul ul {
    top: 1px;
    left: 99%;
    }

    ul.dropdown li:hover > ul {
    visibility: visible;
    }

    default.linear.css

    ul.dropdown {

    font-family: 'BookmanOldStyleBold';
    font-size:1em;
    font-weight:normal;
    text-decoration:none !important;
    display:block;
    line-height:2.5em;
    width:960px;
    }

    ul.dropdown li {
    padding-left:30px;
    padding-right:30px;
    }

    ul.dropdown li:hover,
    ul.dropdown li:hover {
    height:2.5em;
    display:block;
    width:auto;
    background-color:#000;
    }

    ul.dropdown ul {
    width: auto;
    background-color:#000;
    }

    ul.dropdown ul li {
    }

    ul.dropdown ul li.hover {
    margin: 0;

  4. #4
    Join Date
    Mar 2012
    Posts
    1,814
    This is just the CSS definitions of the layout. I would need an example of the list code in the html file to make sense of it. Unfortunately, I cannot assist further than that. I would have thought that would be documented where you got the CSS from. Also, I would suspect that you need separate CSS files, but without the code, I'm not certain of that.

    I hope that helps...
    Last edited by jedaisoul; 03-12-2012 at 06:05 AM.

  5. #5
    Join Date
    Mar 2012
    Posts
    1,814
    Ok, I've worked through it, and you simply cannot do this with CSS. It has to be done in JavaScript, or a similar programming language. Here is an example:

    1. Set up a simple two level unordered list in HTML:

    <ul>
    <li>opt 1
    <ul id="ddrop1">
    <li>opt a</li>
    <li>opt b</li>
    <li>opt c</li>
    </ul></li>
    <li>opt 2
    <ul id="ddrop2">
    <li>opt a</li>
    <li>opt b</li>
    <li>opt c</li>
    </ul></li>
    <li>opt 3
    <ul id="ddrop3">
    <li>opt a</li>
    <li>opt b</li>
    <li>opt c</li>
    </ul></li>
    </ul>

    2. Add CSS code to make the second level entries disappear:

    #ddrop1,
    #ddrop2,
    #ddrop3 {
    display: none;
    }

    3. Add JavaScript functions in the HTML header:

    <script type="text/javascript">
    function dispblock(x) {
    document.getElementById(x).style.display="block";
    }
    function dispnone(x) {
    document.getElementById(x).style.display="none";
    }
    </script>

    4. Amend the first level list entries to call the JavaScript:

    <ul>
    <li onmouseover='dispblock("ddrop1")' onmouseout='dispnone("ddrop1")'>opt 1
    <ul id="ddrop1">
    <li>opt a</li>
    <li>opt b</li>
    <li>opt c</li>
    </ul></li>
    <li onmouseover='dispblock("ddrop2")' onmouseout='dispnone("ddrop2")'>opt 2
    <ul id="ddrop2">
    <li>opt a</li>
    <li>opt b</li>
    <li>opt c</li>
    </ul></li>
    <li onmouseover='dispblock("ddrop3")' onmouseout='dispnone("ddrop3")'>opt 3
    <ul id="ddrop3">
    <li>opt a</li>
    <li>opt b</li>
    <li>opt c</li>
    </ul></li>
    </ul>

    I suggest you crate a test page using this code EXACTLY, so you can see how it works. Then incorporate it in your own site.

  6. #6
    Join Date
    Mar 2012
    Posts
    9
    Thank you, this will help.

  7. #7
    Join Date
    Mar 2012
    Posts
    1,814
    The example I've given works, but jumps about because the second level entries are interspersed between the first level ons. You really want to segregate them. Only I found that just linking the first level entries to the javascript does not work well like that. The problem is that you have to link the first level entries to make the second level appear, but as you mouse off the first level to the second, the entries disappear! The solution I've found is to link the second level as well. So the HTML code becomes:

    <div id="menu1">
    <ul>
    <li onmouseover='dispblock("ddrop1")' onmouseout='dispnone("ddrop1")'>opt 1</li>
    <li onmouseover='dispblock("ddrop2")' onmouseout='dispnone("ddrop2")'>opt 2</li>
    <li onmouseover='dispblock("ddrop3")' onmouseout='dispnone("ddrop3")'>opt 3</li>
    </ul>
    </div>
    <div id="menu2_1">
    <ul id="ddrop1" onmouseover='dispblock("ddrop1")' onmouseout='dispnone("ddrop1")'>
    <li>opt a</li>
    <li>opt b</li>
    <li>opt c</li>
    </ul>
    </div>
    <div id="menu2_2">
    <ul id="ddrop2" onmouseover='dispblock("ddrop2")' onmouseout='dispnone("ddrop2")'>
    <li>opt a</li>
    <li>opt b</li>
    <li>opt c</li>
    </ul>
    </div>
    <div id="menu2_3">
    <ul id="ddrop3" onmouseover='dispblock("ddrop3")' onmouseout='dispnone("ddrop3")'>
    <li>opt a</li>
    <li>opt b</li>
    <li>opt c</li>
    </ul>
    </div>

    And the CSS code is:

    #ddrop1,
    #ddrop2,
    #ddrop3 {
    display: none;
    }
    #menu1 {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 80px;
    z-index: 2;
    }
    #menu2_1 {
    position: absolute;
    left: 60px;
    top: 0px;
    width: 80px;
    z-index: 3;
    }
    #menu2_2 {
    position: absolute;
    left: 60px;
    top: 20px;
    width: 80px;
    z-index: 3;
    }
    #menu2_3 {
    position: absolute;
    left: 60px;
    top: 40px;
    width: 80px;
    z-index: 3;
    }

    The JavaScript functions in the HTML header are unchanged:

    <script type="text/javascript">
    function dispblock(x) {
    document.getElementById(x).style.display="block";
    }
    function dispnone(x) {
    document.getElementById(x).style.display="none";
    }
    </script>
    Last edited by jedaisoul; 03-13-2012 at 03:58 AM.

  8. #8
    Join Date
    Feb 2012
    Location
    Bokaro Steel City (Jharkhand), India!
    Posts
    194

    Smile

    Quote Originally Posted by jedaisoul View Post
    ...has to be done in JavaScript, or a similar programming language.
    Dear, JavaScript is NOT a programming language!
    It is just a client-side scripting language!

  9. #9
    Join Date
    Mar 2012
    Posts
    1,814
    Quote Originally Posted by TheAliveWinner View Post
    Dear, JavaScript is NOT a programming language!
    It is just a client-side scripting language!
    I think that comment is not helpful. A client-side scripting language IS a programming language. By the way, I've written extensive code (in the past) in MSDOS batch language TSX script and a little in VAX and Alpha script. Client-side scripting languages are almost as old as digital computing itself.

  10. #10
    Join Date
    Mar 2012
    Posts
    9
    It would seem I can't find out how to make this menu horizontal. The usual way is not working, so I'm not making the right path - or is javascript preventing me somehow?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles