Today I learn about the drop-down menu made with css style. I learn from the web of others, and try it out on my own blog.
Because this code is very interesting and very simple, I'd like to share with your readers.
This is the code:
Because this code is very interesting and very simple, I'd like to share with your readers.
This is the code:
<html>
<head>
<style type="text/css">
body { font-family: Verdana; }
div.mainmenu {
position: absolute;
left: 10px;
top: 0px;
font-weight: bold;
z-index: 1;
}
div.menu {
float: left;
margin-left: 10px;
}
div.popup a:hover { background-color: #faa; }
div.menu:hover div:first-child { border-bottom: none; }
div.menu div.popup { display: none; }
div.menu:hover div.popup {
display: block;
background-color: #99f;
}
div.menu div {
width: 175px;
background-color: #66f;
padding: 5px;
border: solid 1px blue;
}
div.popup div, div.popup a { display:block; text-decoration: none; margin: 2px 2px 2px 5px; }
div.popup div + div, div.popup a + a { margin-top: 10px; }
div.content {
position: absolute;
left: 20px;
top: 30px;
border: 1px dashed gray;
}
</style>
</head>
<body>
<div class="mainmenu" id="mainmenu">
<div class="menu">
<div>CSS</div>
<div class="popup">
<a href="index.html">The menu</a>
<a href="#">Nowhere</a>
<a href="#">Nowhere</a>
</div>
</div>
<div class="menu">
<div>Fish</div>
<div class="popup">
<a href="#">One fish</a>
<a href="#">Two fish</a>
<a href="#">Red fish</a>
<a href="#">Blue fish</a>
</div>
</div>
<div class="menu">
<div>JavaScript</div>
<div class="popup">
<a href="highlight.html">Highlighting</a>
<a href="#">Nowhere</a>
<a href="#">Also nowhere</a>
</div>
</div>
<div class="menu">
<div>Oxo</div>
<div class="popup">
<a href="#">Nowhere</a>
<a href="#">Nowhere else</a>
<a href="#">And nowhere</a>
<a href="#">Nowhere too</a>
</div>
</div>
</div>
<div class="content">
... some content
</div>
</body>
</html>
For the example, you can watch at the top of the my blogger.
Hopefully, this lesson gives you the benefits for all :D
0 comments:
Post a Comment