HTML / CSS mouse context menu

Question

I know I will be hissed at for asking a question like this, but I'm new to selectors and am struggling with hover effects for a child UL embedded in an existing UL.

The HTML:

    <ul id="ctxMenuStock">
        <li><a href="#ctxCMDCopy">Copy</a></li>
        <li><a href="#ctxCMDReserve">Reserve/Outgoing</a></li>
        <li><a href="#">Set Status <span style="font-family: Webdings">6</span></a>
            <ul id="ctxMenuStockStatuses" runat="server"></ul>
        </li>
    </ul>

ctxMenuStockStatuses is populated by server code on page load.

The CSS:

    #ctxMenuStock, #ctxMenuStock ul, #ctxMenuPending, #ctxMenuPending ul{
        display:none;
        margin:0;
        padding:0;
        list-style-type:none;
        list-style-position:outside;
        position:fixed;
        line-height:1.5em;
    }

    #ctxMenuStock a:link, #ctxMenuStock hr, #ctxMenuStock a:active, #ctxMenuStock a:visited, #ctxMenuPending a:link, #ctxMenuPending hr, #ctxMenuPending a:active, #ctxMenuPending a:visited{
        display:block;
        padding:0px 5px;
        color:#fff;
        text-decoration:none;
        background-color:#333;
     }

    #ctxMenuStock>li:hover ul, #ctxMenuStock>li:hover ul li, #ctxMenuStock>li:hover ul li a
    {
        color:#fff;
        background-color:#333;
    }

    #ctxMenuStock>li:hover a, #ctxMenuPending>li:hover a{
        background-color:#fff;
        color:#333;
    }

    #ctxMenuStock ul li ul li a:hover, #ctxMenuPending ul li ul li a:hover{
        background-color:#fff;
        color:#333;
    }

    #ctxMenuStockStatuses li
    {
        color:#fff;
        background-color:#333;
    }

    #ctxMenuStockStatuses li:hover
    {
        background-color:#fff;
        color:#333;
    }


    #ctxMenuStock li, #ctxMenuPending li{
        float:none;
        position:relative;
    }


    #ctxMenuStock ul, #ctxMenuPending ul {
        position:absolute;
        display:none;
        float:left;
    }

    #ctxMenuStock li ul a, #ctxMenuPending li ul a
    {
        width:12em;
        margin: 0 0 0 4px;
        float:left;
    }

    #ctxMenuStock ul ul, #ctxMenuPending ul ul{
        top:auto;
    }

    #ctxMenuStock li ul ul, #ctxMenuPending li ul ul {
        left:12em;
        margin:0px 0 0 10px;
    }

    #ctxMenuStock li:hover ul ul, #ctxMenuStock li:hover ul ul ul, #ctxMenuStock li:hover ul ul ul ul{
        display:none;
    }
    #ctxMenuStock li:hover ul, #ctxMenuStock li li:hover ul, #ctxMenuStock li li li:hover ul, #ctxMenuStock li li li li:hover ul{
        display:block;
    }

    #ctxMenuPending li:hover ul ul, #ctxMenuPending li:hover ul ul ul, #ctxMenuPending li:hover ul ul ul ul{
        display:none;
    }
    #ctxMenuPending li:hover ul, #ctxMenuPending li li:hover ul, #ctxMenuPending li li li:hover ul, #ctxMenuPending li li li li:hover ul{
        display:block;
    }

The menu is basically styled as a dark background with white text, but on hover this reverses. This works ok for the parent menu, but the child menu doesn't change and remains white on black.

I know some of this CSS is contradicting each other, but its becoming difficult to follow. I can't seem to find alot (if any) of working examples online of how to do this with sub-menus.

Can somebody please show me the best approach for this.

EDIT: As requested, JSFiddle example created: http://jsfiddle.net/KzhEP/ Although in my main project, the oncontextmenu attribute is attached to each row of my table server-side. I have mocked up a simple example, but for some reason i cannot get the right click functionality working on jsfiddle.

jsfiddle.net/KzhEP Right mouse click doesn't appear to work in JSFiddle for me though? So its useless at the moment unless anyone can work out whats gone wrong? — user1830285
– user1830285, Commented Jan 14, 2013 at 12:18

My Head Hurts · Accepted Answer · 2013-01-14 12:55:48Z

2

It is diffcult to tell what you are wanting to achieve here, but you can try the following ~

Delete the following css as it is overriding the nested black on white css changes:

#ctxMenuStock>li:hover ul, #ctxMenuStock>li:hover ul li, 
#ctxMenuStock>li:hover ul li a{
    color:#fff;
    background-color:#333;
}

Then change the CSS selector that provides the hover effect from:

#ctxMenuStock>li:hover a, #ctxMenuPending>li:hover a{
    background-color:#fff;
    color:#333;
}

To:

#ctxMenuStock li:hover > a, #ctxMenuPending li:hover > a{
    background-color:#fff;
    color:#333;
}

This way you are targeting all li elements in #ctxMenuStock and #ctxMenuPending no mattter of depth - but you only manipulate the child anchor tag of a hovered li element.

Example: http://jsfiddle.net/embWK/

edited Jan 14, 2013 at 12:55

answered Jan 14, 2013 at 12:38

My Head Hurts

37.7k16 gold badges77 silver badges118 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1830285 Over a year ago

Excellent, that works great. I did make these changes in my CSS file, but it didnt work. For some reason copying and pasting from the JSFiddle example worked like a charm. So something else must have changed also. I've also learned a bit more about selectors, which is the overall aim. Thanks

My Head Hurts Over a year ago

@user1830285 I told you to delete the wrong thing intially in my answer, but it has been corrected - that probably caused the issue. Here is a fiddle containing comments about what I have done : jsfiddle.net/embWK

starbeamrainbowlabs · Accepted Answer · 2013-01-14 12:44:46Z

0

Your CSS is wrong. By the looks of things you are typing different settings for the same thing . Check your CSS again and you will find your mistakes

edited Jan 14, 2013 at 12:44

starbeamrainbowlabs

6,23810 gold badges49 silver badges79 bronze badges

answered Jan 14, 2013 at 12:05

solenoo

498 bronze badges

1 Comment

user1830285 Over a year ago

I know this. This is why I have asked the question, because i'm not too competent with CSS selectors yet, as its all new to me. I ran into issues with the child UL element inheriting the styles of its parent li, which I have unsuccesfully attempted to override.

Collectives™ on Stack Overflow

HTML / CSS mouse context menu

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related