In the above image navigation bar have round corners and also have hover effect.that is called mouse hover effect,in that color is change.below is the code of navigation bar with round corner.
roundnav.html
<html>
<head>
<style type="text/css">
ul#nav li
{
border-radius:15px;
float:left;
overflow:hidden;
}
ul#nav li a
{
text-decoration:none;
padding:15px 0;
width:200px;
background-color:white;
color:black;
float:left;
text-align:center;
background-color:gray;
}
ul#nav li a:hover
{
background-color:red;
color:white;
}
</style>
<body>
<ul id="nav">
<li><a href="https://webcoderscode.blogspot.com/">HOME</a></li>
<li><a href="https://webcoderscode.blogspot.com/">ABOUT US</a></li>
<li><a href="https://webcoderscode.blogspot.com/">PHOTO</a></li>
<li><a href="https://webcoderscode.blogspot.com/">MENU</a></li>
<li><a href="https://webcoderscode.blogspot.com/">CONTACT US</a></li>
</ul>
</body>
</head>
</html>
Thanks bro
ReplyDelete