Help in CSS menu, please?

Question

I have a problem that I've been trying to solve for 3 hours

I'm doing a menu and I want the hover to be a rounded rectangle and it doesn't want to

I want it to be something like this: http://www.dynamicdrive.com/dynamicindex1/gooeymen...

the first one

I copied the css, js, and html but it doesn't want to be rectangular

Here's the css: but I did images other than the ones on the site

hr{

margin:50px 0;

color:#eee;

}

ul li.active{ /*IE6 hack- hide gooey effect from that browser*/

_visibility: hidden; /*IE6 rule*/

}

ul.gelbuttonmenu{

position: relative;

margin-bottom: 1em;

text-align: center;

//set value to "left", "center", or "right"*/

; margin-top: 0;

margin-right: 0;

margin-left: 0;

padding: 0;

}

ul.gelbuttonmenu li{

display: inline;

}

ul.gelbuttonmenu li a{

color: #FFF;

font-weight: normal; /*make sure padding is sufficient that the height of the link is enough to fully show the gel button*/

margin-right: 3px; /*spacing between each menu link*/

text-decoration: none;

font-family: "Myriad Pro";

font-size: 15px;

padding-top: 5px;

padding-right: 5px;

padding-bottom: 5px;

padding-left: 5px;

}

ul.gelbuttonmenu li.active{ /*style of LI that gets dynamically added to menu to create background effect*/

position: absolute;

width: 0;

color: #606;

background:#FFF;

background: url(../buttonleft.png) top left no-repeat, url(../buttonright.png) top right no-repeat, url(../buttoncentre.png) top center repeat-x;

}

I want to know what is wrong, why doesn't the hover want to be a rounded rectangle

Please help

Answer 1

Rounded element corners is pretty simple in CSS. You just use variations of "border-radius".

I have drafted a basic template, complete with source code, comments on any code that may require further explanation or instruction, and a live example for you here (click "Run" if it doesn't load): http://jsfiddle.net/MythOfEchelon/uwVXu/1/

I'm not sure what to make of your current CSS, as I can't see how you're implimenting it in your HTML. Using border-radius should work, though.

If you have any more questions, feel free to contact me on Twitter: @mythofechelon

Source(s): Web Developer