CSS Menu , can someone explain why.

[1DMF]

hello peeps,

as per the title , this is more a question for someone to help me understand why , rather than needing a fix for something.

I have a CSS menu , nothing special there ...

<div id="menu" >
    <ul>
        <li><a href="index.html">Home</a></li> 
    </ul>
    <ul>
        <li><h2>Services</h2>
            <ul>
                <li><a href="index.html">Tax</a></li>
                <li><a href="index.html">Investment</a></li>
                <li><a href="index.html">UK Mortgages</a></li> 
                <li><a href="index.html">Legals</a></li>                           
                <li><a href="index.html">Insurance</a></li> 
                <li><a href="index.html">Currency</a></li>
                <li><a href="index.html">Calculator</a></li>
            </ul>
        </li> 
    </ul>
    <ul>
        <li><a href="index.html">Enquiry</a>            
        </li> 
    </ul>
        <ul>
        <li><h2>Publications</h2>
            <ul>
                <li><a href="index.html">Articles</a></li>
                <li><a href="index.html">Books</a></li>                             
            </ul>
        </li> 
    </ul>
    <ul>
        <li><h2>Countries</h2>
            <ul>
                <li><a href="index.html">France</a></li>
                <li><a href="index.html">Spain</a></li>
                <li><a href="index.html">Protugal</a></li> 
                <li><a href="index.html">Italy</a></li>                               
                <li><a href="index.html">Cyprus</a></li> 
                <li><a href="index.html">Carribean</a></li>
                <li><a href="index.html">Florida</a></li>  
                <li><a href="index.html">Other</a></li>
                                                           
            </ul>
        </li> 
    </ul>        
</div>

CSS ......

#menu{
    width:800px;
    float:left;
    margin-bottom:5px;
}

#menu ul li ul li a, #menu ul li a, #menu h2 {
    font:bold 11px/16px arial,helvetica,sans-serif;
    display:block;
    border-width:1px;
    border-style:solid;
    border-color:#ccc #888 #555 #bbb;
    white-space:nowrap;
    margin:0;
    padding:1px 0 1px 3px;
    text-align:center;
}

#menu h2{
    color:#fff;
    text-transform:uppercase;
    text-align:center;
    background:#000 url(/images/expand3.gif) no-repeat 100% 100%;    
}

#menu ul li a{
    color:#fff;
    text-transform:uppercase;
    background:#000; 
}

#menu ul li ul li a{
    background:#eee;
    text-decoration:none
}

#menu ul li ul li a, #menu ul li ul li a:visited{
    color:#fff;
}

/* HOVER COLOUR */
#menu ul li a:hover , #menu ul li ul li a:hover{
    color:#f00;
    background:#ddd;
}

#menu ul li ul li a:active{
    color:#006;
    background:#ccc;
}

#menu ul{
    list-style:none;
    margin:0;
    padding:0;
    float:left;
    width:160px;
}

#menu li{
    position:relative;
    list-style:none;
}

#menu ul ul{
    position:absolute;
    z-index:500;
    top:auto;
    display:none;
}

#menu ul ul ul{
    top:0;
    left:100%;
}

now what idon't under stand is if you hover over the part that has a sub menu, you don't need to be over the actual text (anchor) any part of the 'ul li ul li' will do, however for those with no sub menu you seem to have to hover over the text (anchor) for the link to work.

HOWEVER ... I have found that if I add width:100%; to the

#menu ul li a{
    color:#fff;
    text-transform:uppercase;
    background:#000; 
[b] width:100%;[/b]
}

it then behaves like the sub menus do enabling any part of the menu section to be clicked for the link to work.

WHY? it isn't required for the '#menu ul li ul li a' so why is it required for the '#menu ul li a'

I have to be missing something some where, can someone enlighten me please.

thanks 1DMF

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[monksnake]

This is the reason:

#menu ul li ul li a, #menu ul li a, #menu h2 {
    font:bold 11px/16px arial,helvetica,sans-serif;
    [!]display:block;[/!]
    border-width:1px;
    border-style:solid;
    border-color:#ccc #888 #555 #bbb;
    white-space:nowrap;
    margin:0;
    [!]padding:1px 0 1px 3px;[/!]
    text-align:center;
}

Anchors are default inline elements, by blocking it off and with the padding, it means that the actual anchor isn't just in the area where the text for the anchor is.

Take off display:block and you will see it acts like the other anchors you mentioned.



<.

 

[kaht]

I'm assuming below that the code in blue is the link without a submenu, and the code in red is the link that expands the submenu below it.

If that's the case, the "problem" is that <h2> tags are block level elements, and they stretch horizontally to take up as much space as they can (just like a div, which is also a block level element). An <a> tag on the other hand is an inline element, which means it only takes up as much horizontal space as it needs. Instead of putting width:100%;, you can likely put display:block; to achieve the same effect. Additionally, if you applied the style display:inline; to the <h2> tag then you would see that it only works when you hover over the text.

    <ul>
        <li>[blue]<a href="index.html">Home</a>[/blue]</li>
    </ul>
    <ul>
        <li>[red]<h2>Services</h2>[/red]
            <ul>
                <li><a href="index.html">Tax</a></li>
                <li><a href="index.html">Investment</a></li>
                <li><a href="index.html">UK Mortgages</a></li>
                <li><a href="index.html">Legals</a></li>                           
                <li><a href="index.html">Insurance</a></li>
                <li><a href="index.html">Currency</a></li>
                <li><a href="index.html">Calculator</a></li>
            </ul>
        </li>
    </ul>

-kaht

Looking for a puppy?

http://www.silkypups.com

[small](Silky Terriers are hypoallergenic dogs that make great indoor pets due to their lack of shedding and small size)[/small]

 

[1DMF]

I appreciate what your saying kaht, but if you look, I already have display:block; applied to it, which is why i can't understand why I need to hard code a width as well.

see here ....

#menu ul li ul li a, #menu ul li a, #menu h2 {
    font:bold 11px/16px arial,helvetica,sans-serif;
    [b]display:block;[/b]
    border-width:1px;
    border-style:solid;
    border-color:#ccc #888 #555 #bbb;
    white-space:nowrap;
    margin:0;
    padding:1px 0 1px 3px;
    text-align:center;
}

It's not the <h2> that i was concerened with but the sub menu are just <ul><li><ul><li><a> and you don't need to hover over the text for those to work, but the first level <ul><li><a> you do?



"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[kaht]

I finally see what you're saying. You should have specified that this was an IE only problem. I remember having to do this for a page I worked on a while back. IE requires the width to be set even when the display is set to block - firefox doesn't. It's just another one of the many IE bugs.

-kaht

Looking for a puppy?

http://www.silkypups.com

[small](Silky Terriers are hypoallergenic dogs that make great indoor pets due to their lack of shedding and small size)[/small]

 

[1DMF]

ok, but why does display:block work for the second tier (sub menu) but not the first, very odd, i could understand if I had to apply a width to both but i don't.

like i said , i worked out the solution, just don't understand it , but hey whats new!

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[kaht]

ok, but why does display:block work for the second tier (sub menu) but not the first

No clue, after copying/pasting your code the 2nd level is hidden. More than likely because there are not hover classes defined to make them appear.

-kaht

Looking for a puppy?

http://www.silkypups.com

[small](Silky Terriers are hypoallergenic dogs that make great indoor pets due to their lack of shedding and small size)[/small]

 

[1DMF]

oops, sorry, i missed that bit when I cut and pasted

div#menu li:hover{
    cursor:pointer;
    z-index:100;
}

div#menu li:hover ul ul,
div#menu li li:hover ul ul,
div#menu li li li:hover ul ul,
div#menu li li li li:hover ul ul
{display:none;}

div#menu li:hover ul,
div#menu li li:hover ul,
div#menu li li li:hover ul,
div#menu li li li li:hover ul
{
display:block;
}

still can't see what makes the sub anchor 100% wide but no the first level.

hey ho.



"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.