Menu With Rounded Corners In CSS
Step 1: Insert the following code in the <HEAD> section of your page <style type="text/css"> #menu { float: left; padding: 0px 10px; margin: 0px; border-bottom: 5px solid #05480a; } #menu li { display: inline; list-style: none; margin: 0px; padding: 0px; } #menu li a { float: left; color: #000000; text-decoration: none; background: url('menuleft.gif') top left no-repeat; margin: 0px 1px; padding: 9px 0px 6px 10px; } #menu li a span { background: url('menuright.gif') top right no-repeat; padding: 9px 25px 6px 15px; } #menu li a:hover, #menu li a.highlight { background: url('menuleft-hl.gif') top left no-repeat; color: #ffffff; } #menu li a:hover span, #menu li a.highlight span { background: url('menuright-hl.gif') top right no-repeat; } </style> Step 2: Insert the below sample code into the <BODY> section of your page: <ul id="menu"> <li><a href=...