Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    I tried to implement the following CSS code

    but it will not activate the third level list in Firefox (unless edit CSS in the web developer toolbar is turned on).
    The menu does not work at all in Internet Explorer
    I want to be able to implement this code without JavaScript because I know that some users disable JavaScript.
    The code is from: http://www.devinrolsen.com/pure-css-.../#comment-5149

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <title>Dropdown List</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="main.css" rel="stylesheet" type="text/css" /></link>
    <script type="text/javascript" src="checkValues.js">
    </script>
    </head>
    <body>
    <div id="container">
    <div id="header">
    <h1>A simple webpage with a span dropdown list</h1>
    </div>
    <div id="navigation">
    <ul>
    <li>Item 1
    <ul>
    <li>Sub menu item 1
    <ul>
    <li>Sub Sub Menu Item 1</li>
    <li>Sub Sub Menu Item 2</li>
    <li>Sub Sub Menu Item 3</li>
    <li>Sub Sub Menu Item 4</li>
    </ul>
    </li>
    <li>Sub menu item 2</li>
    <li>Sub menu item 3</li>
    </ul>
    </li>
    <li>Item 2
    <ul>
    <li>Sub menu item 1</li>
    <li>Sub menu item 2
    <ul>
    <li>Sub Sub Menu Item 1</li>
    <li>Sub Sub Menu Item 2</li>
    <li>Sub Sub Menu Item 3</li>
    <li>Sub Sub Menu Item 4</li>
    </ul>
    </li>
    <li>Sub menu item 3</li>
    </ul>
    </li>
    <li>Item 3
    <ul>
    <li>Sub menu item 1</li>
    <li>Sub menu item 2</li>
    <li>Sub menu item 3
    <ul>
    <li>Sub Sub Menu Item 1</li>
    <li>Sub Sub Menu Item 2</li>
    <li>Sub Sub Menu Item 3</li>
    <li>Sub Sub Menu Item 4</li>
    </ul>
    </li>
    </ul>
    </li>
    <li>Item 4
    <ul>
    <li>Sub menu item 1</li>
    <li>Sub menu item 2</li>
    <li>Sub menu item 3</li>
    </ul>
    </li>
    <li>Item 5
    <ul>
    <li>Sub menu item 1</li>
    <li>Sub menu item 2</li>
    <li>Sub menu item 3</li>
    </ul>
    </li>
    </ul>
    </div>
    </div>
    </body>
    </html>

    /*css starts here*/

    body{
    background-color: white;
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 12px;
    margin: 0;
    }
    #container{
    width: 950px;
    margin: 0 auto;
    border: 1px solid #000;
    background-color: #fff;
    }


    #header {
    position: relative;
    border-bottom: 1px solid #000;
    height: 100px;
    text-align: center;
    background-image: url(/graphics/Title.jpg);
    }

    #header h1 {
    margin: 0;
    padding: 0;
    }

    #navigation {
    width:150px;
    font-size:12px;
    }

    #navigation ul {
    margin: 0px;
    padding: 0px;
    background-color: #000;
    }

    #navigation ul li {
    height: 25px;
    line-height: 25px;
    list-style: none;
    padding-left: 10px;
    color: #fff;
    border-top: #fff solid;
    border-bottom: #fff solid;
    border-width: 1px;
    cursor: pointer;
    }

    #navigation ul li:hover {
    background-color: #f90;
    position: relative;
    }

    #navigation ul ul {
    display: none;
    position: absolute;
    left: 150px;
    top: -1px;
    border: #fff solid;
    border-width: 1px;
    background-color: #999;
    }

    #navigation ul li:hover ul {
    display: block;
    }

    #navigation ul ul li {
    border: none;
    width: 150px;
    float: left;
    display: inline;
    }

    #navigation ul ul li:hover {
    text-decoration: underline;
    border: none;
    }

    #navigation li:hover ul li ul {
    display: none;
    position: absolute;
    left: 160px;
    top: -1px;
    border: #fff solid;
    border-width: 1px;
    background-color: #999;
    }

    #navigation ul > ul > ul > ul ul li ul {
    left: 110px;
    background-color: #0099CC;
    }

    #navigation ul ul li:hover ul{
    display: block;
    }

  • #2
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    I noticed two mistakes

    I forgot to declare a doctype and I had a /link tag after the section where I included the CSS. (allows the code to work the same in Firefox and in Internet Explorer)

    The third level lists (the sub sub items) still do not work.


  •  

    Posting Permissions

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