Dear Experts

I refer to this link
http://css.dzone.com/news/css-and-html-two-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.

<!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>

Recommended Answers

All 2 Replies

Moved to CSS board.

hey, please be more specific about the errors you are getting...

also your article seems nice and all but in case you would like to compare diferent methods of doing css-only menus i found this today: http://meyerweb.com/eric/css/edge/menus/demo.html , perhaps this site would point out something the first one missed, i didn't read it all.

but yeah, if you want help give us errors!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.