webspider25 Posted September 26, 2007 Share Posted September 26, 2007 Hi,Below is my code......With the help of the w3schools tutorial I am trying to create the horizontal menu.....to an extend I am successful but problem is that when I am hovering the liks the links are shifting from their places they are cuming doen .I dont know why the are not still on their places.Pls help me in rectifying the code<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>Untitled Document</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style>ul{float:right;width:100%;margin-top:50px;list-style-type:none;padding:0px;}li{display:inline;}a{width:8em;background-color:black;color:red;padding-left:40px;}a:hover{background-color:white;border-top:2px solid white;border-right:2px solid green;border-left:2px solid green;border-bottom:2px solid green;}</style></head><body><ul><li><a href="#">Home</a></li> <li><a href="#">Home</a></li> <li><a href="#">Home</a></li> <li><a href="#">Home</a></li> <li><a href="#">Home</a></li></ul></body></html> Link to comment Share on other sites More sharing options...
S@m Posted September 26, 2007 Share Posted September 26, 2007 It's your borders on the hover. Since you don't have a border on the "a" it is adding them and causing the jump.Try this: <style>ul {float:right;width:100%;margin-top:50px;list-style-type:none;padding:0px;}ul li {display:inline;width:8em;padding-left:40px;}ul li a {background-color:black;color:red;border:2px solid #000;}ul li a:hover{background-color:white;border:2px solid green;border-top:2px solid #fff;}</style> Link to comment Share on other sites More sharing options...
webspider25 Posted September 27, 2007 Author Share Posted September 27, 2007 Hi S@mThanks its working nowByeTake care It's your borders on the hover. Since you don't have a border on the "a" it is adding them and causing the jump.Try this:<style>ul {float:right;width:100%;margin-top:50px;list-style-type:none;padding:0px;}ul li {display:inline;width:8em;padding-left:40px;}ul li a {background-color:black;color:red;border:2px solid #000;}ul li a:hover{background-color:white;border:2px solid green;border-top:2px solid #fff;}</style> Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.