Styling a Drop-Down Menu (And the hover effect)

  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

I have one little problem here. I'm trying to get a hover image on a menu to be dynamic. What I mean by this is that the left edge and the right edge would be a "shadow" while the rest would be one ( 1 ) solid color. The problem here though, is that the text would be of different size, so the image needs to be dynamic.

Attachments:
drop_down_menu.png

The drop down menu I'm trying to create.



Anyone have any idea how I can accomplish that? Preferably a CSS solution (I had one before, but I lost it :( [The drop down]).

Any ideas on how I can make that hover to be of dynamic size? Thank you.

My Current Progress

[EDIT] What I got there right now looks perfect in Firefox... looks a little different in IE (The right shadow upon hover)
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

Alright, I got the dynamic links pretty much covered... there's still one bug in it though... MSIE messes up the right side of the hover a little bit. The yellow background covers half of the shadow.

Now what I'm missing is the drop down...
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

I'm really falling flat on my face on this one. I got the Stu Nicholl's example, but I can't seem to style it correctly :banghead:

Please, I need some help here.
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

Where is the bug happening? In MSIE6?
It looks fine in IE7 and IE8 so I'll assume you're having the issue with IE6.

This is because IE6 only understands the ":hover" pseudo-class when it is applied to an "<a>" tag. In your stylesheet you are applying it to an "<li>" tag.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

Im having this bug in ie7. The shadow on the right side is covered a little by the "golden" background. Check the difference between firefox and ie7... The right shadow is smaller in ie7
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

Hmmm, not sure what you're talking about. They seem to be identical between browsers on my computer. Would you mind posting a screenshot? I may be looking in the wrong area.

Post Information

  • Total Posts in this topic: 6 posts
  • Users browsing this forum: No registered users and 45 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.