Ad Code

Submenu or Dropdown Menu in horizontal Main Menu

June 27, 2016
Advertisements
Submenu/Dropdown Menu in horizontal Main Menu:
This section will explain the drop down menu or submenu in horizontal Menu. In modern interactive web designing, drop down menus appear very frequently.
Script to Sub Menu/Dropdown Menu


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML

1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd"> <html

xmlns="http://www.w3.org/1999/xhtml"> <head>

<title>Example of HTML Menu</title> <style

type="text/css" media="screen"> #nicefooter ul {

padding:1; margin:1; list-style:none; } #nicefooter li {

float:left; position:relative; padding: 3px 0px 3px 10px;

display:block; border: 0px solid #CC55FF; background:

#c0c0c0; } #nicefooter li a {color:#000; text-

decoration:none;display:block; border-right:1px solid

#CC55FF;padding-right:10px;} #nicefooter li a:hover

{color:#fff; text-decoration:none;} #nicefooter li ul li a

{color:blue; text-

decoration:none;border:0;padding:0;display:block;

width:7em;} #nicefooter li ul li a:hover{color:red; text-

decoration:none;} #nicefooter li ul { display:none;

position:absolute; } #nicefooter li ul, #nicefooter li:hover

ul li ul { display:none; position:absolute; } #nicefooter

li:hover ul{ display:block; background:white; border:

1px solid #c0c0c0; -webkit-border-radius: 10px; -moz-

border-radius: 10px; border-radius: 10px; behavior: url

('PIE.php'); height:auto; width:8em; z-index:1000;

padding: 5px; } #nicefooter li ul li:hover ul{

display:block; background:white; border: 1px solid

#c0c0c0; -webkit-border-radius: 10px; -moz-border-

radius: 10px; border-radius: 10px; behavior: url

('PIE.php'); height:auto; width:8em; z-index:1000;

padding: 5px; margin-left: 70px; margin-top: 0; top: -

5px; } #nicefooter li ul li{ clear:both; border-style:none;

background: white; padding: 0;} </style> </head>

<body> <div id="nicefooter"> <ul> <li><a

href="#">News</a> <ul> <li><a

href="#">National</a></li> <li><a

href="#">International</a></li> <li><a

href="#">Sport</a></li> <li><a

href="#">Hollybood</a></li> </ul> </li> <li> <a

href="#">Technology</a> <ul> <li><a

href="#">IT/Software</a></li> <li><a

href="#">Hardware</a></li> <li><a

href="#">Iphone</a></li> <li><a href="#">Neuro-

Science</a></li> </ul> </li> <li> <a

href="#">Sports</a> <ul> <li><a

href="#">Cricket</a></li> <li><a

href="#">Tenis</a></li> <li><a

href="#">Badminton</a></li> <li><a

href="#">Hockey</a></li> </ul> </li> <li><a

href="#">Country</a> <ul> <li><a

href="#">India</a></li> <li><a href="#">America</a>

<ul> <li><a href="#">India</a></li> <li><a

href="#">America</a></li> <li><a

href="#">France</a></li> <li><a

href="#">Pakistaan</a></li> </ul> </li> <li><a

href="#">France</a></li> <li><a

href="#">Pakistaan</a></li> </ul> </li> </ul> </div>

<p> </p> <p> </p> <p> </body> </html>

Out Put


Submenu or Dropdown Menu in horizontal Main Menu
Download Link
Advertisements