Mobile Friendly Website

CSSPLAY

Doing it with style

dropdown examples COMMENTS

Welcome to my Comments Pages

Please note. I get a few hundred emails a week from visitors asking for help, or posing questions on how to modify my demos to suit their application and I read them all. Unfortunately I only have a limited amount of time to spend answering these questions.

So if I do not reply, please do not be offended, and if I do reply then you are one of the lucky ones.

If you are asking for permission to use any of my demonstration then please email me with your request stu{at}cssplay.co.uk.

Post a comment


Current posts

Todd Reid:-
Regarding IE 7: there is no right border to the submenus, either level. Also, when one of the submenues is longer than the ad below the menu, it appears BEHIND the ad (maybe a z-index issue?). Also, when you have a sub-submenu, the table cells don't quite line up vertically...the flyout menu cells appear about a pixel LOWER than the parent.
(24.05.2006, 21:30)

Stu:-
Todd, all these misalignments can be fixed, but I will wait for the official release to do this. It will probably mean css in conditional comments just for IE7. It just goes to show that it still doesn't translate the style sheet in the same way as Firefox etc.
(24.05.2006, 21:58)

Stu:-
Todd, I have made a small change to the method of drawing the sub level borders that will, hopefully, correct the IE7 problems.
(24.05.2006, 22:39)

DeadMeatGF:-
Looks spot in in my IE7 - I guess your tweaks have worked :) The only glitch that I get is the menus disappear behind the advert thingy underneath, but that's not just on this menu.
(25.05.2006, 10:13)

Stu:-
DeadMeatGF, thanks for the feedback. I did tweak the style for IE7. The problem with the Google Ads is a browser bug. I'll see what can be done.
(25.05.2006, 12:19)

HDOGG:-
stu.
very nice work as always. excited to see how you modify this. i have tried to use this for a contact manager front page where the top level of menu are the letters of the alphabet and the first drop are the names and the second drop is the detailed info. major flaw is that if the screen is not long enough you cannot view the menu item. cheers!
(26.05.2006, 15:01)

Stu:-
Should any Myspace users be interested, I have just signed up for a web page and have this menu sort of working at
blog.myspace.com/cssplay
now if only I could work outhow to get the graphics uploaded it would look a lot better.
Doesn't work in Opera 8, but Opera 9 beta is ok.
(29.05.2006, 00:01)

RX2-Designs:-
Hey there stu it is me again.

At the time i do not have my site up and running but your newest dropdown example is great. Its one of the best dropdown menus that i have seen out there. I was wondering if i could have your permission to use it as the top nav for my site?

again the site is not up yet so i cannot supply a link.
(30.05.2006, 08:39)

Stu:-
RX2-Designs, the copyright info is in the third column of the example menu page.
(30.05.2006, 13:39)

RX2:-
ya i commented about it asking you. Is it manditory to give a donation tho?
(30.05.2006, 23:46)

Stu:-
RX2, donations cannot be compulsory.
As I have put all the hard work into getting these menus to the position they are today (several months of work) thus saving you the time and effort I ask that donations are made to support this work, (and also to keep this web site 'in the black').
However, this is left entirely up to you.
Donate if you want or just copy and use.
(31.05.2006, 07:59)

GreenBoy:-
Stu:
Had a look at the source code for the page, and noticed a ouple of strange syntaxes - can you shed some light on them please?

E.g - there is a \ in the middle of the word height - this line 19 of style block

* html .menu1 ul li a, .menu1 ul li a:visited {height:33px; he\ight:30px;}

Also (about line 77) \ in top and margin?

.menu1 ul li a:hover ul {
display:block;position:absolute;top:33px; t\op:32px; background:#fff;left:0; marg\in-top:1px; border-bottom:1px solid #000;
}

Are these hacks - if so what do they do, and if not - how come the code works?

Many thanks in advance

PS - this menu is fantastic!
(04.06.2006, 08:50)

GreenBoy:-
OK - worked it out - they are hacks...understand(ish) the reason for the t\op one as this follows a statement for top..

but i dont get the marg\in-top:1px as this doesnt follow another margin statement...

any guidance greatly apreciated.
(04.06.2006, 09:11)

Stu:-
GreenBoy, they are indeed hacks to target IE5.x and IE6.
The * html makes sure that only Internet Explorer see the style.
The normal style following (for example width:35px;) is seen by all versions of IE.
BUT the placing the \ in the correct position preceding a vowel targets IE6 ONLY.
So w\idth:35px; will only be seen by IE6.
This is done to correct the faulty box model in IE5.x.
The use of marg\in-top:1px targets IE6 only. IE5.x will get the default margin-top:0;
(04.06.2006, 11:53)

Simon:-
I was looking for a solution to replace slow javascript/XML menus that are downloaded uniquely for every web page visited - making the menus the top scoring documents on my websites. Where they have an advantage is being able to recreate the contents of the XML file from a script - meaning i can give users a webform to update menus on their own websites (by storing the structure in a MYSQL database). - the XML file is included (using php include) rather than built in to the site template. eg, www.combe-martin.net
My next step is to reproduce the same function using your CSS menus (menu #4). The menu structure will be written out by a script in the format of a html list. This file will then be included within the template of the web page.
Drawbacks include having make every page a php page and needing duplicate templates for html pages organised within sub-directories.
(09.06.2006, 10:48)

Tman:-
Hi Stu, I am experimenting with your menu #4 Example. I copied the CSS for menu #4 and copied and pasted the HTML code for menu4. I have my images in the same folder. In IE6.0, I don't see the image - but in Firefox things are fine. Any ideas

Tony M
(09.06.2006, 19:50)

Ryan:-
Hi Stu - The current example for "drop-down variation" is linked to 2 CSS's.

My website doesn't let me link to 2 CSS's. Do you plan on converting your earlier menu's so that they link to just 1 CSS like the ones here in "dropdown examples"?
(09.06.2006, 23:40)

Stu:-
Ryan, I hadn't planned on revisiting earlier menus but if there is a demand for this then I might get round to doing it.
(09.06.2006, 23:55)

Ryan:-
Thanks for your quick reply Stu.

I suppose I'm just thinking that since the design is already complete, how much more effort would it be to combine the two CSS files into one?

Since I'm not an expert, I have no clue what the level of effort would be.

However, at this time, consider Demand = 1.
(10.06.2006, 01:15)

Al Kendall:-
Stu,
Excellent site! I am trying to get your Menu #4 up and running and have come across a few problems I just can't seem to solve. The pics in your sample are in the center, mine are at the top. Not sure why, as I haven't changed your code. Also, the drop downs & pop outs don't show the arrows and I can't find the code in your sample. My sample site can be found at www.alsfitt.com/alsfitt-test/drop_examples.html
Thanks
AL
(10.06.2006, 10:40)

Al Kendall:-
Stu,
Also, the border on each of the menus (ie: home, products, services et..) don't show up.
Al
(10.06.2006, 10:43)

Stu:-
Ryan, the previous page has now been updated to combine the css into one file. I have simplified the CSS and added comments.
(10.06.2006, 11:04)

Stu:-
Al, the top level pics are not just the images of 'home' etc. but also contain the drop arrow and the left/right border. The sub level images also have the grey background, and the sublevel flyout arrows are combined with the submenu images.
If you look at this image you will see what I mean.
www.cssplay.co.uk/menus/css4/menu4products.gif
(10.06.2006, 11:12)

Ryan:-
Stu - thank you very much for revising the old drop-down list for me.
(11.06.2006, 18:16)

Stu:-
Ryan, your welcome. After all there was a demand ;o)
(11.06.2006, 18:51)

John:-
Now these are some awesomeee examples Stu! great job on creating them!!
(13.06.2006, 10:39)

Greg:-
Stu - This is deffiently one of the better tutorial sites that I have visited, you give some great examples and very useful information! I noticed that when my mouse slips of the menus they disappear quick. Is there a time limit so that they still show about 2-3 seconds if my mouse is not on the menu? Just so that I won't lose the menu I was on. Cheers!
(13.06.2006, 19:14)

Stu:-
Greg, no time delay with css, it's either 'hover' or 'no hover'.
(14.06.2006, 15:27)

Ezra Kopelowitz:-
Please see this example of menu 1.

uscjisrael.researchsuccess.com/home/USCJIsrael/example.asp

We are trying to get the menus to work for an <html dir=rtl> page. They work in in Mozilla, but not not IE 6. Any suggestions.
(20.06.2006, 11:59)

Rau7:-
Hello Stu, beautiful site, with a lot of resurces for web designers.
I have a question, it is possible to have a horizontal menu with this structure:
Item 1
Item 1.1
Item 1.2
Item 1.3
Item 2
Item 2.1
Item 2.1.1
Item 2.1.2
Item 2.1.2.1
Item 2.1.2.1.1
Item 2.1.2.1.2
Item 2.1.2.1.3
Item 2.1.2.1.4
Item 2.1.2.2
Item 2.1.3
Item 2.1.4
Item 1.2
Item 1.3
Item 1.4

Item 3
etc

... I've tried to make it but when the pointer is on "Item 2.1.2" then appear all the items after it (Item 2.1.2.1, Item 2.1.2.1.1 etc)

My question, it is possible to have more than 2 drops.
(21.06.2006, 09:04)

rau7:-
Hi again, :), here is a link with a capture of my menu, you can see that the pointer is on Item 1.5, and you can see what is happening, I want to appear only the Items 1.5.1, 1.5.2, 1.5.3, 1.5.4 and when the pointer is over the Item 1.5.1 to appear the rest of the items...
Thanks for the help!!!!
Raul!
The link:
www.esnips.com/doc/c35a5ed2-08fb-4aec-8756-7a368005e98b/Clipboard01.png
(21.06.2006, 14:29)

PB:-
Hey Stu...
First off, great site! I'm a newbie to CSS so it's a little overhelming but a wealth of information for me to absorb for the next few months.

I do have one quick question... in the DROPDOWN MENU demo, where are the CSS for Menu #1 & #2? I tried looking in ../css/cssplay.css but can't find it there.
(26.06.2006, 08:12)

Rau7:-
PB, you can find the CSS for dropdown menus #1 #2 #3 in the HTML source code!!
(26.06.2006, 11:24)

PB:-
Kewl beans... thx Rau7.
(27.06.2006, 01:22)

re:-
I just know the powerful of CSS!
Thank you for this beautiful method.
(But I have a little problem to apply the CSS dropdown list to IE. I think IE always have problems.)
(29.06.2006, 13:09)

Bill F:-
Stu,

Just curious, for this method to work in IE I see you nesting tables in anchor tags. Why tables though?

Usually you cannot nest block level elements inside an anchor tag because they are inline level (even when set to display:block it doesn't work). Are tables considered to be neither block nor inline?

I'm curious as to why IE allows it, and if it would work with other elements such as div's or lists (I'm assuming not)
(17.07.2006, 21:02)

Stu:-
Hi Bill, fortunately tables can be nested in links without any validation problems. The reason for tables is that this is the ONLY way that you can nest links in IE, and nested links is the ONLY way that you can have cascading menus in IE5.x and IE6. So a major bug in IE5.x and IE6 allows nesting of links (something I discovered over two years ago but only now using it to its full potential).
(17.07.2006, 21:37)

Mike Hughes:-
I need a doors menu. I tried to copy the code for your example to modify but it didn't work. Is there anyway to send me one in a form I can modify?
(10.08.2006, 23:34)

Mike Hughes:-
I forgot to give an email you could post the doors menu too.

mail at mikealrhughes dot com.
(10.08.2006, 23:36)

Bobo:-
I keep getting a little underscore character underneath each of the first letter that have a dropdown. Any reason why it could be happening?
(15.08.2006, 22:33)

Stu:-
Bobo, no idea. Do you have an example page?
(15.08.2006, 23:01)

Martin:-
The menue #5 do not work in IE7.
Can you help me?

Thank you.
(19.08.2006, 14:11)

Stu:-
Martin, until IE7 is an official final relase I will not be too worried about menus not working. It will always be possible to use conditional comments to get around any problems. However, it does seam a little odd that menus #1 to #4 work and #5 does not as they use the same basic style.
(19.08.2006, 14:22)

JC:-
Hi Stu, big Fan of your layout samples. Listen, in regard to Menu #4 - 6th June 2006...

I see you've posted comments that your not concerned with IE7 hacks until IE7 rolls out. They are now out of beta calling it IE7 candidate 1 whatever that means.

At any rate, I modified menu #4 for my purposes and checked it on every browser I could find. Works on all save for two which have small glitches.

IE7: menu's with a drop down render 1px shorter on the "off-stage" than those without. Maybe this is a border-collapse issue in IE7.

The bigger one is in Netscape where drop down menus only display a portion of the defined border of the table. weird.

Anyway, thought i'd lend my feedback. If you want to see my samples let me know. maybe you can help figure out a patch and make menu#4 100% universal in all browsers.

Ciao
(30.08.2006, 17:55)

Stu:-
JC, I have loaded IE7 RC1 on one of my PCs and am working through my examples t see if they still work. So far I have corrected 6 demonstrations and have about 6 left to do. A couple of demos will not work in IE7 but do in IE6, these are the ones concerned with dynamic animation so I am not too worried about this.
I will get round to the minor problems with a couple of drop down menus but this may take a week or two.
(30.08.2006, 20:38)

Yen:-
Hi Stu, Your code works great as a stand alone div but Im having a problem nesting the div dropdown into a td. In IE the top menu appears but the dropdown fails. Is there something else i need to do or add to allow the dropdown appear inside a table cell in IE?
(01.09.2006, 21:05)

Stu:-
Yen, these menus work from within other tables. Make sure that the menu tables have a unique style (.menu1 table {....}) and that you are using a standards compliant doctype.
(01.09.2006, 21:17)

richard n:-
Hi, I'm new to code and working with CSS...

The HTML for menu 5 was confusing me.

I think I've got it figured it out. It is marked up with classes which were necessary for menu 4, but which are not needed for menu 5. Right?

I'm starting to play with menu 5, because I like the simple border effect, and I also like that it resizes well. (I don't need sub level menus.)

Before I was trying to get the same effects by fiddling with your 'basic drop down' menu. But I couldn't figure out how to get the border on just the dropdown elements...

Thank you for these menus...

(p.s. I find the main menus at the top of this site a bit tricky... they cease to be active ones you've drilled down into one section (e.g. 'menus'.)
(06.09.2006, 16:17)

Stu:-
richard n, I don't know what browser you are using, but all the menus remain active except the selected one. When in a sub level you can navigate using the sub menu under 'CSSplay'.
(06.09.2006, 17:08)

richard n:-
thanks... using safari... found the sub menu... everything works as intended...

(that said, as a rather unsohisticated user, my instinct was to go for 'menus' in the top nav bar to get to the front 'menus' page - finding it dead, I would then click on 'demos' or 'layouts', then straight back to 'menus')
(06.09.2006, 18:44)

Stu:-
richard n, a quick mod to the navigation php and now the top level selected menu can be re-selected to take you back to the section menu.
(06.09.2006, 19:42)

Mike McKenney:-
I am in the process of adapting menu 4 for a personal site. I am a artist/web designer; not a coder so I have to learn by trial and error. This is a great looking menu and I have a few suggestions to make it better. The top level menus are smaller than the dropdowns making them look crowded. With only 4 menu items it would look better if they could be wider. I'd like to see adjustable size widths, heights to match various size image backgrounds. And adjustable font sizes. Can't the top menu text be centered? This may be an easy fix for someone like yourself but will drive me crazy trying to figure out! How about adding notations to each section explaining which varibles to change? Great site - Thanks for all the great ideas!
(07.09.2006, 21:07)

Toni:-
Never mind - figured it out.

Anyone who has similar problems to the ones I mentioned?

Change your DOCTYPE and HTML declaration so they refer to the XHTML standard. Duh.
(27.09.2006, 17:44)

agmoyano:-
Hello Stu, First of all, great scripts!.

I tested them, and the only thing I didn't like so much was that you used tables to display menu options for IE. I replaced tables for a divs. It worked fine in IE 6.

Thanks.
(06.10.2006, 17:51)

Stu:-
agmoyano, can you post the url with this working in IE6 using divs?
(08.10.2006, 15:48)

agmoyano:-
Sorry, seems I talked too soon, I should have done further testing. The test was done on an IE6, but it was run from linux with wine. After posting, I tested it on IE6 from windows and failed... Never imagined it could work differently one from the other in this matter.

my apologies..
(09.10.2006, 13:18)

Stu:-
agmoyano, that's ok. I thought that you had found something that I had missed :)
(09.10.2006, 13:33)

Rolz°:-
Hello Stu.

Please have a look at "Menu #2 - 30th May 2006" here:
cssplay.co.uk/menus/drop_examples.html

Try to catch the sub-button [Banner Exchange ] on the top-level [Services].
After scrolling, you never can press it.

I used IE 6.0.
Also it doesn't work in Firefox 1.0.6


Have a nice day
/ Rolz° - desi(the dog)ukr.net
(01.11.2006, 11:50)

Al Kendall:-
Stu,
I am using your Cross browser FIXED layout which requires to be put into quirks mode and your Menu 4. I had them working well (www.alsfitt.com) but then I loaded IE7 and now the menu does not drop down. Any ideas on what ! need to do? Is it the IE stylesheet? Do I dee a seperate on for IE7?
(08.12.2006, 06:10)

Stu:-
Al, change <!-- Put IE into quirks mode --> to
<?xml version="1.0" encoding="UTF-8"?>
This will put IE into quirks mode for IE6 but stay standards compliant for IE7.
Can you also comment the stylesheet to refer to cssplay as the copyright holder, thanks.
(08.12.2006, 07:46)

Al Kendall:-
Stu,
I have added a copy right to all the css sheets. I also have a link to your site in the credits page.

Unfortunately the "<?xml version="1.0" encoding="utf-8"?>" doesn't fix it I actually get the following error.(Parse error: syntax error, unexpected T_STRING in /home/alsfitt/public_html/index.php on line 1) Deleteing that altogether allows it to work in IE7 but sizing is all out of wack and now i don't have IE6 to test it.
(08.12.2006, 09:58)

Stu:-
Al, you are using php to generate the pages so you must echo the <?xml line or php thinks it is a parse error.
(08.12.2006, 12:32)

Jerry:-
Regarding menu #1, if you remove the class=menu1xxx from any of the first level menu items, you no longer get a drop-down in IE6 (don't know yet about IE7). The same modification works fine in Firefox. I have not looked at any other browsers beyond IE6 and FF2.
(20.01.2007, 09:28)

Stu:-
Jerry, this is because the :hover on these specific classes triggers the dropdown in IE6. If you remove the classes then you will still need a 'trigger' for this to work in IE6. See my tutorial on :hover - www.cssplay.co.uk/menus/hovercraft.html
(20.01.2007, 09:43)

Neil:-
Hi, looking at one of your drop down css only examples(menu 1) there are 3 gif images missing (bullet1.gif,divider1.gif and menu1.gif), is there any chance you would be willing to provide them so i can see how they work and are integrated so i can then modify for my own menu bar?
(02.03.2007, 10:30)

fab:-
Hi Stu,

I'm going through a difficulty here with menu 1. Works pretty well with FF, but no drop down with IE7. I am including this menu file called menu.php in a header.php page.
I cannot figure out what to do for it to work ok could you please give a look to my code and return your piece of advice please please please? thanx thanx thanx again!
(15.03.2007, 16:09)

fab:-
i guess i have to play with this but how do i manage the "<!--[if IE 7]><!--></a><!--<![endif]-->"
(15.03.2007, 16:16)

fab:-
the full code can be seen here:
(www.internet-chamonix.com/menu.php)

thanks a lot for your help
(15.03.2007, 16:25)

fab:-
sorry,
the full code can be seen here:
(www.internet-chamonix.com/menu.html)

thanks a lot for your help
(15.03.2007, 16:33)

Stu:-
fab, there is no reason that I can see why this shouldn't work in IE7. The usual cause is that you are not using a standards compliant doctype. Maybe using php you are including this file into a non-standards compliant header.php file.
(15.03.2007, 19:01)

Eric:-
Hi Stu. I'm trying to create a CSS dropdown menu compliant with all the majors (including IE7) on a page formatted with a modified version of your 'Fixed' layout version 1 (www.cssplay.co.uk/layouts/bodyfix.html). The problem is that I need to be in quirks mode for the layout to work, but IE7 can't display the CSS drop-downs properly in quirks mode. Is there some workaround to make the layout and the menus compatible?
(26.03.2007, 11:35)

Stu:-
Hi Eric, FAQS No.5 shold solve your problems.
(26.03.2007, 20:22)

Char:-
Hi, i have a problem with Menu#1 under your drop down examples. It doesn't work with IE 7.0, is that a way to solve it? Thanks.
(29.03.2007, 10:48)

mario:-
hi Stu!
What should I do to center those menus under Drop down examples.
I mean to center them across fixed div so that they cover a full length of a menu div.
Can they be made so adjustable ?
Thx a lot!
(18.04.2007, 01:27)

David:-
Hi, i am trying to use menu4. I have put the menu in the top frame with it linking to the main frame below, but only part of the menu is visable as it doesn't overlap the bottom frame, i have heard that you can you Iframes to fix this, but i have no idea how.

Does anyone have any ideas

www.david-jane.com/testing/home.htm

Thanks
(02.05.2007, 04:52)

Stu:-
David, if you are using a frameset then this menu is not for you. It will not overlap from the containing frame into another frame. To do this you will need javascript.
(02.05.2007, 20:51)

GAz:-
On the menu 2 using the scroll bars drop down. Why does the menu jump back to the top when you scroll down and try and go across ?
is there a fix for this ?
(11.05.2007, 22:57)

Stu:-
GAz, this only happens AFTER you have already clicked on a link. In theory you would be taken another page which would no longer have your selection active, and the menu would work correctly.
(11.05.2007, 23:17)

cssnewb:-
Hi Stu
Very awesome css website you have here. ^_^

I need to check with you regarding two issues.

First - when i used IE7 with Menu4, i noticed that when the subsubmenu is being hovered, the border of the previous menu shows up. See pic:

img267.imageshack.us/img267/6981/menu4wo7.png

Second - I tried to implement Menu4 submenus with semi-transparent backgrounds, it works with FF and Opera but for IE i only managed to make the lowest level (subsubmenu) transparent. Can backgrd opacity work in IE when there are 2 or more menu levels?

Thanks for the great examples ;)
(03.06.2007, 22:38)

Adam:-
Yuck. Your code contains random tables.
(20.08.2007, 13:40)

Stu:-
Adam, tables or javascript, it's your choice.
(21.08.2007, 20:04)

Javier:-
Hello Stu, just to let you know that menu5 renders different in Firefox2 and IE6. The problem is vertical positioning, IE shows the menu higher, FF shows it lower. (Sorry if I can't make myself clear, english is not my native tongue :) ) I just had a hard time trying to nivelate for both browsers, but realised that in your page you have the same problem.

Thanks and regards...
(28.08.2007, 21:45)

Javier:-
Just found the problem, a typo in the menu5 css file. You missed an ; in the .menu5 definition.

Regards!
(30.08.2007, 22:31)

Srivas:-
Hello Stu!
Thanks for the great site!
Im trying to find an all compatible single level dropdown menu for my website, where I could replace the main menu links with my designed buttons, but so that the dropdowns would snap to the buttons. I could not find the best example from the menu page, they were too complicated, could you please recommend one?
I tried one of your menu, and it worked perfectly, but I could not understand what value I have to delete to have the buttons stick together.
Thank you very much for your efforts.

Regards!
(14.09.2007, 13:40)

Dominick:-
I am pulling my hair our trying to adjust the fixed width of top level items on menu4. I don't use CSS that much but I would like to know how to do this. Anyone know how? Thanks.
(04.10.2007, 12:55)

Stu:-
Dominick, the width is adjusted in these styles
.menu4 ul li a, .menu4 ul li a:visited {
display:block; text-decoration:none; width:70px; height:30px; color:#000; padding-left:30px; line-height:29px;
}
* html .menu4 ul li a, .menu4 ul li a:visited {
width:100px; w\idth:70px;
}
(04.10.2007, 19:39)

Odell:-
Just got into CSS Menus. Tried Menu#1 - 24 May 2006. Two things. (1) Can you tell me where I can find the Menu1.gif, Divider1.gif & bullet1.gif graphics. (2) The dropdown boxes get hidden behind two column boxes I'm using for text. Is there away around this problem or do I have to move the text boxes down? Please advise.
(27.10.2007, 00:22)

Octavian:-
What would be neccesary to change for the menus to work in IE 7 in transitional doctype instead of strict?

When i change to transitonal, the menus will not drop down, but strict makes my pages look really bad(not really sure why, but i decided to change just the menu instead of a big number of pages).
(08.11.2007, 11:05)

Stu:-
Octavian, these menus will work with transitional doctype without any alterations. Check that your doctype wording is correct. For a list of suitable doctypes see my FAQs page.
(08.11.2007, 12:57)

Octavian:-
Thank you very much for the help! It now works!
(08.11.2007, 13:26)

Douglas:-
Hi Stu,

Love the site, learned a lot from it.

Using Menu 1 on my site - www.douglasmcgregor.co.uk - the right flyout menus are going beneath images and text, hence the user can't click on them. Was wondering if you have time you might be able to tell me how to fix this?

Thanks!

Douglas
(15.01.2008, 17:49)

Stu:-
Douglas, add the following to the style:
.menu1 {
float:left; width:150%; font-family: verdana, arial, sans-serif; font-size:11px;
background: url(../images/nav/menu1.gif); repeat-x top left;
border-top:3px solid #4c597f; border-bottom:3px solid #4c597f;
margin:0 0 20px 0; /* for this demo only */
position:relative;
z-index:500;
}
(15.01.2008, 18:24)

Douglas:-
Thanks Stu, it's all working now!
(16.01.2008, 00:30)

Frank:-
Hello Stu:
I have been trying to place the Menu 2 styles within a linked stylesheet, but Firefox doesn't seem to like this at all (IE is OK). It may be the conditional statements. Any idea what may be going wrong here?
(30.01.2008, 22:09)

Frank:-
Hello Stu:

I'm having a big positioning problem with Safari (I'm using menu2). Safari wants to place the menu in the top left corner of the UI, so it's obviously ignoring the relative positioning set in CSS. Any ideas why? My CSS:

.menu2 {
/* Using images, not text */
display: inline;
width: 488px;
font-family: arial, helvetica, verdana, sans-serif;
font-size: 10px;
background: #d4cec3;
position: relative;
top: 79px;
left: 156px;
z-index: 10;
}
(25.02.2008, 01:03)

Dimmy:-
Hello stu,

Its bin a while but I got a problem that I did not find the answer to anywhere.

I made a dropdown menu based on one of you first dropdown examples, the difference this time is that i have a 2 row menu with dropdown.
when the outer ul with list items get to big it will break to the 2nd row below the first horizontal row, that is good that is what I want.
but this is the problem the dropdown list from the first row drops behind the 2nd row in IE6 and IE7 in FF it doe appear on top of the 2nd row.
I tried adding z-index to the inner ul but that did not work.
I placed an extra div around the inner ul and gave that one z-index but that did not work eider.
(27.03.2008, 09:09)

Leonid:-
Thank you for the cool stuff. Have played with several of your examples and liked it. Have a question regarding drop-down menus. Has been trying to use several of your examples with css frame layout (from www.dynamicdrive.com/style/). Works great in Firefox 2.0.0.14. There is a little quirk in IE 7. An additional scroll bar appears on the right side of the IE window. Besides some space appears above the content of the scrollable content frame. I've placed a couple of samples at ttfc.alfamoon.com/111_gena/css8.htm
ttfc.alfamoon.com/111_gena/css6.htm
ttfc.alfamoon.com/111_gena/css7.htm
(01.05.2008, 20:41)

Allan:-
hi stu, hope you have not answered before:

in my case the scroll function (menu2) doesn't work on ie6, other browsers perfect. in ie6 it is not possible to select any items that you can't see without scrolling because it jumps back to top right after a scroll-try. why does that happen and are there any fixes? all kinds of fixes are welcome, if you have to break your css only rule :)
(20.05.2008, 16:10)

Allan:-
Oh sorry,looks like it works the first time you use it (or sometimes)? whats the trick here? looks like you have not made it work on the other scrolable menu (the black one)?
(20.05.2008, 16:29)

Archie:-
I am looking at using menu1. Very nice job... I just have one question on what makes the sub menus go to the left vs right. I cannot figure it out in the style sheet.
(16.06.2009, 06:24)

Kent:-
Hi Stu,

Menu1 works GREAT in FF, IE6 and IE7. The pull-downs mash up in IE8, however. Have you looked at this yet? Thanks for the great menus!
(25.06.2009, 22:43)

Dave S:-
Stu-

Menu1 does not work in IE 8. The drop-downs are all squished together. PLEASE HELP! :)
(27.10.2009, 14:09)

Libby Stark:-
I am a complete novice at Web Design, specifically Dreamweaver, so bear with me. I would like to replicate your Menu #5. How do I do it? Where does the code go - in the Head? As a style sheet? I just can't figure it out. Any help would be most appreciated.
(04.02.2010, 13:16)

Andy:-
Hi there - and many thanks for these examples and for the use of them. I am using the Menu #1 and I am building an application in PHP around it to allow people to generate the menu display. They enter certain parameters and it generates the html based upon your example and the CSS that you created.

The issue that I don't seem to be able to resolve is when I try and put a fourth level (you only go down to three - top line, first drop down and then third is right or left) then it insist on showing the fourth level at the same time as the third.

Now, I'm not sure that I will need to go to four (or more)levels - but, hey - you must know what its like when you're SURE something should work - it just eats away at you!

The test display (to see what I mean) is at hrfcdev.vm.bytemark.co.uk/menutest.php

Many Thanks for your time.
(05.02.2010, 21:21)



Post

Your comment:

Your Name:

Stu's First Name - 3 letters (required)

Thanks to Alex for this script.

Please enter your comments for this site page.
Please note that all posts are moderated.

Posting rules

HTML is turned off
Maximum word length is 80 characters.
Messages limited to 1200 characters.
Web links should not include 'http://'

Support CSSPLAY

Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


CUSTOM SEARCH

Facebook Twitter rss feed Facebook Fan Page