Skip navigation
RoseCityMktg
Currently Being Moderated

drop down menu disappears - Z-index?

Jun 14, 2013 3:38 PM

Tags: #css #sub-menu #pulldown_menu #z-index #dreamweaver_cs6

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.

 

Regards,

Bill Watson

 
Replies
  • Currently Being Moderated
    Jun 14, 2013 4:06 PM   in reply to RoseCityMktg

    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.

    http://www.projectseven.com/products/menusystems/index.htm

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 14, 2013 4:09 PM   in reply to RoseCityMktg

    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.

     

    http://www.ourtuts.com/create-a-drop-down-navigation-menu-with-html5-a nd-css3/

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 15, 2013 9:25 AM   in reply to RoseCityMktg

    FGL = Fluid Grid Layouts

    You need a responsive menu that changes with device width.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 15, 2013 9:39 AM   in reply to RoseCityMktg

    Bill,

     

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 17, 2013 6:01 PM   in reply to RoseCityMktg

    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">

     

    . . .but you must use some sort of server code to make the decision and invoke the redirect. I would use PHP, but in could be done with javascript or something else.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points