Help in CSS menu, please?

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:

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


margin:50px 0;



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

_visibility: hidden; /*IE6 rule*/



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{ /*style of LI that gets dynamically added to menu to create background effect*/

position: absolute;

width: 0;

color: #606;


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

1 Answer

  • 9 years ago

    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):

    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
Still have questions? Get your answers by asking now.