Mobile Friendly Website

CSSPLAY

Doing it with style

Professional drop-down 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

BillyG:-
I see you're getting fancy now, very nice!
(28.08.2007, 22:25)

cheryl:-
I am new to this and trying to teach myself how to do webpages. Love your stuff! I am using netobjects fusion 9...HOW do I add the html to the existing html so when i access navigation bar icon on the menu the flyout appear? do i erase from the existing html? Or can u direct to learn BASIC html?
THANKS!!
my email is cp358@sbcglobal.net
(01.09.2007, 01:23)

wangbo:-
I am very like this paradigm!
thank you Stu!
ä¸ä¸ªå­ "ç"!
(03.09.2007, 15:27)

j_bre:-
Hello Stu, I very much like this menu but would prefer a version WITHOUT .gif files (text only).

Would it be possilbe to post a text-only version of this menu?

Thanks a lot for everything!
(24.09.2007, 13:04)

Stu:-
j_bre, would that be text over a background image or just plain text?
(25.09.2007, 14:46)

DarkArchon:-
I know I would love to see one like this (or in the style of your pro_horizontal.html, but with dropdown/flyout) with text over a background image.
(26.09.2007, 22:18)

BrentM:-
I am having a problem using this in IE7. My example is here: www.brentmurphyphoto.com/test/pro_drop.html

It works fine in FF and I'm pretty sure it works in IE6, although I don't have that installed on my computer here. As you can see, in IE7, some of the drop-down gets hidden behind an image.

I could probably do a better job laying out my images. I used the same images from my current Tables layout and incorporated them into CSS. Is this just a z-image issue, or is something else going on?
(08.10.2007, 19:43)

Stu:-
BrentM, this is a z-index problem where your menu div has a lower z-index than the
later images.
Change this style
#multi-level {height:30px; position:relative; z-index:500;}

Should correct the problem.
(08.10.2007, 21:02)

BrentM:-
Thanks. I changed the z-index to 500, but it didn't affect anything. But I think I had a DIV somewhere nested inside another with a wrong z-index and didn't realize it, because I moved a couple DIVs around, and it seems to work fine now. I really appreciate your help.
(08.10.2007, 21:21)

BrentM:-
Well, I thought I had this fixed, but am still having problems. Again, works great in FF, but not in IE6 and IE7. I got my navigation image issue taken care of from before, but now the drop-down is mixing with page content below. I looked online, and found that everyone seems to have this same problem with z-index and IE.

The web page is:
www.brentmurphyphoto.com/test/page-test.html

The CSS files are:
www.brentmurphyphoto.com/test/css/nav.css
www.brentmurphyphoto.com/test/css/stylesheet.css

I've seen a few solutions to this issue, but all seemed fairly complicated. Adding iframes, below the drop-down, for example. Any ideas how to get this to work? I even tried adding a specific z-index for every element, and that didn't work either. I'm at a loss.
(10.10.2007, 16:30)

Stu:-
BrentM, You really need to get all your styles into the stylesheet. At the moment you still have some inline styles which are causing some problems.
However, an easy fix is to alter the inline style:
<div style="position: absolute; left: 0px; top: 100px; z-index:500;">
This is the div before <div id="multi-level">
(10.10.2007, 21:13)

BrentM:-
Stu - Thanks again. I didn't realize mixing stylesheet files with inline styles could be an issue, aside from just creating confusion for me. I'll work on getting that cleaned up.
(10.10.2007, 23:43)

Brenda:-
I am having problems with the fly out menus. They work in Explorer, but not Firefox, and the cursor won't stay on the menu for the 2nd level. Your help would be greatly appreciated (and the donation, too).
Here's my draft:
(09.01.2008, 20:26)

Stu:-
Brenda, email me stu{at}cssplay.co.uk with more information and a url if possible.
(09.01.2008, 20:41)

Robert:-
This is a very good script, though I have had two issues, one of which I've managed to sort out, one was that the menu was causing one of my floated divs just above it to ahve text that was unselectable, managed to fix taht with some clear css I believe it was. Just in-case anyone gets the same issue.

My second issue is quite an odd one. In Opera 9 the menu whenever in use i.e. hovering over top level or any lower levels) tries to constantly reload the images used for the top level which results in the background temporarily being shown. Now this is the strange part: I eventually found out that it didn't like my external css file (which used an absolute url). If I used a relative url (to the same file) it worked fine.

And I need an absolute url as our site uses a lot of subdomains and it doesn't include the css file when at a subdomain when using an relative url.

Any help on the above issue would be greatly appreciated. Otherwise I may just need to leave Opera 9 users with this annoyance. Other than that though it seems to work great.
(14.01.2008, 00:12)

Robert:-
So i guess you have no idea on why Opera doesn't like the external absolute url'd css file? (problem being is the images reloading on hover as described above)
(21.01.2008, 01:42)

Jo.Branco:-
Hello,

Im using this menu but looks awesome in Mozilla Firefox and IE7, but when i tried to check at IE6 ... humm looks like a totally mess xD~

so this is the link to check:

sitenovo.dnconect.com.br/index.html
or
sitenovo.dnconect.com.br

if u check in IE6 ... ull see that the firts 2 boxes work fine, the 1 dont have any dropdown effect and the 2 one have a dropdown effect, but the rest u can only see in the tree format ... but not only the menu is messed, few border images and background styles r in the same way xD~

so if is there any savior here who can help me ... im not an expert in this css lenguage, but im killing my self to make it right !!!

so ill wait for an light !!!

thanks in advance
bai bai
(12.02.2008, 13:00)

Stu:-
Jo, I do offer a service to get my menus working on any web page, just email me with the info.
(12.02.2008, 13:25)

Jo.Branco:-
Stu, i dunno wut happened now but i was trying to fix while waiting for ur reply and humm its a miracle, i forgot to insert the <!--[if lte IE 6]><table><tr><td><![endif]--> cuz i changed like all the menu using photoshop and the tree layers for the dropdown ... so its working fine now in FireFox, IE5/6/7, and when i inserted that code cuz i think its a comment ... dunno ... lil inexperient on this area ... all the other probs with the bgcolor and border images fixed at the same time !!! lil strange huh ?

so now i think im good to go ... so if theres any thing u want to know about it
jo.branco@hotmail.com

btw Congratulaions for this awesome website,
and im kind curious about how´s work this donation, never used, cuz this is the firts time i make a dropdown menu ... and the other site u have to buy it and humm like i dont make 1000 sites per month, its a lil waste to pay so much for 1 web, so donations r better and easy

Well Thanks a lot
bai bai
(12.02.2008, 13:36)

Stu:-
Jo, glad you have it working. If you wish to doante then click on the Paypal donate button beneath the demo and you can make a donation (any amount) using a debit, credit card or e-check in whatever currency you wish.
(12.02.2008, 13:42)

Jo.Branco:-
ok ^^

thanks a lot
(12.02.2008, 13:47)

David:-
Stu - I noticed that the top level link is not placed within an enclosed tag, and produces an error if I try to enclose it. This renders it as invalid markup. Is there a workaround for this, or is one necessary?
(10.08.2012, 23:46)

Stu:-
The top level links are placed in an enclosing </a> tag for all browsers except IE6.
The conditional comments <!--[if IE 7]><!--></a><!--<![endif]--> are ignored by all browsers except IE6 and these browsers will see the </a>.
If you are getting error messages then this is wrong as the code does validate using the w3.org validator.
(11.08.2012, 19:23)



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