I am currently working on a site with a CSS drop down menu I built myself. When you hover over a top level menu item the drop down menu appears but as soon as you move your mouse to get to the drop down menu it disappears.
http://betsonvending.com/index please include the "/index" otherwise you are on the old site that I am replacing.
I read a few things on Z-index but I still cannot figure it out any and all help is appreciated.
The menu doesn't work. Where is the CSS for this? I urge you to keep content styles separate from your FGL and boilerplate.css files. It doesn't take much to break these layouts no matter how careful you are.
If you've never built a responsive menu system before, you might want to bite the bullet and buy one from Project Seven. PVII's extensions are rock solid and their customer service is top notch. Incidentally, I don't work for them. But I use their products.
There needs to be an overlap between the levels. That's why it disappears.
Take a look at this demo and the code from it. It requires html5/css3.
I liked the menu on the link you provided, thank you. I used it and adapted it to my needs, however, I have built this on a fluid grid layout and when the screen is narrower than about 1200px the last two dropdowns on the right or the submenu drop downs appear off the screen. Do you have any idea how to fix this? It looks good and I like the transitions but the menu extending outside the scree is a problem.
Thanks for your help,
I prefer not to use fluid layouts. They can cause nice designs to appear misshapen, they don't really serve the practical purpose that is claimed for them, and, well, you have discovered another reason. Coming from a print design background of 30 years ago, I like to control the visual relationships on the page.
(for mobile devices I think a completely separate layout is the right approach, which is how the major websites handle it)
I design my pages for a 950 pixel width. No one ever complains about the width. It's actually the height that I get comments on. My clients are concerned about what appears without having to scroll vertically, not horizontally.
If I were you, I would make your web page narrower. At full extension the top two paragraphs are very long, making them hard to read. Even at 950px they would be long, at that font size.
I woud not make the hover effect a bolding of the text since it causes the menu text to jump around. The menu doesn't look very nice in Internet Explorer 10. The borders on the submenus are missing. I'm not sure why because I have not have that problem on sites where I've used this code.
I also suggest changing the blue text to something different. That blue is an ugly web browser default going back 15 years. Try the blue in the question mark circle on the bottom right of your home page.
The material that appears below the main page rectangle is usually reserved for address, links to privacy statments, etc, contact link. But the material you have below the white rectangle looks like it "fell off" the page. I'm guessing that for your business, the locations is very important, so how about putting them in a small group at the very top, to the right of your logo (which should be 1/2 the size it now is.
Thanks for all the great advice. I have removed the bolding when I appied the new menu, did you see the new dropdown that you suggested?
I have no problem making two sites, however, I do not know how to make the browser choose which site to display. I have no idea how to do this, do you name them both index, or do you use different names etc. Any help would be appreciated. I did a google search but I obciously was not searching the correct terms because what I found was no help.
Yes, the menu renders much better in IE now.
I am not the best source of info for mobile web, but consider the following:
It's normal for website content to be contained in databases. One advantage to this is that it allows you to separate design, content, and logic. This is called MVP (Model-View-Controller). Using this pattern, you can easily deliver the same website in different languages without having to have multiple copies of the "pages". Likewise, you can use the same content in different layouts without having to have multiple copies of your content.
In your case, if you don't want to get into the programming involved in a a MVC system, then you would probably need to create a completely separate set of pages with layouts for mobile and duplication of your content.
You can use the userAgent property to find out if the browser client is on a mobile device, then point to the appropriate version of your site. Unfortunately, the browser doesn't simply say "mobile device" or "desktop computer", But as I said before, this is not an area of development I'm involved in, so I'm not the best source of info for it. But you should be able to find lots of info on the web.
So yes, you can use index.html for your home pages for both versions of your site if you put at least one of them in a separate directory, then, if your code determines, based on the userAgent, that the browser is mobile, it re-directs to the other version of your site. There are several ways to redirect, the simple html way is like this:
<meta http-equiv="Refresh" content="0;URL=http://www.mysite.com/mobile/index.html">