webyep submenu background colours

Hi
First of all I LOVE Max’s WebYep actions suite and use it all the time. But there’s something i can’y figure out… Although it is said that webYep menus are not intended as main navigation menus I have much success using it as such. However I can not work out one matter (which is probably part of the fact that I am still learning css menu list styles.
What I want is the have a vertical menu with some items holding submenus. When the submenus appear I want the background colour (or image) to be different to the main items background image or color.
Here is the css for my menu:

#MyMenu { font-family:Verdana, sans-serif; font-size:14px; line-height:100%; } #MyMenu a { display: block; font-weight:normal; padding:8px 45px 8px 30px; border-color:#FFFFFF; border-width:1px; border-style:solid; } #MyMenu a.WebYepMenuFirstItem { border-top:#603813 1px solid; } #MyMenu li li a.WebYepMenuFirstItem { border-top:#603813 1px solid; } #MyMenu li li a { padding:3px 30px 3px 55px; font-size:0.8em; } #MyMenu a.WebYepMenuTitle { padding:5px 10px 5px 25px; background-image: url(Resources/submenuarrow.gif); background-repeat:no-repeat; background-position:right 100%; list-style-image: none; } #MyMenu a.WebYepMenuTitleExpanded { background-image:none; list-style-image:none; } #MyMenu a:link, #MyMenu a:visited, #MyMenu a:active { color:#FFFFFF; background-color:#C69C6D; text-decoration:none; } #MyMenu a.WebYepMenuCurrentItem { color:#FFFFFF; background-color:#330000; text-decoration:none; } #MyMenu a:hover.WebYepMenuCurrentItem { color:#FFFFFF; background-color:#C69C6D; text-decoration:none; } #MyMenu a:hover { color:#EDEDE1; background-color:#996633; text-decoration:none; } #MyMenu ul { margin:0px; padding:0px; list-style-type:none ; } #MyMenu li { margin:0px; padding:0px; display:inline ; }
I have tried everything I can think of. What seems to happen is that if I add a style to the line which I think (?) styles the submenu item, I change this:

#MyMenu li li a { padding:3px 30px 3px 55px; font-size:0.8em; } to this:

#MyMenu li li a { padding:3px 30px 3px 55px; font-size:0.8em; background-color: #C0C0C0; }

However all that happens is that the colour of all the item backgrounds changes. It must be something about how the nested lists are structured but I am stil learning!

Can anyone advise me?


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Try changing this line instead;

#MyMenu li li a.WebYepMenuFirstItem { border-top:#603813 1px solid; background-color: #C0C0C0 }


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hey Chuckamuck-fantastic. It worked! However things are still not working as needed.
Now only the first item in the drop down expanded menu items changes colour… Somehow the main colour (#C69C6D) is being used by both the main menu items and the other expanded menu items.
Look forward to hearing people’s thoughts!


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

It doesn’t appear that the sub menus have a link style set so you would have to add some styling. Try adding this;

#MyMenu li li a:link, #MyMenu li li a:visited, #MyMenu li li a:active { color:#FFFFFF; background-color:#C0C0C0; text-decoration:none; }


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Chuckamuck
Thank you. Works fine. I greatly appreciate your help here, and I am trying to learn css menu (and other) styling. It really is another language however! Your assistance is very much appreciated.


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

It occurs to me that the books I have on CSS seem to skate over the more complex issues surrounding the creation of this sort of menu. They cover the tags like

    ,
    • stuff etc, but when we get into code like this: #MyMenu li li a:link, #MyMenu li li a:visited, #MyMenu li li a:active { color:#FFFFFF; background-color:#C0C0C0; text-decoration:none; } then things are getting more complex. I’ll Google it but anyone know of any good teaching resources?


      dynamo mailing list
      email@hidden
      Update your subscriptions at:
      http://freewaytalk.net/person/options

Er don’t know why that post rendered so ugly and weird. Sorry. I’d repost it but it keeps doing it.


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

rendered so ugly and weird

Because if you post raw HTML up here then it gets interpreted - or tries to be.

If you want to show code then use the 4 Tilde approach but they have to be on a separate line from the code. Ie a return after the tildes and another after the code and another after the final tildes

David


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Dave
OK-I used the syntax earlier and it worked. But will do as you advise. Thanks for taking the trouble to educate me :wink:
On 17 Feb 2011, at 19:25, DeltaDave wrote:

rendered so ugly and weird

Because if you post raw HTML up here then it gets interpreted - or tries to be.

If you want to show code then use the 4 Tilde approach but they have to be on a separate line from the code. Ie a return after the tildes and another after the code and another after the final tildes

David


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Martin

I did realise that you were using it and I hope you didn’t think I was being patronising.

Just pointing out the fact that you need those Returns in there to get it to work.

D


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Dave
No I did not think that-it never even crossed my mind, but thank you for the courtesy nonetheless.
As someone who has come into web design comparatively later in life (I’m 52) I have quite a steep learning curve at times. I never cease to be amazed at the astonishing helpfulness amongst Freeway users particularly, and those are the things I do notice.
Feel free to tell me anything else you ever notice me missing! I am an apt student :wink:

Martin
On 17 Feb 2011, at 19:52, DeltaDave wrote:

Hi Martin

I did realise that you were using it and I hope you didn’t think I was being patronising.

Just pointing out the fact that you need those Returns in there to get it to work.

D


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

The FW learning curve is as steep as you want it to be.

Stick to the simple no code stuff and there is no curve. But if you want to push FW then you can do that too - and that’s when you need the crampons.

What you have found using WebYep is that to get the most from it you do need to extend your knowledge into a greater understanding of CSS and HTML structure - and that is good and will pay dividends in the long run.

Unfortunately/fortunately the Web is ever evolving and so there will always be more to learn and steeper hills to climb.

In the meantime I am grateful that we have such a great resource here at FWT.

D


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Dave
Couldn’t agree more. I often create a site as far as possible in Freeway then make hand-coded or Dreamweaver-based adjustments. Nonetheless Freeway is my ‘weapon of choice’.
I have also recently discovered Eazydraw-a rather naff sounding name for a very powerful application-I never really got on with Intaglio-Eazydraw is very ‘Mac’ in feel and whilst not about to take over from Illustrator it is fast and powerful-rather like Freeway.

Cheers for all your assistance (and please always tell me anything you think I am missing-I won’t take it the wrong way! :wink:

Martin

On 17 Feb 2011, at 21:00, DeltaDave wrote:

The FW learning curve is as steep as you want it to be.

Stick to the simple no code stuff and there is no curve. But if you want to push FW then you can do that too - and that’s when you need the crampons.

What you have found using WebYep is that to get the most from it you do need to extend your knowledge into a greater understanding of CSS and HTML structure - and that is good and will pay dividends in the long run.

Unfortunately/fortunately the Web is ever evolving and so there will always be more to learn and steeper hills to climb.

In the meantime I am grateful that we have such a great resource here at FWT.

D


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options