-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcss2.html
145 lines (129 loc) · 3.32 KB
/
css2.html
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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<style>
.menubar
{
margin:0px;
padding:0px;
}
.menubar li
{
list-style-type:none;
}
.menubar>li
{
display:block;
float:left;
border-bottom:1px solid black;
}
.menubar>li>a:link,.menubar>li>a:visited
{
padding:0px 20px;
height:37px;
color:black;
margin:2px;
text-decoration:none;
background-color:#cfcfcf;
font:italic 18px "Georgia";
}
.menubar>li>a:first-child
{
margin-left:0px;
}
.menubar>li>a:hover
{
background-color:white;
}
.menubar ul
{
display:none;
}
li:hover>a:link,li:hover>a:visited
{
background-color:white;
}
li:hover
{
border:1px solid #6d6d6d;
border-bottom:none;
}
li:hover ul
{
margin-top:1px;
position:absolute;
display:block;
border:1px solid #6d6d6d;
border-top:none;
width:200px;
padding:10px;
background-color:white;
}
li:hover ul#last
{
margin-left:-87px;
}
li:hover>a
{
width:inherit;
}
li:hover>ul>li>a:link,li:hover>ul>li>a:visited
{
display:block;
font:italic 14px "Georgia",arial,sans-serif;
font-color:black;
text-decoration:none;
padding:5px 0px;
border-bottom:2px solid #cfcfcf;
color:black;
}
li:hover>ul>li>a:hover
{
color:#bd0707;
}
li:hover>ul>li>a.nb:link,li:hover>ul>li>a.nb:visited
{
border-bottom:none;
}
</style>
</head>
<body>
<ul class="menubar">
<li class="item"><a class="l1" href="#home" >Home</a><ul>
<li><a href="#home1">Example Link1</a></li>
<li><a href="#home1">Example Link1</a></li>
<li><a href="#home1">Example Link1</a></li>
<li><a class="nb" href="#home1">Example Link1</a></li>
</ul></li>
<li class="item"><a class="l1" href="#about" >About Us</a><ul>
<li><a href="#home1">Example Link1</a></li>
<li><a href="#home1">Example Link1</a></li>
<li><a href="#home1">Example Link1</a></li>
<li><a class="nb" href="#home1">Example Link1</a></li>
</ul></li>
<li class="item"><a class="l1" href="#service" >Our Services</a><ul>
<li><a href="#home1">Example Link1</a></li>
<li><a href="#home1">Example Link1</a></li>
<li><a href="#home1">Example Link1</a></li>
<li><a class="nb" href="#home1">Example Link1</a></li>
</ul></li>
<li class="item"><a class="l1" href="#port" >Our Portfolio</a><ul>
<li><a href="#home1">Example Link1</a></li>
<li><a href="#home1">Example Link1</a></li>
<li><a href="#home1">Example Link1</a></li>
<li><a class="nb" href="#home1">Example Link1</a></li>
</ul></li>
<li class="item"><a class="l1" href="#contact" >Contact Us</a><ul id="last">
<li><a href="#home1">Example Link1</a></li>
<li><a href="#home1">Example Link1</a></li>
<li><a href="#home1">Example Link1</a></li>
<li><a class="nb" href="#home1">Example Link1</a></li>
</ul></li>
</ul>
</body>
</html>