WELCOME TO BHATI TRICKS WRITE FOR US ADVERTISE YOUR BLOG/SITE HERE POST YOUR ARTICLE/TRICK HERE


Thursday, 27 June 2013

MAKE A SIMPLE DROP DOWN MENU WITH CSS


HOW TO MAKE A SIMPLE DROP-DOWN MENU IN CSS
MAKE-A-DROP-DOWN-MENU-WITH-CSS


Drop-down menu is very  important  in web designing. It plays a major role in making of an stylish and user friendly website.you can also change it’s background colour. you can also customize it. You can divide it in child menu and sub menu very simply.For drop-down menu, you have to create a CSS and web page
Firstly you have to create a web page.
step 1:-Open notepad,and paste the yellow lighted code.
step 2:-Save it as menu.html.
<html>
<body>
<ul id="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">DOWNLOADS</a>
        <ul>
            <li><a href="#">CD</a></li>
            <li><a href="#">SONG</a></li>
            <li><a href="#">SOFTWARE</a></li>
        </ul>
    </li>
    <li><a href="#">HEALTH</a>
        <ul>
            <li><a href="#">DOCTOR</a></li>
            <li><a href="#">MEDICINE</a></li>
            <li><a href="#">HOSPITAL</a></li>
                   </ul>
    </li>
    <li><a href="#">Contact US</a>
        <ul>
            <li><a href="#">Online</a></li>
            <li><a href="#">FAQ</a></li>
            <li><a href="#">E-MAIL</a></li>
        </ul>
    </li>
</ul>
</body>
</html>

NOW YOU HAVE TO CREATE A CSS FILE TO THAT WEB PAGE.
step3:- Open notepad, and paste the following code.
ul {
    font-size: 20px;
    margin: 0;
    padding: 0;
    font-family: LED, Verdana;
    list-style: none;
}
ul li {
     float: left;
    display: block;
    position: relative;
    
}
li ul {
    display: none;
}
ul li a {
    display: block;
    text-decoration: none;
    color: #ffffff;
    border-top: 1px solid #ffffff;
    padding: 4px 16px 5px 15px;
    background: #00cbcc;
    margin-left: 5px;
    white-space: nowrap;
}
ul li a:hover {
background: #00cbcc;
}
li:hover ul {
    display: block;
    position: absolute;
}
li:hover li {
    float: none;
    font-size: 12px;
}
li:hover a { background: #3b3b3b; }
li:hover li a:hover {
    background: #00cbcc;
}

STEP 4:-Save it as menu.css in same directory.
Now you have to insert it into html web page.
step 5:-Now open menu.html with notepad,and paste the following code after the <body> tag.

<link rel="stylesheet" type="text/css" href="mystyles.css"  />

step 6:-Now,you have to change the given path of css file in above script.(path of menu.css)
ex:-<link rel="stylesheet" type="text/css" href="E:\blogging\menu.css" />

step 7:-Then save it, and the task is totally completed.
NOTE:-YOU CAN ALSO CUSTOMIZE THE SIZE OF LIST, SPACE BETWEEN THEM, COLOUR OF IT.
MAKE-A-DROP-DOWN-MENU-WITH-CSS
If you got lost at any point please leave a comment for us.




Kindly Bookmark this Post using your favorite Bookmarking service:
Technorati Digg This Stumble Stumble Facebook Twitter

0 comments:

Post a Comment

 

ABOUT THE AUTHOR

Founder & Author:I ABHISHEK BHATI student of COMPUTER SCIENCE by education a Blogger by profession and compueters and electronics is my passion BHATI TRICKS is not start of blogging ABHISHEK BHATI launched his frist Marketing Site in 2013.
...Read More

GET FREE EMAIL UPDATES

Join us for free and get valuable content delivered right in your inbox.



recent comments

BHATI TRICKS Widget

| BHATI TRICKS © BHATI TRICKS. All Rights Reserved | | Back To Top |