www.webdeveloper.com
Results 1 to 3 of 3

Thread: Two level menu

  1. #1
    Join Date
    Dec 2011
    Posts
    39

    Two level menu

    Dear Experts

    I refer to this link
    http://css.dzone.com/news/css-and-ht...-level-menus-t

    with the help of above link, I am trying to create CSS And HTML Two Level Menus.

    For this I copy following codes but it has some error.
    Please help me to correct my codes.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
            <title>HTML and CSS Drop Down Menu</title>
    
    <style type="text/css">
    #nav li.second-level
    {
        position:relative;
    }
    
    #nav li ul
    {
        display:none;
    }
    
    #nav li:hover ul, #nav li:focus ul
    {
        position:absolute;
        display:block;
    }
    
    #nav li ul li
    {
        float:none;
        border-top:1px solid #fff;
    }
    
    #nav li:hover ul, #nav li:focus ul
    {
        position:absolute;
        top:0;
        margin-left:100%;
        display:block;
    }
    
    #nav li.second-level li
    {
        border-left:5px solid #376D00;   
    }
    </style>
    
    
        </head>
        <body>
            <ul id="nav">
        <li><a href="index.html" title="return to front page">Home</a></li>
        <li class="second-level"><a href="about.html" title="learn more about us">About</a>
        <ul>
            <li>Corporate Profile</li>
            <li>Employee Profiles</li>
            <li>Divisions</li>
        </ul>
        </li>
        <li><a href="portfolio.html" title="see some samples of our work">Portfolio</a></li>
        <li><a href="contact.html" title="contact us">Contact</a></li>
    </ul>
        </body>
    </html>

  2. #2
    Join Date
    Feb 2012
    Posts
    61
    remove margin-left.......
    #nav li:hover ul, #nav li:focus ul{
    margin-left:100%;
    }

    hope it will be helpfull...........

  3. #3
    Join Date
    Dec 2011
    Posts
    39
    Problem solved
    Thanks

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