Skip to main content

CREATE A SIMPLE CSS DROPDOWN MENU

Learn to create a very simple CSS dropdown menu with solely HTML and CSS. This is a very useful and small dropdown menu without the use of javascript!

Let me start with the CSS code, edit the colors and sizes to suit your websites needs:

ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #1e7c9a;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover {
background: #3b3b3b;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #3b3b3b; }
li:hover li a:hover {
background: #1e7c9a;
}




Next is the HTML code. It is structured as nested lists so that even displaying the HTML source code without any CSS style will render it with a useful structure.

<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a>
<ul>
<li><a href="#">The Team</a></li>
<li><a href="#">History</a></li>
<li><a href="#">Vision</a></li>
</ul>
</li>
<li><a href="#">Products</a>
<ul>
<li><a href="#">Cozy Couch</a></li>
<li><a href="#">Great Table</a></li>
<li><a href="#">Small Chair</a></li>
<li><a href="#">Shiny Shelf</a></li>
<li><a href="#">Invisible Nothing</a></li>
</ul>
</li>
<li><a href="#">Contact</a>
<ul>
<li><a href="#">Online</a></li>
<li><a href="#">Right Here</a></li>
<li><a href="#">Somewhere Else</a></li>
</ul>
</li>
</ul>


That is it, very simple and easy to customize! Click below for a live demo…
You can see a LIVE PREVIEW here
Labels:

Comments

Post a Comment

Popular posts from this blog

75 Surprisingly Creative Facebook Timeline Covers

Now that you have shifted to “Facebook Timeline” to display you profile in a better way, get creative with it. Facebook timeline gives you a chance to turn you profile exclusive and innovative. Putting up a personal picture as cover, will only make you look outdated. You can try some exciting covers to design your very own Facebook profile in distinguished style. We have scrounged through web to pick 75 amazing Facebook Timeline covers for this list. Unique cover pictures can give your timeline a different-from-the-rest look. You can create your own creative covers picking ideas from these cool pictures listed below. If you like this article, you might be interested in some of our other articles on  Facebook Scripts, Best Facebook Apps, Best Facebook Games, and Facebook Tips You Should Check . Ekkapong Techawongthaworn Be a brand ambassador and flaunt your fanaticism for gadgets and shopping on your cover. Ekkapong Techawongthaworn Gabriel Fort A snapshot of an App...
Post a Comment
Read more

PHP File Upload

With PHP, it is possible to upload files to the server. Create an Upload-File Form To allow users to upload files from a form can be very useful. Look at the following HTML form for uploading files: <html> <body> <form action="upload_file.php" method="post" enctype="multipart/form-data"> <label for="file">Filename:</label> <input type="file" name="file" id="file" /> <br /> <input type="submit" name="submit" value="Submit" /> </form> </body> </html> Notice the following about the HTML form above: The enctype attribute of the <form> tag specifies which content-type to use when submitting the form. "multipart/form-data" is used when a form requires binary data, like the contents of a file, to be uploaded The type="file" attribute of the <input> tag specifies that the input sho...
Post a Comment
Read more

Send Mail using mail function in PHP

$to = "admin@user.vn"; $subject = "User.vn"; $body = "Body of your message here you can use HTML too. e.g. <br> <b> Bold </b>"; $headers = "From: Peter"; $headers .= "Reply-To:  info@yoursite.com "; $headers .= "Return-Path: mailto:info@yoursite.com"; $headers .= "X-Mailer:PHP5"; $headers .= 'MIME-Version: 1.0"; $headers .= 'Content-type: text/html; charset=iso-8859-1"; mail($to,$subject,$body,$headers);
Post a Comment
Read more