Solution to adding drop shadows to a Suckerfish-style menu...

Posted by Dan on Feb 28, 2008 @ 5:24 PM

I'm working on a dropdown menu based on the <ul /> tag. The menu can have an unlimited number of children menus and I decided the "suckerfish" method was a very effective method for achieving my menu structure.

One of the problems I ran into was trying to implement a drop shadow layer for the menus. While there are many ways to implement a drop shadow, I thought the most straight forward method was to use a shadow <div /> with the same dimensions of the menu it's shadowing. The problem I ran into is I couldn't properly get the drop shadow to appear below it's anchored menu. It kept wanting to appear above the menu.

In my code I was explicitly setting the <ul /> tag being displayed to have a z-index one higher than the drop shadow, but the drop shadow always remained on top. After tracking the problem for a bit, I realized was that the because of the nested nature of the <ul /> tags, even though I was explicitly defining a z-index, the <ul /> was inheriting from the parent.

The fix was just to move the shadow <div /> as a sibling to the <ul /> it's shadowing. Once I did this I was able to correctly place the shadow <div /> underneath the <ul /> tag it was shadowing.

Categories: JavaScript, HTML/ColdFusion

Comments for this entry have been disabled.