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.
Comments for this entry have been disabled.