Simple Horizontal CSS Menus







 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.
    Blogger Comment
    Facebook Comment

0 comments:

Post a Comment