Wednesday, 21 December 2016

HTML Menu

<!doctype html>
<html>
<head>

<style>
ul, li{ padding:0px}
ul{ list-style:none}
a{ text-decoration:none}
.navtop { background:#333; height:40px; color:#fff}
.navtop h3{ padding:5px; color:black; text-shadow:0px 0px 1px red; text-shadow: 1px 1px 1px red, -1px -1px 1px blue;}
.navtop > ul{ float:left; position:relative; z-index:1; margin:0px}
hgroup{ float:left}
.navtop form{ float:right; padding:10px 10px}
.navtop > ul > li{ float:left; border-right:1px solid #fff; }
.navtop ul li a{ display:block; padding:10px 20px; color:#ccc}
.navtop ul li a:hover{ background:#f00; color:#fff}
.navtop ul .last{ border:none}
.navtop > ul > li:hover > ul{ display:block}
.navtop > ul > li > ul > li:hover ul{ display:block}
.footer{ background:#333; color:#ccc; text-align:center}
.clear{ clear:both}
.navtop > ul > li > ul li{ height:41px}
.navtop > ul > li > ul{ display:none; position:absolute; background:#333; }
.navtop > ul > li > ul > li > ul{ display:none; position:relative; left:132px; top:-41px; background:#333}
.navtop ul ul li{ border-top:1px solid #fff;}
</style>

</head>
<body >

        <p>Browser's view :</p>
        <div style="height:400px" class="highlight section" id="article3">
            <div class="navtop">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a>
                    <ul>
                        <li><a href="#">Why We</a></li>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">History</a></li>
                    </ul>
                </li>
                <li><a href="#">Career</a></li>
                <li><a href="#"><b class="caret"></b>Training</a>
                    <ul>
                        <li><a href="#">Asp.net</a>
                            <ul>
                                <li><a href="#">Core  Asp.net</a></li>
                                <li><a href="#">Adv .Net</a></li>
                                <li><a href="#">MVC</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Web Designing</a>
                            <ul>
                                <li><a href="#">HTML</a></li>
                                <li><a href="#">CSS</a></li>
                                <li><a href="#">Photoshop</a></li>
                            </ul>               
                        </li>
                        <li><a href="#">Java</a>
                            <ul>
                                <li><a href="#">Core Java</a></li>
                                <li><a href="#">Adv Java</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Php</a>
                            <ul>
                                <li><a href="#">Core Phpp</a></li>
                                <li><a href="#">My Sql</a></li>
                                <li><a href="#">Wordpress</a></li>
                                <li><a href="#">Joomla</a></li>
                            </ul>
                        </li>
                        <li><a href="#">SQT</a>
                            <ul>
                                <li><a href="#">HTML</a></li>
                                <li><a href="#">CSS</a></li>
                                <li><a href="#">Photoshop</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li class="last"><a href="#">Contact</a></li>
            </ul>
            <br>
            <h3>CSS Drop Down Menu</h3>
            </div>
        </div>
        <hr>
        </body>
</html>

No comments:

Post a Comment

Oracle Reserved Words

Oracle  Reserved Words The following words are reserved by Oracle. That is, they have a special meaning to Oracle and so cannot be redefi...