PDA

View Full Version : Drop-Down CSS



stick_branch
Mar 17th, 2009, 10:53 PM
Unimpressed with either the quality or licensing of drop-down menus, i decided to develop my own alternatives. Note this only works in Firefox, Safari (non IE browsers) at the moment, but i plan on adding a *.htc file for IE 6 support. I can get menus to drop down but incorrectly, and no matter what i specify i can't seem to get around it. The source code is attached.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
#menu
{
position:relative; /* Sets all child elements to have position:relative */
display:inline;
}
/* This code sets the lists to display without indentation etc. */
#menu ul, #menu ul li, #menu ul ul, #menu ul ul li, #menu ul ul ul, #menu ul ul ul li
{
list-style-type:none; /* Deletes the bullets */
paddding: 0;
margin: 0; /* Deletes Margin & Padding, this is necessary to eliminate the indents and give cross-browser consistency */
display:inline; /* Forces it to ignore standard list formatting to allow horizontal lists */
z-index:100; /* Tells it to display it above other page elements */
}
#menu li
{
float:left; /* Tells browser to line them up sideways */
position:relative; /* Necessary for Horizontal menus */

}
/* Code to hide by default nested */
#menu ul ul
{
visibility:hidden; /* Hides the other nestings */
height:0px;
position:absolute; /* Using relative produces a glitch */
}
/* First level */
#menu ul li:hover ul
{
visibility:visible; /* Displays and prevents it from destroying format */
}
#menu ul li:hover ul ul
{
visibility:hidden; /* We could use display:none, but visibility enables the user to have time to move their mouse */
height:0;
}
/* Second Level */
#menu ul ul li:hover ul
{
visibility:visible;
}



/* This styles the links so they are permanently a certain width */
#menu ul a, #menu ul a:visited
{
display: block; /* Forces the link to obey the width */
background: #eeeeee; /* Background color of links */
color: red; /* Colour of links */
width: 100px; /* Width of link (Should be the same as ul.width) */
line-height:20px;
text-decoration:none;

}
/* This is the style for the block that is currently highlighted. */
#menu ul a:hover
{
background: #cccccc;
display: block;
width: 100px;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<a href=""><li>No Nesting</li></a>
<li><a href="">Nesting One</a>
<ul>
<li><a href="">First Link</a></li>
<li><a href="">Second Link</a></li>
<li><a href="">Third Link</a></li>
</ul></li>
<li><a href="">Nesting Two</a>
<ul>
<li><a href="">First Link</a>
<ul>
<li><a href="">First Link</a></li>
<li><a href="">Second Link</a></li>
<li><a href="">Third Link</a></li>
</ul></li>
<li><a href="">Second Link
<ul>
<li><a href="">First Link</a></li>
<li><a href="">Second Link</a></li>
<li><a href="">Third Link</a></li>
</ul></li>
<li><a href="">Third Link
<ul>
<li><a href="">First Link</a></li>
<li><a href="">Second Link</a></li>
<li><a href="">Third Link</a></li>
</ul></li>
</ul></li>

</div>
</body>
</html>

Now i'm sure the code is fairly correct (except declaring ALL those lists but i'm getting rid of that as it is inherited, not sure why i did do it) but I seem to be having a few issues with it aligning (yes I realise i've made no attempt to move them, but my point is is that it should not have any indentation to begin with.

All thoughts greatly appreciated.

abduraooft
Mar 18th, 2009, 10:12 AM
Add
* {
margin:0;
padding:0;
} into your CSS to remove all browsers specific default values of margins and paddings from all the elements.

stick_branch
Mar 19th, 2009, 03:53 AM
Yes I fixed that issue (I mispely padding, using notepad as at work), but now the IE compatibility issue comes into play, and the *.htc file i've seen other people use refuses to work for me.

kashfun
Mar 19th, 2009, 04:15 PM
i have the same problem

stick_branch
Mar 21st, 2009, 06:06 AM
It'd be nice if someone could help us fix it then hey? I know I would be pretty grateful. I've tried a few .htc files and still the same problem

abduraooft
Mar 21st, 2009, 08:37 AM
I prefer the small javascript snippet given in the http://htmldog.com/articles/suckerfish/dropdowns/ to make the drop down.

kashfun
Mar 21st, 2009, 09:52 AM
i tried suckerfish but it doesn't work. But i tried this .htc, http://www.xs4all.nl/~peterned/csshover.html and it finally works, but now the position is out. :(

ubh
Mar 21st, 2009, 07:08 PM
Hey guys, I dont know if its a little too late but I wrote up a sweet tutorial on how to create a site menu with drop downs using pure css and the .htc file for IE5 and IE6 issues. You might want to check it out, its very thorough in each step.

Menu building tutorial.
http://www.devinrolsen.com/tutorials/css/horz_menu/index.php

.htc fix and implementation.
http://www.devinrolsen.com/tutorials/css/css_hover_fix/index.php

And if you dont want to write anymore code, my menu building tool.
http://www.devinrolsen.com/tools/menu_builder/index.php

Again I really hope this helps a few out there as much as its helped me.

Thanks.

stick_branch
Mar 26th, 2009, 09:38 AM
That didn't help, I could have used any tutorial i wanted.

The point was is I wanted to know why it wouldn't work.

abduraooft
Mar 26th, 2009, 09:47 AM
Where is your code for .htc file?

Excavator
Mar 26th, 2009, 10:48 AM
Hello stick_branch,
Maybe a trip to the validator is in order.
It finds mistakes like these -

<ul>
<a href=""><li>No Nesting</li></a>
<li><a href="">Nesting One</a>
and
</ul></li>
<li><a href="">Second Link
<ul>
<li><a href="">First Link</a></li>
<li><a href="">Second Link</a></li>
<li><a href="">Third Link</a></li>
</ul></li>
<li><a href="">Third Link
<ul>

stick_branch
Mar 26th, 2009, 12:14 PM
Hello stick_branch,
Maybe a trip to the validator is in order.
It finds mistakes like these -

<ul>
<a href=""><li>No Nesting</li></a>
<li><a href="">Nesting One</a>
and
</ul></li>
<li><a href="">Second Link
<ul>
<li><a href="">First Link</a></li>
<li><a href="">Second Link</a></li>
<li><a href="">Third Link</a></li>
</ul></li>
<li><a href="">Third Link
<ul>

Damn this horrible IDE i have. I always validate my code, i'm so sorry.

Anyway, some errors CANNOT be resolved due to the webhost I am on, but having script tags at the end of a document should not impact on a drop down menu's ability.

EDIT: crossover.htc is here stickbranch.uuuq.com/test/style/crossover(2).htc

Excavator
Mar 26th, 2009, 07:24 PM
Damn this horrible IDE i have. I always validate my code, i'm so sorry.


No worries. There were enough errors in the structuring of the ul's I thought it might be an easy fix.
It was working before in FF3, not in IE7 or IE8.

Do you have a link to the demo site? Or can you post the updated code?

stick_branch
Mar 26th, 2009, 10:30 PM
Website Link. (http://stickbranch.uuuq.com/test/styletest.php)

That's where it is hosted at the moment, i'm not sure why it is producing header errors. (I did recently change the doctype to HTML4 strict instead of XHTML 1.1 Strict so the CSS link at the top may be the problem), the only real issue left is that the psuedo:hover doesn't keep the links up when you hover over them. it might be because i'm using a:hover instead of li:hover though.

abduraooft
Mar 27th, 2009, 08:53 AM
You need to add a small javascript snippet to make your :hover work on any element other than anchor in IE. It's well explained in the link provided in my above post.