Hiya guys. Saw this Magnolia site. When you hover the mouse on the menu it has an "aqua colour" background.

 

 

Is the rounded corner purely css with no image used? Anyone is kind enough to share the code? I tried for hours and nothing seems to work

try this http://greengeckodesign.com/menumatic

 

This uses css and jquery.

 

You can create the rounded edges using CSS3 i think, like: -

 

background-color:#fff ;

-moz-border-radius: 7px;

-webkit-border-radius: 7px;

 

But you would have to cater to older browsers that do not support this IE6 and 7.

Hi mate - I might be wrong but this might be the css code but i'm sure someone else probably knows better.

 

#nav-global li a:hover,
#nav-global li a:active,
#nav-global li a:focus {
   border-radius: 5px;
   -moz-border-radius: 5px; 
   -webkit-border-radius: 5px; 
   background: #7fcde4;
   color: #fff;

Actually just checked the code and it does work. No images used just css! Hope that helps,

 

J

try this http://greengeckodesign.com/menumatic

 

 

I think the link you provided requires mootools of some sort. It also discusses drop down menus.Both of which is just beyond my current knowledge of html and css.

 

 

You can create the rounded edges using CSS3 i think, like:

background-color:#fff ;

-moz-border-radius: 7px;

-webkit-border-radius: 7px;

 

But you would have to cater to older browsers that do not support this IE6 and 7.

 

All I wanted is just make the hovered menu link to have a round edge background. It doesn't contain any drop down of any sort.

 

Would appreciate if you can kindly expand the code you provided above. My head just couldn't make it to work and am struggling for a couple of days to figure it out.

Hi mate - I might be wrong but this might be the css code but i'm sure someone else probably knows better.

 

#nav-global li a:hover,
#nav-global li a:active,
#nav-global li a:focus {
   border-radius: 5px;
   -moz-border-radius: 5px; 
   -webkit-border-radius: 5px; 
   background: #7fcde4;
   color: #fff;

 

Cheers mate. I shall try it now and see if it works. I'll let you know either way.

the code i quoted was copy & pasted from the source code of the site you linked too so you will need to just copy the following into your a:hover{}

 

{
   border-radius: 5px;
   -moz-border-radius: 5px; 
   -webkit-border-radius: 5px; 
   background: #7fcde4;
   color: #fff;