Questions on CSS Output from Multilevel Dropdown Generator

[recce101]

Kudos to the author(s) of the Multilevel Dropdown Menu CSS Generator!

I’m not using WordPress or any of the plugins.

Since my knowledge of CSS is rather limited, I had some initial frustration trying to modify the Red Dazzle template to produce specific widths for the top-items and sub-items and have everything line up properly. I finally succeeded with a simple test file today, posted at:

http://wvpress.com/test/sftest03.html

I added a good number of comments to the CSS for the day I forget which properties control the various font colors, background colors, widths, etc. (see the view source window) and came up with a couple of questions:

1. Under the "#suckerfishnav li li a" selector, what does the "color" property control? The four font colors (topitem normal and hover, subitem normal and hover) are all accounted for in the other selectors, and changing the mystery property to lime does not produce anything lime in the display (I tried IE 7.0 and Firefox 3.6). Is this property for some other browser?

2. Likewise, what is the purpose of the "font-weight: normal" property under the "#suckerfishnav ul" selector? Font weight seems to be adequately controlled under the "#suckerfishnav" selector for top-items and the "#suckerfishnav li li" selector for sub-items. Is this to accommodate a specific browser?

Thanks for maintaining this forum. It’s much appreciated!

Ned

[imported_Ryan]

"recce101" wrote:

Kudos to the author(s) of the Multilevel Dropdown Menu CSS Generator!

Thanks ” title=”Smiley” />

"recce101" wrote:

I’m not using WordPress or any of the plugins.

Awesome ” title=”Smiley” /> It’s always nice to hear from someone who’s diving in and writing something themselves.

"recce101" wrote:

1. Under the "#suckerfishnav li li a" selector, what does the "color" property control?

The text colour of the dropdowns. If it were #suckerfishnav li a, it would be the colour of the top level menu item text.

"recce101" wrote:

The four font colors (topitem normal and hover, subitem normal and hover) are all accounted for in the other selectors, and changing the mystery property to lime does not produce anything lime in the display (I tried IE 7.0 and Firefox 3.6). Is this property for some other browser?

It should. There’s possibly a clash with your sites CSS causing that.

"recce101" wrote:

2. Likewise, what is the purpose of the "font-weight: normal" property under the "#suckerfishnav ul" selector? Font weight seems to be adequately controlled under the "#suckerfishnav" selector for top-items and the "#suckerfishnav li li" selector for sub-items. Is this to accommodate a specific browser?

"#suckerfishnav ul" refers to the dropdown "#suckerfishnav" refers to the entire menu, so if you want different font weights for both, then you need to override "#suckerfishnav" with "#suckerfishnav ul" for the dropdown. The CSS generator doesn’t detect when they’re doubled up, so even if the top level includes the correct font weight, it still gets included twice. This is also useful for when integrating with code which for whatever reason is included in the site already and which applies different font weights to differing levels of unordered lists, so adding the double up intentionally can reduce the chance of that clash causing problems. In most cases it isn’t necessary, but to reduce confusion I’ve kept the code in there (and it makes the programming side of the CSS generator simpler for me).

I rebuilt some of the CSS generator the other day and have cleaned up the CSS a little to make it easier to use. I’m also building an AJAX based system so that the changes are loaded mega quick and which will give you the ability to save your designs for later use.

My project for tonight was to build in a "back" button, so you can revert changes you made, but I got distracted by TV ” title=”Smiley” />

I’m not sure when this new version will be ready for launch, but I’m hoping sooner rather than later, hopefully within the next four weeks, but I tend to miss such targets whenever I make them!

[recce101]

Thanks, Ryan. I now understand the reason for the seemingly redundant font weight for the dropdown items. But to expand on the font color issue, according to my tests the various colors are controlled under these selectors:

Top level normal — #suckerfishnav a

Top level hover — … li:hover a, li.sfhover a

Dropdown normal — … li:hover li a, li li:hover li a, li li li:hover li a, etc.

Dropdown hover — … li ul li:hover a, li ul li li:hover a, li ul li li li:hover a, etc.

But the … li li a selector’s color property, which you say "should" control the dropdown font color, doesn’t seem to do anything, even if I disable the property (see above) that DOES control it for me. This is true both on the Web and within my HomeSite program. Another of life’s unsolved mysteries? Aloha,

Ned

[Author]

Posts