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="#" class="highlight"><span>Home</span></a></li>
<li><a href="#"><span>Lorem</span></a></li>
<li><a href="#"><span>Ipsum</span></a></li>
<li><a href="#"><span>Dolor</span></a></li>
<li><a href="#"><span>Sit Amet</span></a></li>
</ul>


Step 3: Use these images








Comments

Post a Comment

Popular posts from this blog

BOXED WIDTH ANIMATION

Step 1: Insert the following css code in the <HEAD> section of your page <style type="text/css"> body { background:#000; overflow:hidden; margin:0; padding:0; } .container { width:1000px; height:500px; margin:5% auto 0; padding:20px; background:#CCC; } .left-panel { background:#319400; width:780px; height:500px; float:left; margin:0 20px 0 0; padding:0; text-align:center; position:relative; transition-property: background; transition-duration: 1s; transition-timing-function: linear; } .left-panel:hover { background: #ff7b29; } .right-panel-visible { background:#0065e2; width:200px; height:500px; float:left; margin:0; padding:0; } .right-panel-hidden { background:#00a27a; width:475px; height:500px; float:left; margin:0; padd...
Read more

CSS DROP DOWN MENU

CSS DROP DOWN MENU Step 1: Insert the following code in the <HEAD> section of your page <style> .top_menu{ border:none; border:0px; margin:0; padding:0px; font-family:Arial, Helvetica, sans-serif; font-size:14px; font-weight:bold; width:100%; } .top_menu ul{ background:#333333; height:35px; list-style:none; margin:0; padding:0; width:66%; -webkit-box-shadow: 0px 0px 3px 0px #000000; box-shadow: 0px 0px 3px 0px #000000; } .top_menu li{ float:left; padding:0px; } .top_menu li a{ border-left:#999 1px solid; color:#cccccc; display:block; font-weight:normal; line-height:35px; margin:0px; padding:0px 25px; text-align:center; text-decoration:none; } .top_menu li a:hover, .top_menu ul li:hover a{ background: #2580a2 ; color:#FFFFFF; text-decoration:none; } .top_menu li ul{ background:#333333; display:none; height:auto; padding:0px; margin:0px; border:0px; po...
Read more