Support » Themes and Templates » Canvas Theme – Drop Down Menu

  • Resolved rapportdesign


    I’m in need of help styling a drop down menu in the Canvas Theme.

    I’ve copied the code from…
    I’ve pasted it into custom.css of the Canvas Theme and the changes to the styles that I’ve made seem to have no effect.

    Ideally, I want the drop down container to have a white background, with a slight transparency, which I’ve managed to achieve, by adding the following code…

    .sub-menu #navigation ul.nav > li a:hover, #navigation ul.nav > li:hover, #navigation ul.nav li ul {
      background-color: rgba(255, 255, 255, 0.8) !important;

    I would also like plain grey text, with a red text rollover.

    I hoped that the following code would at least change the text color…

    ul.sub-menu li a {

    I don’t want the red striped background that appears for the parent items.

    I’ve also noticed that the background of the parent item disappears, when hovering over a child.

    Any help with this would be greatly appreciated!

Viewing 7 replies - 1 through 7 (of 7 total)
  • Moderator Andrew Nevins


    Front-end developer

    Have you tried contacting the theme’s vendors?

    Sorry, I thought this was the place to do that.

    I’ve located the correct place to ask my question now.


    I’ve managed to sort most of these issues out, but I’m really struggling to make the child links (normal state) grey without making the parent links (normal state) grey as well.

    I want the parent links (normal state) to remain white.

    Please can anyone help me with this?

    I don’t believe this is theme related.

    Moderator Andrew Nevins


    Front-end developer

    Try applying the CSS to the <ul> within the <ul>.

    ul ul li a {
     color: #000;

    Thanks for your input… I tried your suggestion applied against id main-nav, but it didn’t help…

    #main-nav ul ul li a {
      color: #4E4E4E !important;

    I’m currently using the following CSS, of which most the styles are being applied…

    #main-nav li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
    	color:#4E4E4E !important;
    	background-image:none !important;

    The color just does’t take effect and I thought !important meant that the style would override any conflicts, especially when appearing after any other potentially conflicting styles.

    I’ve even tried applying it to a particular menu id, but nothing seems to work.

    I’ve located the following code in Firebug and changing this to grey works, but also changes the parent (normal state) color…

    #navigation ul.nav > li a:hover, #navigation ul.nav > li:hover a, #navigation ul.nav li ul li a {
      color: #FFFFFF !important;

    I therefore tried…

    #navigation ul.nav li ul li a {
      color: #4E4E4E !important;

    This doesn’t make any changes.

    Moderator Andrew Nevins


    Front-end developer


    #navigation ul.nav > li:hover ul a {
    color: #4e4e4e !important;

    Make sure you remove styling that serves no purpose.

    Thank you very much!

    That worked a treat… I had to re-apply my hover state CSS, but it’s all sorted now.

    I realise I have a ton of unnecessary menu css in there at the mo and will begin the tidy up.

    Thanks again!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Canvas Theme – Drop Down Menu’ is closed to new replies.