Welcome to WebmasterWorld Guest from 54.161.116.225

Forum Moderators: not2easy

Message Too Old, No Replies

pure CSS dropdown

How to create the 'Drop-down' part for a 'mega-dropdown'

     
12:49 pm on Nov 4, 2009 (gmt 0)

Junior Member

10+ Year Member

joined:Mar 31, 2004
posts:115
votes: 0


I finished creating the menu itself (see code below), following an example I saw in the article 'Mega Drop-Down Navigation Menus Work Well' by J. Nielsen.

I now want the #megadrop1 block to 'pop up' when hovering over the H1, using pure CSS, no Javascript (except to fix versions of IE).

I've seen some code examples about how to do it using nested lists, but I think this is actually some really nice semantic code for this purpose (h1 followed by h2 followed by a list of 'topics') and I would like to keep it if possible.

Also I found a lot of code examples about 'pure CSS drop downs', but unfortunately no step-by-step tutorials... if anyone has a link, you can PM me.


<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en" lang="en">
<head>
<title>megadropdown</title>

<style type="text/css">
<!--

body {
background: #fff;
}

#megadrop1 {
width: 400px;
height: 100%;
float: left;
/* background: transparent url(border-bottom.gif) bottom left no-repeat; */
background: #ccc;
}

ul, h2 {
font-family: "Andale Mono";
font-size: 0.8em;
font-weight: bold;
color: #333;
line-height: 1.6em;
}

h2 {
font-size: 1.2em;
}

ul.menuoptions {
float: left;
margin: 0 0 0 0; padding: 4px 0px 4px 0px;
width: 100%;
list-style-type: none;
list-style-position: inside;
}

ul.menuoptions li {
float: left;
width: 45%;
padding-left: 5%;
}

ul.menuoptions li.fullwidth {
float: left;
width: 90%;
padding-left: 5%;
}

ul.menuoptions li a {
background: url(bullet.gif) no-repeat center left;
padding-left: 12px;
text-decoration: none;
color: #333;
display: block;
float: left;
outline: none;
}

ul.menuoptions li a:hover {
color: #f90000;
font-weight: bold;
}

h2#firstnav {
margin: 0 0 0 0; padding: 0 0 0 5%;
background: #fff url(border-top.gif) top left no-repeat;
color: #fff;
background: #999;
}

h2.section {
margin: 0; padding: 0 0 0 5%;
/* background: url(b-header.gif) top left no-repeat; */
background: #999;
color: #fff;
clear: both;
}

-->
</style>


</head>
<body>

<div id="wrapper">

<h1><a href="#">Main Menu Item</a></h1>

<div id="megadrop1">
<!-- Sectie 1 -->
<h2 id="firstnav">Section One</h2>
<ul class="menuoptions">
<li><a href="#anchor">Item One</a></li>
<li><a href="#anchor">Item Two</a></li>
</ul>

<h2 class="section">Section Two</h2>

<ul class="menuoptions">
<li><a href="#anchor">Item One</a></li>
<li><a href="#anchor">Item Two</a></li>
<li><a href="#anchor">Item Three</a></li>
</ul>

<h2 class="section">Section Three</h2>
<ul class="menuoptions">
<li><a href="#anchor">Item One</a></li>
<li><a href="#anchor">Item Two</a></li>
<li><a href="#anchor">Item Three</a></li>
<li><a href="#anchor">Item Four</a></li>
<li class="fullwidth"><a href="#anchor">Item Five Which Is A Very Long One</a></li>
</ul>

<h2 class="section">Section Four</h2>
<ul class="menuoptions">
<li><a href="#anchor">Item One</a></li>
<li><a href="#anchor">Item Two</a></li>
<li><a href="#anchor">Item Three</a></li>
</ul>

</div>
</div>

</body>
</html>

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members