Below code creates a simple drop down menu using the anchor ( <a> ) element and display property in CSS.
XHTML code :
<?xml version="1.0" encoding="utf-8" ?>
<html>
<head>
<title> use display property </title>
<link type="text/css" rel="stylesheet" href="display.css" />
</head>
<body>
<div id="mainmenu"><a class="mainitem" href="#">Menu</a>
<a class="subitem" href="#">Food</a>
<a class="subitem" href="#">Beverages</a>
<a class="subitem" href="#">desserts</a>
</div>
</body>
</html>
display.css
.subitem{
display:none;
}
#mainmenu
{
width:5em;
}
#mainmenu:hover a.subitem{
display:block;
}
#mainmenu a.subitem{
display:none;
}
display:block will display the anchors as one block.
Hope that helps :). Share if you like it.
No comments:
Post a Comment