Hello there, I'm new to your forum and actually have a question on a rounded corner menu I'm working on. I am currently building a website and have problems with finishing off the right and left ends as rounded corners. I have the following css and html structure:
.styletwo ul{position:relative; margin:8px 4px 8px 4px;} .styletwo ul li{display:block;float:left;margin:50 10px 20 30;} .styletwo ul li a{display:block;float:left;color:#000;text-decoration:none;padding:1px 5px 0px 15px ;height:28px;} /* to remove default sel*/#styletwo ul li a:hover{color:#fff;background:transparent url(YOKOweb/smallmenu_mouseover_68x32-px.gif) repeat-x;margin-top:-7px; } #styletwo ul li a:hover .start{color:#fff;background:transparent url(YOKOweb/left_corner_menu_72x32-px.gif) repeat-x;margin-top:-7px;} /*my try at left corner #styletwo ul li a:hover .just {color:#fff;background:transparent url(YOKOweb/right_corner_menu_72x32-px.gif) repeat-x;margin-top:-7px;}/*my try at right corner
I set one image to the entire length of the menu as you can see: menu_660x32-px.gif My problem is how to get the hover effect for the right and left end rounded corners for this menu with my images for left and right ends. I keep getting the same rectangle images for other menu pieces and not the rounded corner images. I've tried different things but have not been able to get it right. I would really be grateful for assistance in solving this