Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3
  1. #1
    Junior Member
    Join Date
    Mar 2010
    Posts
    4
    Member #
    21325
    I made a vertical spry menu bar with a few submenus. These submenus do not show on Internet Explorer, but show up in FF, Opera, and Netscape & (Safari-of course). Please let me know what I have to change for this to work! I have been trying all different kinds of things and cannot seem to get it working. I would appreciate any feedback! Thanks..

    The below is my code...

    @charset "UTF-8";

    /* SpryMenuBarVertical.css - version 0.6 - Spry Pre-Release 1.6.1 */

    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

    /************************************************** *****************************

    LAYOUT INFORMATION: describes box model, positioning, z-order

    ************************************************** *****************************/

    /* The outermost container of the Menu Bar, a fixed width box with no margin or padding */
    ul.MenuBarVertical
    {
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 11px;
    cursor: default;
    width: 148px;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-weight: bold;
    border: 1px none #666;
    }
    /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
    ul.MenuBarActive
    {
    z-index: 1000;
    }
    /* Menu item containers, position children relative to this container and are same fixed width as parent */
    ul.MenuBarVertical li
    {
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 148px;
    }
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
    ul.MenuBarVertical ul
    {
    margin: 0 0 0 100%;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: absolute;
    z-index: 1020;
    cursor: default;
    width: 135px;
    left: -1000em;
    top: 0;
    }
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
    ul.MenuBarVertical ul.MenuBarSubmenuVisible
    {
    left: 0;
    }
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarVertical ul li
    {
    width: 135px;
    }

    /************************************************** *****************************

    DESIGN INFORMATION: describes color scheme, borders, fonts

    ************************************************** *****************************/

    /* Outermost menu container has borders on all sides */
    ul.MenuBarVertical
    {
    border: 1px solid #CCC;
    }
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarVertical a
    {
    display: block;
    cursor: pointer;
    background-color: #2D2F96;
    padding: 0.5em 0.75em;
    color: #FFF;
    text-decoration: none;
    height: 34px;
    border: 1px solid #FFF;
    }
    /* Menu items that have mouse over or focus have a blue background and white text */
    ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
    {
    background-color: #FF5D00;
    color: #FFF;
    }
    /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
    ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
    {
    background-color: #FF5D00;
    color: #FFF;
    }

    /************************************************** *****************************

    SUBMENU INDICATION: styles if there is a submenu under a given menu item

    ************************************************** *****************************/

    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarVertical a.MenuBarItemSubmenu
    {
    background-image: url(SpryMenuBarRightHover.gif);
    background-repeat: no-repeat;
    background-position: right center;
    }

    /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarVertical a.MenuBarItemSubmenuHover
    {
    background-image: url(SpryMenuBarRightHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    }

    /************************************************** *****************************

    BROWSER HACKS: the hacks below should not be changed unless you are an expert

    ************************************************** *****************************/

    /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
    ul.MenuBarVertical iframe
    {
    position: absolute;
    z-index: 1010;
    filter:alpha(opacity:0.1);
    }
    /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
    @media screen, projection
    {
    ul.MenuBarVertical li.MenuBarItemIE
    {
    display: list-item;
    f\loat: right;
    background-position: 0 0 0 100%;
    }
    }
    .headings {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-weight: bold;
    color: #2D2F96;
    text-align: center;
    }
    website links {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
    color: #000;
    text-align: center;
    }

  2.  

  3. #2
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    <html>
    <head>
    <style>

    body { margin: 0px; }

    li.nav_box_list ul li.sub_nav a { display: block; padding: 2px 0px 2px 5px; border: solid 1px #000000; text-decoration: none; color: #ffffff; }
    li.nav_box_list ul li.sub_nav a:hover { color: #aaaaaa; }

    ul { margin: 0px; padding: 0px; }
    li { list-style: none; margin: 0px; }

    ul.nav_box { position: absolute; top: 0px; left: 0px; right: 0px; z-index: 100; }
    li.nav_box_list { width: 20%; display: inline; float: left; background: #222222; color: #ffffff; overflow: hidden; }

    li.button { text-align: center; }

    li.sub_nav { display: none; }
    li:hover.nav_box_list ul li.sub_nav { display: block; }

    </style>
    </head>
    <body>

    <ul class='nav_box'>
    <li class='nav_box_list'>

    <ul>
    <li class='button'>Menu Button</li>
    <li class='sub_nav'><a href='#'>Link</a></li>
    <li class='sub_nav'><a href='#'>Link</a></li>
    <li class='sub_nav'><a href='#'>Link</a></li>
    </ul>

    </li>
    <li class='nav_box_list'>

    <ul>
    <li class='button'>Menu Button</li>
    <li class='sub_nav'><a href='#'>Link</a></li>
    <li class='sub_nav'><a href='#'>Link</a></li>
    <li class='sub_nav'><a href='#'>Link</a></li>
    </ul>

    </li>
    <li class='nav_box_list'>

    <ul>
    <li class='button'>Menu Button</li>
    <li class='sub_nav'><a href='#'>Link</a></li>
    <li class='sub_nav'><a href='#'>Link</a></li>
    <li class='sub_nav'><a href='#'>Link</a></li>
    </ul>

    </li>
    <li class='nav_box_list'>

    <ul>
    <li class='button'>Menu Button</li>
    <li class='sub_nav'><a href='#'>Link</a></li>
    <li class='sub_nav'><a href='#'>Link</a></li>
    <li class='sub_nav'><a href='#'>Link</a></li>
    </ul>

    </li>
    <li class='nav_box_list'>

    <ul>
    <li class='button'>Menu Button</li>
    <li class='sub_nav'><a href='#'>Link</a></li>
    <li class='sub_nav'><a href='#'>Link</a></li>
    <li class='sub_nav'><a href='#'>Link</a></li>
    </ul>

    </li>
    </ul>

    </body>
    </html>
    http://www.studio378d.com/wdf/menu_hover.html

    i read the z-index article but not only did they not have a working example(read the source and compare to article) but the z-index had nothing to do with the problem. their problem was they didnt know how to write code.

    while($get_it !== true){ continue; }

  4. #3
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    oh my bad. you said vert. well do you have a link you could share so i could see? builder programs and cms code almost never works as it should.

    while($get_it !== true){ continue; }


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 11:32 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com