If you want to create a dropdown Menu in CSS without using JavaScript. This is the right place for you. Code below let’s you make a dropdown menu using css only (no JavaScript). It runs in firefox fine, but haven’t checked it in Internet Explorer.

Code:

<html>
<head>
<title>
Drop-Down Menu
</title>
<style type = "text/css">
body { font-family: arial, sans-serif }
div.menu { font-weight: bold;
color: white;
border: 2px solid #225599;
text-align: center;
width: 140px;
background-color: #225599 }
div.menu:hover a { display: block }
div.menu a { display: none;
border-top: 2px solid #225599;
background-color: white;
width: 140px;
text-decoration: none;
color: black }
div.menu a:hover { background-color: #dfeeff }
</style>
</head>
<body>
<div class = "menu">Menu
<a href = "#">Home</a>
<a href = "#">News</a>
<a href = "#">Articles</a>
<a href = "#">Blog</a>
<a href = "#">Contact</a>
</div>
</body>
</html>
Tagged with: ProgrammingSource Code
 

2 Responses to Dropdown Menu using CSS (no Javascript)

  1. Good Menu Tutorial

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

 

Looking for something?

Use the form below to search the site:


Still not finding what you're looking for? Drop a comment on a post or contact us so we can take care of it!

Related News Feeds

Set your Twitter account name in your settings to use the TwitterBar Section.