SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    SitePoint Evangelist
    Join Date
    Feb 2005
    Posts
    520
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Questions about styling & reversing a css drop-down

    A few questions about the CSS drop-down menu I am working on.

    The menu can be seen here: http://www.westeros.org/GoT

    "Features" shows the left drop-down when moused over. The right side isn't implemented because its breaking too badly right now, but the code is pasted in below.

    1) I am not quite sure how to best style the drop-down to work with the graphical menu, but I am thinking it might need a clearer border all around. Can I apply a border around the whole drop-down, as opposed to around each individual li?

    2) For "Sites" on the right I am trying to create a drop-down where the right edge lines up with the right edge of "Sites" and where it extends to the left instead of the right. I've tried to figure out which parts of the CSS to change to make it go left instead of right, but I clearly don't quite have that right yet.

    HTML

    Code:
    <ul id="MenuLeft">
    <li class="About"><a href="http://www.westeros.org/GoT/">About</a></li>
    <li class="News"><a href="http://www.westeros.org/GoT/News/">News</a></li>
    <li class="Features"><a href="http://www.westeros.org/GoT/Features/">Features</a>
    <ul>
    <li><a href="#">Test 1</a></li>
    <li><a href="#">Test 2</a></li>
    <li><a href="#">Test 3</a></li>
    </ul>
    </li>
    <li class="Characters"><a href="http://www.westeros.org/GoT/Characters/">Characters</a></li>
    <li class="Episodes"><a href="http://www.westeros.org/GoT/Episodes/">Episodes</a></li>
    <li class="Gallery"><a href="http://www.westeros.org/GoT/Gallery/">Gallery</a></li>
    </ul>
    <ul id="MenuRight">
    <li class="Sites"><a href="#">Sites</a>
    <ul>
    <li><a href="http://asoiaf.westeros.org/">A Song of Ice and Fire</a></li>
    <li><a href="http://awoiaf.westeros.org/">A Wiki of Ice and Fire</a></li>
    <li><a href="http://www.westeros.org/ASoWS/">All Sorts of Weird Stuff</a></li>
    <li><a href="http://www.westeros.org/Citadel/">The Citadel</a></li>
    <li><a href="http://www.westeros.org/GoT/">Game of Thrones</a></li>
    <li><a href="http://www.westeros.org/BoD/">Blood of Dragons</a></li>
    <li><a href="http://www.westeros.org/ARoIaF/">A Ring of Ice and Fire</a></li>
    </ul>
    </li>
    </ul>
    Left CSS

    Code:
    UL#MenuLeft, UL#MenuLeft UL {
        height: 25px;
        left: 200px;    
    	 list-style: none;
     	 margin: 0;
        padding: 0;
        position: absolute;
        top: 125px;
        width: 435px;
    }
    
    UL#MenuLeft li, UL#MenuLeft li a {
        float: left;
        height: 25px;
        position: relative;
        text-decoration: none;    
    	 text-indent: -999em;
    }
    
    UL#MenuLeft li ul {
        left: 0;
        margin-left: -999em;    
    	 position: absolute;
        top: 100&#37;;
    }
    
    UL#MenuLeft li li {
       background: #D5AD74 url(http://www.westeros.org/GoT/Graphics/bg_parchment.png);
    	border: thin dotted #A00000;	   
    	float: none;
    	width: 150px;
    }
    
    UL#MenuLeft li a {
        background: url(http://www.westeros.org/GoT/Graphics/menu_left-got.png) no-repeat 0 0
    } 
    
    UL#MenuLeft li a:focus {
        outline: 0
    }
    
    UL#MenuLeft li.About, UL#MenuLeft li.About a {
        background-position: 0 0;
        width: 52px;
    }
    
    UL#MenuLeft li.About a:hover {
        background-position: 0 -25px
    }
    
    UL#MenuLeft li.News, UL#MenuLeft li.News a {
        background-position: -52px 0;
        width: 60px;
    }
    
    UL#MenuLeft li.News a:hover {
        background-position: -52px -25px
    }
    
    UL#MenuLeft li.Features, UL#MenuLeft li.Features a {
        background-position: -112px 0;
        width: 84px;
     }
    
    UL#MenuLeft li.Features a:hover {
        background-position: -112px -25px
    }
    
    UL#MenuLeft li.Characters, UL#MenuLeft li.Characters a {
        background-position: -194px 0;
        width: 99px;
    }
    
    UL#MenuLeft li.Characters a:hover {
        background-position: -194px -25px
    }
    
    UL#MenuLeft li.Episodes, UL#MenuLeft li.Episodes a {
        background-position: -293px 0;
        width: 80px;
    }
    
    UL#MenuLeft li.Episodes a:hover {
        background-position: -293px -25px
    }
    
    UL#MenuLeft li.Gallery, UL#MenuLeft li.Gallery a {
        background-position: -373px 0;
        width: 58px;
    }
    
    UL#MenuLeft li.Gallery a:hover {
        background-position: -373px -25px
    }
    
    /* Sub Menu Styles */
    
    UL#MenuLeft li:hover ul ul, UL#MenuLeft li.over ul ul {
        margin-left: -999em;
    }
    
    UL#MenuLeft li:hover ul, UL#MenuLeft li li:hover ul, UL#MenuLeft li.over ul, UL#MenuLeft li li.over ul {
        margin-left: 0;
    }
    
    UL#MenuLeft li li a {
        background: none;
        text-indent: 0;
    }
    Right CSS

    Code:
    UL#MenuRight, UL#MenuRight UL {
        height: 25px;
        list-style: none;
        margin: 0;
        padding: 0;
        position: absolute;
        right: 200px;
        top: 125px;
        width: 40px;
    }
    
    UL#MenuRight li, UL#MenuRight li a {
        float: right;
    	 height: 25px;
        position: relative;
        text-decoration: none;
    	 text-indent: -999em;
    }
    
    UL#MenuRight li ul {
        margin-right: -999em;    
    	 position: absolute;
        right: 0;
        top: 100%;
    }
    
    UL#MenuRight li li {
       background: #D5AD74 url(http://www.westeros.org/GoT/Graphics/bg_parchment.png);
    	border: thin dotted #A00000;	   
    	float: none;
    	width: 150px;
    }
    
    UL#MenuRight li.Sites a:hover {
        background-position:0 -25px
    }
    
    UL#MenuRight li li {
        width:150px;
        float: none;
    	 background: #D5AD74 url(http://www.westeros.org/GoT/Graphics/bg_parchment.png);
    	 border: thin dotted #A00000;
    }
    
    UL#MenuRight li a {
        background: url(http://www.westeros.org/GoT/Graphics/menu_right.png) no-repeat 0 0
    }
    
    UL#MenuRight li a:focus {
        outline: 0
    }
    
    UL#MenuRight li.Sites, UL#MenuRight li.Sites a {
        background-position: 0 0;   
    	 width: 40px;
    }
    
    /* Sub Menu Styles */
    
    UL#MenuRight li:hover ul ul, UL#MenuRight li.over ul ul {
        margin-right: -999em;
    }
    
    UL#MenuRight li:hover ul, UL#MenuRight li li:hover ul, UL#MenuRight li.over ul, UL#MenuRight li li.over ul {
        margin-right: 0;
    }
    
    UL#MenuRight li li a {
        background: none;
        text-indent: 0;
    }

  2. #2
    SitePoint Evangelist
    Join Date
    Feb 2005
    Posts
    520
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ack, nevermind. The drop-down on the right can't be seen on the site, it was breaking it too badly to leave up. Post edited to reflect that.

  3. #3
    SitePoint Evangelist
    Join Date
    Feb 2005
    Posts
    520
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I managed to get the menu on the right side to appear in the right spot, but it appears as a persistent menu rather than on hover, plus it seems to kill the left menu now.

    Page is still http://www.westeros.org/GoT, and the HTML is as shown in the first post. The code for the right menu is currently not on the page itself, since it still breaks it too badly.

    Left Menu CSS

    Code:
    UL#MenuLeft, UL#MenuLeft UL {
        height: 25px;
        left: 200px;    
    	 list-style: none;
     	 margin: 0;
        padding: 0;
        position: absolute;
        top: 125px;
        width: 435px;
    }
    
    UL#MenuLeft LI, UL#MenuLeft LI A {
        float: left;
        height: 25px;
        position: relative;
        text-decoration: none;    
    	 text-indent: -999em;
    }
    
    UL#MenuLeft LI UL {
        left: 0;
        margin-left: -999em;    
    	 position: absolute;
        top: 100&#37;;
    }
    
    UL#MenuLeft LI LI {
       background: #D5AD74 url(http://www.westeros.org/GoT/Graphics/bg_parchment.png);
    	border: thin dotted #A00000;	   
    	float: none;
    	width: 150px;
    }
    
    UL#MenuLeft LI A {
        background: url(http://www.westeros.org/GoT/Graphics/menu_left-got.png) no-repeat 0 0
    } 
    
    UL#MenuLeft LI A:Focus {
        outline: 0
    }
    
    UL#MenuLeft LI.About, UL#MenuLeft LI.About A {
        background-position: 0 0;
        width: 52px;
    }
    
    UL#MenuLeft LI.About A:Hover {
        background-position: 0 -25px
    }
    
    UL#MenuLeft LI.News, UL#MenuLeft LI.News A {
        background-position: -52px 0;
        width: 60px;
    }
    
    UL#MenuLeft LI.News A:Hover {
        background-position: -52px -25px
    }
    
    UL#MenuLeft LI.Features, UL#MenuLeft LI.Features A {
        background-position: -112px 0;
        width: 84px;
     }
    
    UL#MenuLeft LI.Features A:Hover {
        background-position: -112px -25px
    }
    
    UL#MenuLeft LI.Characters, UL#MenuLeft LI.Characters A {
        background-position: -194px 0;
        width: 99px;
    }
    
    UL#MenuLeft LI.Characters A:Hover {
        background-position: -194px -25px
    }
    
    UL#MenuLeft LI.Episodes, UL#MenuLeft LI.Episodes A {
        background-position: -293px 0;
        width: 80px;
    }
    
    UL#MenuLeft LI.Episodes A:Hover {
        background-position: -293px -25px
    }
    
    UL#MenuLeft LI.Gallery, UL#MenuLeft LI.Gallery A {
        background-position: -373px 0;
        width: 58px;
    }
    
    UL#MenuLeft LI.Gallery A:Hover {
        background-position: -373px -25px
    }
    
    UL#MenuLeft LI:Hover UL UL, UL#MenuLeft LI.Over UL UL {
        margin-left: -999em;
    }
    
    UL#MenuLeft LI:Hover UL, UL#MenuLeft LI LI:Hover UL, UL#MenuLeft LI:Over UL, UL#MenuLeft LI LI.Over UL {
        margin-left: 0;
    }
    
    UL#MenuLeft LI LI A {
        background: none;
        text-indent: 0;
    }
    Right Menu CSS

    Code:
    UL#MenuRight, UL#MenuRight UL {
        height: 25px;
        list-style: none;
        margin: 0;
        padding: 0;
        position: absolute;
        right: 200px;
        top: 125px;
        width: 200px;
    }
    
    UL#MenuRight LI, UL#MenuRight LI A {
        float: right;
    	 height: 25px;
        position: relative;
        text-decoration: none;
    	 text-indent: -999em;
    }
    
    UL#MenuRight LI UL {
        margin-left: -999em;    
    	 position: absolute;
        right: 0;
        top: 100%;
    }
    
    UL#MenuRight LI LI {
       background: #D5AD74 url(http://www.westeros.org/GoT/Graphics/bg_parchment.png);
    	border: thin dotted #A00000;	   
    	float: none;
    	width: 200px;
    }
    
    UL#MenuRight LI.Sites A:Hover {
        background-position:0 -25px
    }
    
    UL#MenuRight LI LI {
        background: #D5AD74 url(http://www.westeros.org/GoT/Graphics/bg_parchment.png);
    	 border: thin dotted #A00000;
        float: none;
        width: 200px;
    }
    
    UL#MenuRight LI A {
        background: url(http://www.westeros.org/GoT/Graphics/menu_right.png) no-repeat 0 0
    }
    
    UL#MenuRight LI A:Focus {
        outline: 0
    }
    
    UL#MenuRight LI.Sites, UL#MenuRight LI.Sites A {
        background-position: 0 0;   
    	 width: 40px;
    }
    
    UL#MenuRight LI:Hover UL UL, UL#MenuRight LI:Over UL UL {
        margin-left: -999em;
    }
    
    UL#MenuRight LI:Hover UL, UL#MenuRight LI LI:Hover UL, UL#MenuRight LI:Over UL, UL#MenuRight LI LI:Over UL {
        margin-right: 0;
    }
    
    UL#MenuRight LI LI A {
        background: none;
        text-indent: 0;
    }

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

    You can't use margin-left on a right absolute element as it has no effect.

    You would need to use something like this:

    Code:
    ul#MenuRight li ul {
        position: absolute;
        right:0px;
        top: 100&#37;;
        margin-right:999em
    
    }
     ul#MenuRight li:hover ul {
    margin-right:0;
    }
    Just follow that logic through for nested menus etc.

    Don't use uppercase for your selectors or pseudo classes as its messy and you are prone to errors like that.

    Indeed you have an error here that is killing the hover effect.

    Code:
     UL#MenuRight LI:Over UL UL
    There is no pseudo class called Over and it stops the whole rule from working.

    I'm assuming you meant to be using the IE6 .over class (where's the js for it anyway?)

    Code:
     ul#MenuRight li.over ul
    Fix all those instances and fix any other validation errors at the same time and the menu should display ok

  5. #5
    SitePoint Evangelist
    Join Date
    Feb 2005
    Posts
    520
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    HI,

    You can't use margin-left on a right absolute element as it has no effect.

    You would need to use something like this:

    Code:
    ul#MenuRight li ul {
        position: absolute;
        right:0px;
        top: 100%;
        margin-right:999em
    
    }
     ul#MenuRight li:hover ul {
    margin-right:0;
    }
    Ah, ok. I had tried margin-right:-999em, but that gave me horizontal scrollbars.

    Where exactly, or more or less anyway, does the element end up hidden with a margin-right:999em? The negative left margin I kind of understand, but this one I can't quite visualize.

    Should the text-indent here change too?

    Code:
    UL#MenuRight LI, UL#MenuRight LI A {
        float: right;
        height: 25px;
        position: relative;
        text-decoration: none;
        text-indent: -999em;
    }
    I've got the hover working now, but the text in the submenus is pushed over to the right.


    Quote Originally Posted by Paul O'B View Post

    Don't use uppercase for your selectors or pseudo classes as its messy and you are prone to errors like that.
    Was just sorting that out, I was reading a couple of articles on these sorts of drop-downs and realized what the "over" was for. The javascript had already been removed, so I am taking those classes out.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Where exactly, or more or less anyway, does the element end up hidden with a margin-right:999em?
    It ends up in more or less the same place as left:-999em would have placed it if the element was not right positioned.

    i.e. It will move the element from its current position and move it from the right by 999em. Its the same as saying left:-999em in most respects.

    The text is on the right because you are floating it right.
    Try floating left.
    e.g.
    Code:
    ul#MenuRight ul li a{float:left}

  7. #7
    SitePoint Evangelist
    Join Date
    Feb 2005
    Posts
    520
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    It ends up in more or less the same place as left:-999em would have placed it if the element was not right positioned.

    i.e. It will move the element from its current position and move it from the right by 999em. Its the same as saying left:-999em in most respects.

    Does moving something left -999em or right 999em always work? Or would a wide enough screen show it?

    I saw when reading the articles on drop-downs that in some instances, display:none is used to hide things instead. Why is the margin method superior? Also, I saw one that mentioned resetting the margin with margin: auto instead of margin: 0, is there any significant difference to those methods?

    Quote Originally Posted by Paul O'B View Post
    The text is on the right because you are floating it right.
    Try floating left.
    e.g.
    Code:
    ul#MenuRight ul li a{float:left}
    The aligns the text to the left, but it still cuts off most of it. Is it because of these two bits:

    Code:
    UL#MenuRight, UL#MenuRight UL {
        height: 25px;
        list-style: none;
        margin: 0;
        padding: 0;
        position: absolute;
        right: 200px;
        top: 125px;
        width: 40px;
    }
    Code:
    UL#MenuRight LI UL {
        margin-right: 999em;    
    	 position: absolute;
        right: 0;
        top: 100%;
    	 width: 200px;
    }
    I had thought that adding a width of 200px to the second declaration would override the 40px from the first, but I am guessing that's incorrect?

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Linda A View Post
    Does moving something left -999em or right 999em always work? Or would a wide enough screen show it?
    Assuming you have no font smaller than 10px then you would need a monitor that is 9990px wide before it wouldn't work

    I saw when reading the articles on drop-downs that in some instances, display:none is used to hide things instead. Why is the margin method superior?
    There are 2 main reasons.

    The first is that screenreaders may not see the links if display:none is used. Just changing the position is better for screenreaders and the links are then read.

    The second reason is that IE6/7 would often not display the menu correctly in certain situations. The offset position is much more stable.

    Also, I saw one that mentioned resetting the margin with margin: auto instead of margin: 0, is there any significant difference to those methods?
    The old way was to use left:auto which unfortunately doesn't work properly in IE6 because the auto position is dependent on text alignment of the parent element. If the text is text-align:right the left:auto position is shifted incorrectly to the right and miles away from where it should be.

    That's why I always advise the parent list to be position:relative and then left:0 can be used.

    However there is one more problem that if you use left:-999em and left:0 to hide and show then IE7 breaks.

    My original solution (which has been taken up by many) is to use margin-left instead of left:and is much more robust.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Linda A View Post
    I had thought that adding a width of 200px to the second declaration would override the 40px from the first, but I am guessing that's incorrect?
    The first rule has more weight because of the .sites class so you would need to match it.

    Code:
    ul#MenuRight li.Sites ul,
    ul#MenuRight li.Sites ul a{width:200px}

  10. #10
    SitePoint Evangelist
    Join Date
    Feb 2005
    Posts
    520
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah, ok More specific = more weight?

    Thank you, the basic drop-downs are now working as they should. Now I just need to see if I can style them in a way that goes better with the rest of the menu. I am thinking a thicker border around the whole drop-down might work. Do I need to add any additional elements to apply that border?

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I am thinking a thicker border around the whole drop-down might work. Do I need to add any additional elements to apply that border?
    You should be able to style the uls border as long as all the dimensions are taken into account.

  12. #12
    SitePoint Evangelist
    Join Date
    Feb 2005
    Posts
    520
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Getting there.

    This is what I've got now:

    Code:
    ul#MenuRight, ul#MenuRight ul {
        height: 25px;
        list-style: none;
        margin: 0;
        padding: 0;
        position: absolute;
        right: 200px;
        top: 125px;
        width: 40px;
    }
    
    ul#MenuRight ul {
        background: #D5AD74 url(http://www.westeros.org/GoT/Graphics/bg_parchment.png);
    	 border: 5px solid #A00000;	 
    	 font: normal normal bold 14px  "Palatino Linotype", Palatino, "Book Antiqua", serif;
    	 height: auto;  
    	 margin-top: 10px;
        width: 200px;
    }
    
      
    ul#MenuRight li, ul#MenuRight li a {
        float: right;
    	 height: 25px;
        position: relative;
        text-decoration: none;
    	 text-indent: -999em;
    }
    
    ul#MenuRight li a {
        background: url(http://www.westeros.org/GoT/Graphics/menu_right.png) no-repeat 0 0
    }
    
    ul#MenuRight li a:focus {
        outline: 0
    }
    
    ul#MenuRight li.Sites, ul#MenuRight li.Sites a {
        background-position: 0 0;   
    	 width: 40px;
    }
    
    ul#MenuRight li.Sites a:hover {
        background-position:0 -25px
    }
    
    ul#MenuRight li.Sites ul, ul#MenuRight li.Sites ul a {
    	width:200px;
    }
    
    ul#MenuRight li ul {
        margin-right: 999em;    
    	 position: absolute;
        right: 0;
        top: 100&#37;;
    }
    
    ul#MenuRight li li {
    	float: none;
    	width: 200px;
    }
    
    ul#MenuRight li li a {
        background: none;
    	 float: left;
        text-indent: 0;
    }
    
    ul#MenuRight li:hover ul ul {
        margin-right: 999em;
    }
    
    ul#MenuRight li:hover ul, ul#MenuRight li li:hover ul {
        margin-right: 0;
    }
    
    ul#MenuRight li li a:link, ul#MenuRight li li a:visited {
        color: #A00000;
        text-decoration: none;
    }
    
    ul#MenuRight li li a:link:hover, ul#MenuRight li li a:visited:hover, ul#MenuRight li li a:link:active, ul#MenuRight li li a:visited:active {
        color: #B40000;
        text-decoration: underline;
    }
    I am now getting an issue with not always being able to "hit" the submenu when I mouse down from "Sites". Is it the margin-top on "ul#MenuRight ul" that is causing that? If so, can it be worked around?

    At this stage, do I have any unnecessary rules or rules that could be collapsed further in this piece of code? I spent most of yesterday trying to streamline my CSS as far as I understand how to do it, so I'll have a better base for doing the rest of the site on.

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

    You can't place the submenu away from the target element because its the hover on the list target that holds the sublist open. If you have moved the submenu too far away then you are no longer hovering on the list so the submenu is hidden once again.

    It must not be placed further away than the height of the target element.

    You could increassee the height of the list element instead of placing the ul further away.

    e.g.
    Code:
    ul#MenuRight ul {
        background: #D5AD74 url(http://www.westeros.org/GoT/Graphics/bg_parchment.png) no-repeat;
         border: 5px solid #A00000;     
         font: normal normal bold 14px  "Palatino Linotype", Palatino, "Book Antiqua", serif;
         height: auto;  
         margin-top: 0px;
        width: 200px;
    top:0
    }
    
    
    ul#MenuRight li{height:45px}

  14. #14
    SitePoint Evangelist
    Join Date
    Feb 2005
    Posts
    520
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, got it.

    Well, its starting to look more or less like I intended it. One question about the links where I have drop-downs: what's the correct way of making the top-level image not be a link in those cases? As with Sites, for example. That probably shouldn't be clickable, but should it still read as a link to screen readers and such?

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Usually, the top level links should be a link that takes users to an intermediate page where they can chose the submenu items in case they have JS turned off (in IE6 that is).

    If you don't care about IE6 users and as you are hovering on the list element the top row doesn't have to be anchors but could be another element styled the same.

    Or alternatively set the top link to go to the same place that the first item in the sublist would send someone.

    You may find some other points of interest here:

    http://www.smashingmagazine.com/2009...est-practices/

  16. #16
    SitePoint Evangelist
    Join Date
    Feb 2005
    Posts
    520
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is it possible to make this sort of menu screen-reader friendly? I tried adding alt tags to the li's, but that doesn't seem to do the trick when I turn off image rendering.

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

    If you are talking about the background image in your top menu then alt attributes are not relevant as they apply only to images actually in the html.

    As you are using transparent images then you are stuck because you can't use the good image replacement method.

    If you changed those images to solid and included the relevant part of the background on the image itself (which should be possible in a fixed width scenario although you would have to match positions exactly) then you could use the image replacement method that i linked to above.

    There's not much else you can do.

  18. #18
    SitePoint Evangelist
    Join Date
    Feb 2005
    Posts
    520
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, that's what I feared. Unfortunately, the middle area is the one that isn't fixed, it varies between 600 and 800 wide, so doing the images as solid won't work.

    I'll have to look at including text-only navigation somewhere else.

    Thanks.


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
  •