SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2011
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to adjust positioning of a flyout menu to keep it on the screen

    Hello! Please take a look at my web page: http://home.roadrunner.com/~dstreb/hotdog/index.html I am very pleased with it, except for I have a couple problems

    * The child flyout items are a little off. You will notice that the last child item has a little extra graphics, like itís just about to start a new item. Similarly, as you hover over each child item, the entirety of the item does not turn gray, as thereís a little sliver of black still there. Why does this happen and how do I fix it?

    * If you hover over the last parent item, youíll see that there are a lot of child items. So many child items, in fact, that I canít see all of them (they go beyond the bottom of my screen). So what I want to do is if there is enough room set the child menuís top to be 10px below the parent itemís top, but if there is not enough room (if the bottom of the menu will go beyond the bottom of the screen) set the child menuís top to be the height of the screen minus the height of the menu (so itís aligned to the bottom of the screen). How do I do this?

    * I use the z-index attribute to allow the menu to expand over into the main div, but I converted the webpage to use frames (http://home.roadrunner.com/~dstreb/h...mes/index.html), and this no longer works. Is there a way to make this work with frames?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by MrSnrub View Post
    * The child flyout items are a little off. You will notice that the last child item has a little extra graphics, like it’s just about to start a new item. Similarly, as you hover over each child item, the entirety of the item does not turn gray, as there’s a little sliver of black still there. Why does this happen and how do I fix it?
    I don't see an extra graphic at the bottom?

    I assume you want the position of the flyout to be at the end of the main menu and level with the trigger item. If so you need this code:

    Code:
    #navigation ul li.has_children ul{left:158px;top:-1px}
    That should go after the original rule or modify the same properties in the original rule. (Note that your use of the class haschildren is not really required as the element will naturally be targeted anyway without using the class - just using the element name would have worked(#navigation ul li ul()) had you not added the other class everywhere).

    I've spent another ten minutes looking for the extra graphic you mention and the only browser I can see that has a problem is IE7. It helps if you state the browsers you are having problems with when you post as there are too many for us to test all and locate the problem

    If your problem is indeed IE7 (and if you feel you need to support it ?) then you will need to float the list and anchors to cure the gaps that appear.

    e.g.
    you will need to do this instead:
    Code:
    #navigation ul li.has_children ul li,
    #navigation ul li.has_children ul li a{float:left;clear:left}
    #navigation ul li.has_children ul li a{width:164px}
    That's the only sure way to close gaps in IE7 (and under).

    * If you hover over the last parent item, you’ll see that there are a lot of child items. So many child items, in fact, that I can’t see all of them (they go beyond the bottom of my screen). So what I want to do is if there is enough room set the child menu’s top to be 10px below the parent item’s top, but if there is not enough room (if the bottom of the menu will go beyond the bottom of the screen) set the child menu’s top to be the height of the screen minus the height of the menu (so it’s aligned to the bottom of the screen). How do I do this?
    The only css options are to set the menu position beforehand. eg. you could set the bottom of the menu to be level with the last trigger item and extend upwards instead (use bottom:0;top:auto instead of just top:0 but you would need a special class on the last item to do that). If you want an automatic way to change the menu then you would need to look for scripted menu solutions with that facility built in as CSS cannot make decision like that.

    * I use the z-index attribute to allow the menu to expand over into the main div, but I converted the webpage to use frames (http://home.roadrunner.com/~dstreb/h...mes/index.html), and this no longer works. Is there a way to make this work with frames?
    You can't cross frame boundaries as they are self contained entitities (although there may be some complicated scripts that could manipulate things on the fly). No one (almost no one) uses frames these days as they are almost always a bad choice. Just use a normal site like most everybody else does (frames were common about 15 years ago when no one knew what they were doing).

    http://www.hobo-web.co.uk/website-frames/
    http://www.nngroup.com/articles/why-...t-of-the-time/
    http://www.velvetblues.com/web-devel...-your-website/
    http://www.boutell.com/newfaq/creating/framesbad.html

    Suffice to say: Don't Use Frames

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2011
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for your response.

    hover_problem.gif The problem occurs when I view the site on I.E. 10 in compatibility view. It looks like it's about to start another child item.

    If I extend the "Hot dog" text on and on and on, the main pane will end up being longer than the sidebar pane. How do I extend the yellow background color of the side pane to prevent it from turning back to white?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by MrSnrub View Post
    Thank you for your response.

    hover_problem.gif The problem occurs when I view the site on I.E. 10 in compatibility view. It looks like it's about to start another child item.
    Don't use compatibility mode as its emulation is flawed and adds another broken version of IE into the mix. In compatibility mode you are making the browser behave much (not exactly though) like IE7 (as I mentioned above) - just don't use it. Your issue is with IE7 and you should be using a real IE7 to check browser differences if you need to support IE7. A lot of sites are only supporting IE8+ these days.

    Notwithstanding the above the fixes I gave you in my previous post (which it seems you didn't try) will fix the issue in IE7 and IE in compatibility mode

    If I extend the "Hot dog" text on and on and on, the main pane will end up being longer than the sidebar pane. How do I extend the yellow background color of the side pane to prevent it from turning back to white?
    If you are only supporting IE8+ you can use display:table and display:table-cell properties to create equal column layouts but if you are supporting IE7 then the easiest solution is to make a yellow gif (200 x 5px) and repeat it down the y-axis of the body and then it will always be as long as the longest content in your page. There are other methods but they involve some complexity.

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2011
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've tried using display: table; and display: table-cell; but it's not looking right. Both background colors will not cover the entire areas of the "cells." What am I doing wrong?

  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,511
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by MrSnrub View Post
    I've tried using display: table; and display: table-cell; but it's not looking right. Both background colors will not cover the entire areas of the "cells." What am I doing wrong?
    Can you please show an example of how the colors do not fill the entire area of the cells and mention the browser in which you see it.

    Try this:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta content="text/html; charset=windows-1252" http-equiv="Content-Type" />
    <title>Hot Dog</title>
    <style type="text/css">
    body {
        margin:0;
    }
    #outer_div {
        display:table;
        width:100%;
    }
    #sidebar {
        display:table-cell;
        background-color:yellow;
        width:200px;
    }
    #main {
        display:table-cell;
        color:yellow;
        background-color: red;
        font-family:"Comic Sans", "Comic Sans MS", cursive;
        font-size:x-large;
    }
    #navigation {
        font-family:Arial, Helvetica, sans-serif;
        font-size:12px;
        font-weight:bold;
        width:160px;
        padding:1em;
    }
    #navigation ul {
        margin:0;
        padding:0;
        background-color: red;
        border:1px solid white;
        border-bottom: none;
    }
    
    #navigation ul li {
        list-style:none;
        color: white;
        border-bottom: 1px solid white;
        cursor:pointer;
    }
    
    #navigation ul li:hover {
        background-color: black;
        background-repeat: repeat;
        position:relative;
    }
    
    #navigation ul li a {
        padding: 2px 3px; 
        text-decoration: none;
        color: white;
        display:block;
    }
    
    #navigation ul li a:hover {
        color: yellow;
    }
    
    #navigation ul li.has_children a { 
        background:url('transparent_white_arrow.gif') no-repeat 97% 50%;
    }
    
    /* works with hovering over the parents and stays while navigating
       through children; also renders #navigation ul li.has_children a:hover
       unnecessary */
    #navigation ul li.has_children:hover > a {
        color: yellow; 
        background:url('transparent_yellow_arrow.gif') no-repeat 97% 50%;
    }
    
    #navigation ul li ul {
        display:none;
        position:absolute;
        left:75px;
        top:10px;
    }
    
    /* #navigation ul li ul { left: 158px; top: -1px; } */
    
    #navigation ul li.has_children:hover ul {
        display:block;
    }
    
    #navigation ul li.has_children ul li {
        width:170px;
    }
    
    #navigation ul li.has_children ul li a {
        background: none;
        display: block;
    }
    
    #navigation ul li.has_children ul li a:hover {
        position: relative;
    }
    
    #navigation ul li.has_children ul li.has_children a {
        background:url('transparent_white_arrow.gif') no-repeat 97% 50%;
    }
    
    #navigation ul li.has_children ul li.has_children:hover > a {
        background:url('transparent_yellow_arrow.gif') no-repeat 97% 50%;
    }
    #navigation ul li.has_children ul li,
    #navigation ul li.has_children ul li a{float:left;clear:left}
    #navigation ul li.has_children ul li a{width:164px}
    
    
    </style>
    </head>
    
    <body>
    <div id="outer_div">
        <div id="sidebar">
            <img src="http://home.roadrunner.com/~dstreb/hotdog/hot_dog_cart.gif">
            <div id="navigation">
                <ul>
                    <li class="has_children"><a href="#">Parent Item</a>
                        <ul>
                            <li><a href="#">Child Item</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Item</a></li>
                    <li class="has_children"><a href="#">Parent Item</a>
                        <ul>
                            <li><a href="#">Child Item</a></li>
                            <li><a href="#">Child Item</a></li>
                            <li><a href="#">Child Item</a></li>
                            <li><a href="#">Child Item</a></li>
                            <li><a href="#">Child Item</a></li>
                            <li><a href="#">Child Item</a></li>
                            <li><a href="#">Child Item</a></li>
                            <li><a href="#">Child Item</a></li>
                        </ul>
                    </li>
                    <li class="has_children"><a href="#">Parent Item</a>
                        <ul>
                            <li><a href="#">Child Item</a></li>
                            <li><a href="#">Child Item</a></li>
                            <li><a href="#">Child Item</a></li>
                            <li><a href="#">Child Item</a></li>
                            <li><a href="#">Child Item</a></li>
                            <li><a href="#">Child Item</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Item</a></li>
                    <li class="has_children"><a href="#">Parent Item</a>
                        <ul>
                            <li><a href="#">Child Item</a></li>
                            <li><a href="#">Child Item</a></li>
                            <li><a href="#">Child Item</a></li>
                            <li><a href="#">Child Item</a></li>
                        </ul>
                    </li>
                    <li class="has_children"><a href="#">Parent Item</a>
                        <ul>
                            <li><a href="#">Child Item</a></li>
                            <li><a href="#">Child Item</a></li>
                            <li><a href="#">Child Item</a></li>
                            <li><a href="#">Child Item</a></li>
                            <li><a href="#">Child Item</a></li>
                            <li><a href="#">Child Item</a></li>
                            <li><a href="#">Child Item</a></li>
                            <li><a href="#">Child Item</a></li>
                            <li><a href="#">Child Item</a></li>
                            <li><a href="#">Child Item</a></li>
                            <li><a href="#">Child Item</a></li>
                            <li><a href="#">Child Item</a></li>
                            <li><a href="#">Child Item</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Item</a></li>
                    <li class="has_children"><a href="#">Parent Item</a>
                        <ul>
                            <li><a href="#">Child Item</a></li>
                            <li><a href="#">Child Item</a></li>
                            <li><a href="#">Child Item</a></li>
                            <li><a href="#">Child Item</a></li>
                            <li><a href="#">Child Item</a></li>
                            <li><a href="#">Child Item</a></li>
                            <li><a href="#">Child Item</a></li>
                            <li><a href="#">Child Item</a></li>
                            <li><a href="#">Child Item</a></li>
                            <li><a href="#">Child Item</a></li>
                            <li><a href="#">Child Item</a></li>
                            <li><a href="#">Child Item</a></li>
                            <li><a href="#">Child Item</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
        <div id="main">
            Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
            Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
            Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
            Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
            Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
            Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
            Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
            Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
            Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
            Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
            Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
            Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
            Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
            Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
            Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
            Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
            Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
            Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
            Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
            Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
            Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
            Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
            Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
            Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
            Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
            Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
            Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
            Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
            Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
            Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
            Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
            Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
            Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
            Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
            Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
            Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
            Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
            Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
            Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
            Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
            Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
            Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
            Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
            Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
            Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
            Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
            Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
            Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
            Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
            Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
            Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
            Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
            Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
            Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
            Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
            Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
            Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
            Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
            Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
        </div>
    </div>
    </body>
    
    </html>

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by MrSnrub View Post
    ." What am I doing wrong?
    You didn't remove the position:absolute from your rules which means that display:table-cell never gets actioned because absolute position takes priority over the display value (unless it is display:none).

    See Ron's example above for the correct way to do it

    Quote Originally Posted by Ron
    Try this:
    Thanks for jumping in Ron as I've been out all day and am a bit behind .

  8. #8
    SitePoint Enthusiast
    Join Date
    May 2011
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Please take a look at my page again: http://home.roadrunner.com/~dstreb/hotdog/index.html

    How do I extend the height of the sidebar and the main pane to the bottom of the screen? I don't want any white space on the bottom.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    HI,

    Add his:

    Code:
    html,body{height:100%;margin:0;padding:0}
    #outer_div{height:100%}
    #sidebar,#main{vertical-align:top}
    You need the html and body elements at 100% so that you can base the outer on that height. (100% height is safe here because you are using display:table where height is treated as a minimum. You cannot use this approach on normal divs that are not display:table.)

  10. #10
    SitePoint Enthusiast
    Join Date
    May 2011
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello! Please take a look at my site again (http://home.roadrunner.com/~dstreb/hotdog/index.html):


    1. I'm setting background: none; for the anchors of the child and grandchild items, so why are the white triangles still appearing? I want to remove them.
    2. Why can't I get the background colors of the grandchild menus to red?

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You've overcooked the styles a little there and run into specificity issues.

    I would simplify the code a little like this and reduce it by over a half.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta content="text/html; charset=windows-1252" http-equiv="Content-Type">
    <title>Hot Dog</title>
    <style type="text/css">
    html, body {
    	height: 100%;
    	margin: 0;
    	padding: 0;
    }
    #outer_div {
    	display:table;
    	height: 100%;
    	width:100%;
    }
    #sidebar {
    	display:table-cell;
    	background-color: yellow;
    	width:200px;
    	vertical-align: top;
    }
    #main {
    	display:table-cell;
    	color:yellow;
    	background-color: red;
    	font-family:"Comic Sans", "Comic Sans MS", cursive;
    	font-size:x-large;
    	vertical-align: top;
    }
    #navigation {
    	font-family:Arial, Helvetica, sans-serif;
    	font-size:12px;
    	font-weight:bold;
    	width: 130px;
    	padding:1em;
    }
    #navigation ul {
    	margin:0;
    	padding:0;
    	list-style:none;
    	background:red;
    	border:1px solid white;
    	border-bottom: none;
    }
    #navigation ul li {
    	color: white;
    	border-bottom: 1px solid white;
    	cursor:pointer;
    	position:relative;
    }
    #navigation ul li a {
    	background-color:red;
    	padding: 2px 3px;
    	text-decoration: none;
    	color: white;
    	display:block;
    }
    #navigation ul li:hover > a {
    	background-color: black;
    	color:yellow; 
    }
    #navigation ul li.has_child > a{ background:red url('http://home.roadrunner.com/~dstreb/hotdog/transparent_white_arrow.gif') no-repeat 97% 50%; }
    #navigation ul li.has_child > a:hover {background:black url('http://home.roadrunner.com/~dstreb/hotdog/transparent_yellow_arrow.gif') no-repeat 97% 50%; }
    /* end style for first level; move on to second level */
    
    #navigation ul li ul {
    	position: absolute;
    	left: 45px;
    	top:10px;
    	width:150px;
    	margin-left:-999em;
    }
    #navigation ul li.bottom_up > ul {bottom: -1px;top: auto;}
    #navigation ul li:hover {z-index:99}
    #navigation ul li:hover > ul {margin-left:0}
    /* end style for second level; move on to third level */
    
    #navigation ul li ul li ul { width:130px;left:86px;}
    #navigation ul li ul li ul {left:75px;}
    
    </style>
    </head>
    
    <body>
    <div id="outer_div">
    		<div id="sidebar"> <img src="http://home.roadrunner.com/~dstreb/hotdog/hot_dog_cart.gif">
    				<div id="navigation">
    						<ul>
    								<li class="has_child"><a href="#">Parent Item</a>
    										<ul>
    												<li><a href="#">Child Item</a>
    										</ul>
    								</li>
    								<li><a href="#">Item</a></li>
    								<li><a href="#">Item</a></li>
    								<li class="has_child"><a href="#">Parent Item</a>
    										<ul>
    												<li class="bottom_up has_child"><a href="#">Sub parent Item</a>
    														<ul>
    																<li><a href="#">Grandchild Item</a></li>
    																<li><a href="#">Grandchild Item</a></li>
    																<li><a href="#">Grandchild Item</a></li>
    																<li><a href="#">Grandchild Item</a></li>
    																<li><a href="#">Grandchild Item</a></li>
    																<li><a href="#">Grandchild Item</a></li>
    																<li><a href="#">Grandchild Item</a></li>
    														</ul>
    												</li>
    												<li><a href="#">Child Item</a></li>
    												<li><a href="#">Child Item</a></li>
    												<li><a href="#">Child Item</a></li>
    												<li><a href="#">Child Item</a></li>
    												<li><a href="#">Child Item</a></li>
    												<li><a href="#">Child Item</a></li>
    												<li><a href="#">Child Item</a></li>
    												<li><a href="#">Child Item</a></li>
    										</ul>
    								</li>
    								<li class="has_child"><a href="#">Parent Item</a>
    										<ul>
    												<li><a href="#">Child Item</a></li>
    												<li><a href="#">Child Item</a></li>
    												<li><a href="#">Child Item</a></li>
    												<li><a href="#">Child Item</a></li>
    												<li><a href="#">Child Item</a></li>
    												<li><a href="#">Child Item</a></li>
    										</ul>
    								</li>
    								<li><a href="#">Item</a></li>
    								<li class="has_child"><a href="#">Parent Item</a>
    										<ul>
    												<li><a href="#">Child Item</a></li>
    												<li><a href="#">Child Item</a></li>
    												<li><a href="#">Child Item</a></li>
    												<li><a href="#">Child Item</a></li>
    										</ul>
    								</li>
    								<li class="bottom_up has_child"><a href="#">Parent Item</a>
    										<ul>
    												<li><a href="#">Child Item</a></li>
    												<li><a href="#">Child Item</a></li>
    												<li><a href="#">Child Item</a></li>
    												<li><a href="#">Child Item</a></li>
    												<li><a href="#">Child Item</a></li>
    												<li><a href="#">Child Item</a></li>
    												<li><a href="#">Child Item</a></li>
    												<li><a href="#">Child Item</a></li>
    												<li><a href="#">Child Item</a></li>
    												<li><a href="#">Child Item</a></li>
    												<li><a href="#">Child Item</a></li>
    												<li><a href="#">Child Item</a></li>
    												<li><a href="#">Child Item</a></li>
    										</ul>
    								</li>
    								<li><a href="#">Item</a></li>
    								<li><a href="#">Item</a></li>
    								<li><a href="#">Item</a></li>
    								<li><a href="#">Item</a></li>
    								<li class="bottom_up has_child"><a href="#">Parent Item</a>
    										<ul>
    												<li class="has_child"><a href="#">Sub parent Item</a>
    														<ul>
    																<li><a href="#">Grandchild Item</a></li>
    																<li><a href="#">Grandchild Item</a></li>
    																<li><a href="#">Grandchild Item</a></li>
    																<li><a href="#">Grandchild Item</a></li>
    																<li><a href="#">Grandchild Item</a></li>
    																<li><a href="#">Grandchild Item</a></li>
    																<li><a href="#">Grandchild Item</a></li>
    														</ul>
    												</li>
    												<li><a href="#">Child Item</a></li>
    												<li><a href="#">Child Item</a></li>
    												<li><a href="#">Child Item</a></li>
    												<li><a href="#">Child Item</a></li>
    												<li><a href="#">Child Item</a></li>
    												<li><a href="#">Child Item</a></li>
    												<li><a href="#">Child Item</a></li>
    												<li><a href="#">Child Item</a></li>
    												<li><a href="#">Child Item</a></li>
    												<li><a href="#">Child Item</a></li>
    												<li class="has_child"><a href="#">Child Item</a>
    														<ul>
    																<li><a href="#">Grandchild Item</a></li>
    																<li><a href="#">Grandchild Item</a></li>
    																<li><a href="#">Grandchild Item</a></li>
    																<li><a href="#">Grandchild Item</a></li>
    																<li><a href="#">Grandchild Item</a></li>
    														</ul>
    												</li>
    												<li><a href="#">Child Item</a></li>
    										</ul>
    								</li>
    						</ul>
    				</div>
    		</div>
    		<div id="main"> Hot dog! </div>
    </div>
    </body>
    </html>
    I've added a class of "has_child" to indicate which sub menus should have the arrow so you only need to target those with the images. The rest of the changes were removing code and letting the cascade take over.

  12. #12
    SitePoint Enthusiast
    Join Date
    May 2011
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's almost the way I want it, except when I hover the mouse over a child or grandchild menu, the parent or grandparent doesn't stay black with a yellow triangle.

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Just change this:

    Code:
    #navigation ul li.has_child:hover > a {background:black url('http://home.roadrunner.com/~dstreb/hotdog/transparent_yellow_arrow.gif') no-repeat 97% 50%; }
    to this:

    Code:
    #navigation ul li.has_child > a:hover {background:black url('http://home.roadrunner.com/~dstreb/hotdog/transparent_yellow_arrow.gif') no-repeat 97% 50%; }


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •