Jump to content

Horizontal Menu


webspider25
 Share

Recommended Posts

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

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

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...