#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    20
    Rep Power
    0

    Popout menu submenus disappear if use width:auto


    Hi everyone.
    OK, I've been doing this stuff (computer application development quite a long time (40 years) so I do have a little experience.

    I borrowed some code from another source
    Code:
    http://www.conijnwebdesign.nl/tutorials/how-to-make-a-menu-with-css.php
    I am trying to use/create a vertical menu list using "ul" and "li".
    There are several major menu items, and one of them has some sub-menu items. The sub-menu items popout when the specific major menu item is hovered over.
    I can make it work just fine, with a fixed width for all menu items.
    But I need to provide for some sub-menu items which have a long description, rather than fixed width. The fixed width results in the menu item rolling to 2 or 3 lines. I want it to remain as only one line.

    So I want to use "width: auto;"

    This does work... EXCEPT.....
    When I move the cursor to the first of the sub-menu items, it hilights and all is well. But as soon as I move to the 2nd sub-menu item (off the 1st sub-menu item), they all disappear.

    If I leave the "width: 100px;" (fixed) this does not happen.

    Here is my code....
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Easy Vertical Nested CSS Menu</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    body { 
        font: normal .8em Verdana;
        }
    #navDiv ul { 
        list-style-type: none;
        margin: 0;
        padding: 0;
        }
    #navDiv ul li {
        width: auto;
        position: relative;
        }
    #navDiv ul li ul { 
        position: absolute;
        left: 100px;
        top: 0; 
        display: none;
        }
    #navDiv ul li:hover ul, 
    #navDiv ul li.dynamicClass ul { 
        display: block;
        }
    #navDiv a { 
        display: inline-block;  /* 'block' causes gaps in IE6 */
        width: auto;  /* for IE6 */
        background: orange;
        color: blue;
        text-decoration: none;  
        }
    #navDiv a:hover { 
        background: blue;
        color: white;
        }
    p { 
        margin-top: 0;
        width: 400px;
        }
    a img { 
        border: 0;
        width: 88px;
        height: 31px
        }
    
    #navDiv ul ul {
            display: none;
            }
    #navDiv ul li:hover ul {
            display: block;
            }
    
    
    </style>
    <script type="text/javascript">
    jsAssignedClass = function()
    {
    	var menuItem = document.getElementById("navDiv").getElementsByTagName("li");
    	for (var i=0; i<menuItem.length; i++)
        {
    		menuItem[i].onmouseover=function()
            {
    			this.className+=" dynamicClass";
    		}
    		menuItem[i].onmouseout=function()
            {
    			this.className=this.className.replace(new RegExp(" dynamicClass\\b"), "");
    		}
    	}
    }
    if (window.attachEvent) window.attachEvent("onload", jsAssignedClass);
    </script>
    </head>
    <body>
    <div id="navDiv">
        <ul>
            <li><a href="#">Hyperlink 1</a></li>
            <li><a href="#">Hyperlink 2&gt;</a>
                <ul>
                    <li><a href="#">Hyperlink 2-A</a></li>
                    <li><a href="#">Hyperlink 2-B</a></li>   
                    <li><a href="#">Hyperlink 2-C... this is a long one</a></li>
                </ul>
            </li>
            <li><a href="#">Hyperlink 3</a></li>
        </ul>
    </div>
    
    </body>
    </html>

    So for the 2 lines which have "width: auto;", if I change them to "width: 100px;" it works fine. But with "width: auto;", it does not.

    Can anyone shed light on how to make it work like I want it to ?

    Thanks in advance.
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,127
    Rep Power
    4304
    Welcome to DevShed Forums, FCDobbs.

    Ignore the IE6 problem or use a different solution to it. Fully supporting IE6, with emphasis on "fully", is not practical.

    Try this:
    Code:
    #navDiv li:hover, 
    #navDiv li.dynamicClass { 
        z-index: 999;
        }
    #navDiv ul li:hover ul, 
    #navDiv ul li.dynamicClass ul { 
        display: block;
        }
    #navDiv a { 
        display: block;
        background: orange;
        color: blue;
        text-decoration: none;  
        }
    P.S. XHTML 1.0 Transitional is rather old. I recommend you start using HTML5.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    20
    Rep Power
    0
    Kravvitz,

    thanks for your response.

    Actually, I merely used the code from the site I mentioned earlier.
    Yes, it does "acknowledge" IE6.... and I am not going to be using/addressing that at all.
    And yes, I realize it also should be HTML5.

    Now, to your suggestion.
    When I use your code, the "disappearing" menu sub-items no longer disappear. Great.
    But, for ALL the menu items and sub-items, the background extends across the entire page width. It should only extend for the width of the menu items/sub-items.

    Any thoughts on that ?

    Again, thanks.
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,127
    Rep Power
    4304
    You're welcome.

    Try this:
    Code:
    #navDiv ul { 
        list-style-type: none;
        margin: 0;
        padding: 0;
        float: left;
        }
    #navDiv ul li {
        width: auto;
        position: relative;
        }
    #navDiv ul li ul {
        position: absolute;
        left: 100%;
        top: 0; 
        display: none;
        white-space: pre; /* to prevent the lines from wrapping */
        }
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    20
    Rep Power
    0
    Kravvitz,
    keep trying.

    I now have it so they don't disappear, and they are the correct length.
    By the way, if I use your
    Code:
    white-space: pre; /* to prevent the lines from wrapping */
    that actually wraps the lines (adds 2 lines to each of the sub-menu items)

    So, here is what I am now using, and it does almost what I want.
    The menus and sub-menus all display the correct (variable) lengths.
    And they all appear just fine.
    Code:
    #navDiv ul { 
        list-style-type: none;
        margin: 0;
        padding: 0;
        }
    
    #navDiv ul li {
        width: auto;
        position: relative;
        }
    
    #navDiv ul li ul { 
        position: absolute;
        left: 80px;
        top: 0; 
        display: none;
        }
    
    #navDiv ul li:hover ul, 
    #navDiv ul li.dynamicClass ul { 
        display: block;
        }
    
    #navDiv a { 
        display: inline-block;  
        width: auto;  
        background: orange;
        color: blue;
        text-decoration: none;  
        }
    
    #navDiv a:hover { 
        background: blue;
        color: white;
        }
    
    #navDiv ul ul {
            display: none;
            }
    
    #navDiv li:hover, 
    #navDiv li.dynamicClass { 
        z-index: 999;
        }
    The only problem I now have is that when I move the mouse over the far right hand side of the screen in line with the main menu items, if I put it over the line with the menu item which has sub-menus, they appear.
    So it is somehow still determining that the menu item which has a "ul" and "li"s within it is detectable across the full width of the screen.

    Sure glad I don't have to have this done in the next day or so.

    Thanks again

IMN logo majestic logo threadwatch logo seochat tools logo