Practice Exams for Windows

Practice Exams for Windows

Monday, 6 October 2008

My pure CSS drop-down menu (Version 2)

Here is the source code of the improved version. This works on the following browsers:
  • Mozilla Firefox 2
  • Internet Explorer 7, 8 Beta 2 (with hacks)
  • Apple Safari
  • Google Chrome
Hacks for Internet Explorer are shown in BOLD in the source code.

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
* {margin: 0; padding: 0;}
#navigation {height: 20px;}
#navigation #item1 {float: left; width: 150px; background: #ccc; text-align: center;}
#navigation #item2 {float: left; width: 150px; background: #ccc; text-align: center;}
#navigation #item3 {float: left; width: 150px; background: #ccc; text-align: center;}
#navigation li {list-style: none; width: 150px;}
#navigation ul {background: #999; display: none; text-align: center;}
#navigation #item1:hover > ul {display: block; position: absolute; *position: relative; *top: 0; *left: 0;}
#navigation #item2:hover > ul {display: block; position: absolute; *position: relative; *top: 0; *left: 0;}
#navigation #item3:hover > ul {display: block; position: absolute; *position: relative; *top: 0; *left: 0;}
}
-->
</style>
</head>

<body>
<div id="navigation">
<div id="item1">
<a href="item1.html">Item 1</a>
<ul>
<li><a href="item1-1.html">Item 1.1</a></li>
<li><a href="item1-2.html">Item 1.2</a></li>
</ul>
</div>
<div id="item2">
<a href="item2.html">Item 2</a>
<ul>
<li>Item 2.1</li>
<li>Item 2.2</li>
</ul>
</div>
<div id="item3">
<a href="item3.html">Item 3</a>
<ul>
<li>Item 3.1</li>
<li>Item 3.2</li>
</ul>
</div>

</div>
<div style="clear:both;"></div>
<p>paragraph below nav. paragraph below nav. paragraph below nav. paragraph below nav. paragraph below nav</p>
</body>
</html>

1 comment:

  1. Wayne,
    I just tried out your pure CSS drop-down menu - both versions.

    While they both work just fine in Flock 2.0.2, I noticed that version 2 has an extra } at the end of your CSS in the header.

    I didn't see the changes in BOLD as you indicated that I should. Fortunately, it was easy to see your changes by just comparing the two versions.

    Thanks for sharing...

    ReplyDelete