1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <html> <head> <style type="text/css"> .top_hmenu_ul { float:left; width:100%; padding:0; margin:0; list-style-type:none; } .top_hmenu_a { float:left; width:6em; text-decoration:none; color:black; background-color:#ECE9D8; padding:0.1em 0.5em; border-right:1px solid white; text-align:center; } .top_hmenu_a:hover {background-color:#C0C0C0;} .top_hmenu_li {display:inline;} </style> </head> <body> <ul class="top_hmenu_ul"> <li class="top_hmenu_li"><a class="top_hmenu_a" href="#">Link one</a></li> <li class="top_hmenu_li"><a class="top_hmenu_a" href="#">Link two</a></li> <li class="top_hmenu_li"><a class="top_hmenu_a" href="#">Link three</a></li> <li class="top_hmenu_li"><a class="top_hmenu_a" href="#">Link four</a></li> </ul> <br> <p> This is a simple Horizontal CSS. </p> </body> </html> |
This is a simple Horizontal CSS Menu consist of three objects <ul>, <li> and <a>
by using css we can change their properties, so we let the ul element and the a element float to the left.
to make all list be in same line we use displayed:inline
to change the background color of any hyperlink we use
:hover{background-color:#C0C0C0;}
If this post was good and helpful for you, Please give it Like.
.
0 comments:
Post a Comment