css menu sub-sub menu

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!-- saved from url=(0014)about:internet -->
<html>
<head>
<title>Plug-in CSS: Example 1</title>
<link rel='stylesheet' type='text/css' href='PC.css' />
<style type='text/css'>
.vmenu, .hmenu { width:150px; }
.vmenu a, .hmenu a { display:table-cell; width:150px; text-decoration:none; }
.vmenu ul, .hmenu ul { border:1px solid #000; margin:0px; padding:0px; }
.vmenu ul li, .hmenu ul li { height:25px; line-height:25px; list-style:none; padding-left:10px; }
.vmenu ul li:hover, .hmenu ul li:hover { position:relative; }
.vmenu ul ul, .hmenu ul ul { display:none; position:absolute; }
.vmenu ul ul { left:125px; top:5px; }
.vmenu ul li:hover ul, .hmenu ul li:hover ul { z-index:1; }
.vmenu ul li:hover ul { display:block; }

.vmenu ul ul li, .hmenu ul ul li { width:150px; float:left; }
.vmenu ul ul li { display:block; }
.vmenu li:hover ul li ul, .hmenu li:hover ul li ul { display:none; }
.vmenu ul ul li ul, .hmenu ul ul li ul { left:137px; }
.vmenu ul ul li:hover ul, .hmenu ul ul li:hover ul { z-index:1; }
.vmenu ul ul li:hover ul { display:block; }
.vmenu1:after, .hmenu1:after { position:relative; top:-25px; float:right; z-index:0; margin-right:10px; content:'bb';
}

</style>
</head>
<body>
<div class='vmenu aqua_b black_l blue_lh u_lh'>
<ul> <!-- Beg Level 1 -->
    <li class='vmenu1'>
        <a href='url'>Item 1</a>
        <ul class='aqua_b'> <!-- Beg Level 2 -->
            <li class='vmenu1'>
                <a href='url'>Item 1-A</a>
                <ul class='aqua_b'>
                    <li><a href='url'>Item 1-A-a</a></li>
                    <li><a href='url'>Item 1-A-b</a></li>
                </ul>
            </li>

            <li><a href='url'>Item 1-B</a></li>
            <li><a href='url'>Item 1-C</a></li>
        </ul>
    </li>

    <li><a href='url'>Item 2</a></li>
    <li><a href='url'>Item 3</a></li>
    <li class='vmenu1'>
        <a href='url'>Item 4</a>
        <ul class='aqua_b'> <!-- Beg Level 2 -->
            <li><a href='url'>Item 4-A</a></li>
            <li class='vmenu1'>
                <a href='url'>Item 4-B</a>
                <ul class='aqua_b'>
                    <li><a href='url'>Item 4-B-a</a></li>
                    <li><a href='url'>Item 4-B-b</a></li>
                    <li><a href='url'>Item 4-B-c</a></li>
                </ul>
            </li>
        </ul>
    </li>

    <li class='vmenu1'>
        <a href='url'>Item 5</a>
        <ul class='aqua_b'>
            <li class='vmenu1'>
                <a href='url'>Item 5-A</a>
                <ul class='aqua_b'>
                    <li><a href='url'>Item 5-A-a</a></li>
                    <li><a href='url'>Item 5-A-b</a></li>
                </ul>
            </li>
            <li><a href='url'>Item 5-B</a></li>
            <li><a href='url'>Item 5-C</a></li>
        </ul>
    </li>
</ul> <!-- End Level 1 -->

</div>

</body>
</html>

Published by

G3n1k

just to remember what i had known :)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s