Simple CSS Drop-down menu

HTML & CSS
1

Hi.
I want a very simple drop-down navbar, but not knowing JavaScript I was hoping to do it with CSS.

But here’s the rub, although I can certainly find plenty of CSS drop-down menus on the web I desperately need to keep it simple as still I’m still learning I want to understand just how it works, then build on it. Just downloading one won’t help me. When I can use one that I can understand I can then build on it (transforms/transitions etc…). The ones I have downloaded, when I took a look at the code they are so very complicated, no help at all to assist me in my understanding of CSS.

I have come-up with a very simple one but although it works fine in all modern browsers, including IE8… :open_mouth:

1). In IE7 the curser doesn’t change into a hand but remains a pointer. Also the outer box doesn’t wrap around the inner three.

2). In IE6, the same as IE7 plus…well it just doesn’t work at all.

3). Using the iPhone Simulator (Mac). it looks fine with the outer box wrapping around the inner, but it doesn’t recognise it as a button at all.

Here’s my simple code…


<!DOCTYPE HTML>
<html>
<head>
 <title></title>
 </head>
 <style>
 div.box {
 height: 50px;
 background-color: red;
 width: 200px;
 margin: 5px;
 text-align: center;}
 
 div#box {
 height: 60px;
 overflow: hidden;
 border: 1px solid gray;
 display: inline-block}
 
 div#box:hover {
 height: 170px;}
  
 div.box:hover {
 background-color: green;}
 </style>
 <body>

<div id="box">
<a href=""><div class="box">One</div></a>
<a href=""><div class="box">Two</div></a>
<a href=""><div class="box">Three</div></a>
</div>

</body></html>

I know I can target IE7 and IE6 with conditional comments and the iPhone with a media query but what to do to fix them…that I don’t know.

Maybe I’m approaching this completely wrong, if so please steer me in the right direction. Any help appreciated only…if possible keep it simple. Although I really want a drop a down menu, that is only half the story…I really need to understand it to.

Regards, Karl.

2

Hi,

You have 2 main problems before you can move on with this.

The first is that anchors cannot hold div elements. The div must be around the anchor.

You can set the anchor to display:block and then it will be as big as the div that holds it.

The second is that IE6 only understands hovers on anchors so you cannot do this for IE6 unless you use one of the following methods:

use a javascript helper

use Stu Nichols (CSSPlay) nested tables hidden in conditional comments to allow nested anchors,

or use Timos pure css menu that is extremely complicated and difficult to manage if you don’t understand it (see the previous CSS quiz). (Stu made a version based on the [URL=“http://www.cssplay.co.uk/menus/new-dropdown.html”]same concept here.)

The simplest solution for IE6 is to use the js helper as documented in the suckerfish site.

There is nothing complicated about a dropdown menu as in essence you just make a child appear when you hover over the parent.

However there are a number of bugs and obstacles to overcome.

Firstly do not use display:none as this is bad for accessibility, seo, and all sorts of other things. Make the child absolute and then move the text off screen preferably with margin-left:-999em and then bring it back width margin-left:0. This avoids some IE bugs when hiding with left:-999em.

The rest is just decoration :slight_smile:

3

Hey, thanks Paul O’B.

Just had a quick read, I’ll go through it more thoroughly later when I have the time.
Maybe I could pretend that IE6 doesn’t exist, that solution has worked quite well in the past…IE6, whats that? :slight_smile:

Thanks again Paul, appreciated.

Karl.