1 <!-- fpc1.
html -->
2 <html>
3 <head>
4 <link rel="stylesheet" type="text/css" href="[Link]" />
5 <link rel="stylesheet" type="text/css" href="[Link]" />
6 <!-- Above link from
7 [Link]
8 -->
9 </head>
10 <body>
11 <div class="headerMenu" id="headerMenuId">
12 <ul>
13 <li><a href="#"><الصفحةالرئيسية/a></li>
14 <li><a href="#"><اﻻخبار والنشاطات/a></li>
15 <li><a href="#"><معرض الصور/a></li>
16 <li><a href="#"><لﻼتصال بنا/a></li>
17 </ul>
18 </div>
19 <br/>
20 <div class="navbar">
21 <a href="#home"><الصفحة الرئيسية/a>
22 <a href="#news"><اﻻخبار والنشاطات/a>
23 <div class="dropdown" >
24 <button class="dropbtn">معرض الصور
25 <i class="fa fa-caret-down"></i>
26 </button>
27 <div class="dropdown-content">
28 <a href="#">Link 1</a>
29 <a href="#">Link 2</a>
30 <a href="#">Link 3</a>
31 </div>
32 </div>
33 </div>
34 <br/>
35 <div class="pc2" >
36 <p id="p1">
37 sdewqdqewdewq
38 </p>
39 <p id="p2" class="pc2">
40 sdsssddddddddddd
41 </p>
42 </div>
43 </body>
44 </html>
45 /////////////////////////////////////////
46 ////////// بداية ملف الـ[Link]//////////////////////
47 //// [Link]
48 body
49 {
50 background-color:#c1403f
51 //background-color:rgb(200,14,70);
52 }
53 #p1
54 {
55 font-size:35pt;
56 }
57 #p2
58 {
59 font-size:50pt;
60 color:black;
61 //margin: 0 0 13 70;
62 }
63 .pc2
64 {color:blue;
65 //border-color:#003;
66 //border-width:7px;
67 //border-style:dotted;
68 //border-style:solid;
69 border:#0fc 7px dotted;
70 //width:700px;
71 //height:240px;
72 margin: 2px 2px 2px 2px;
73 padding: 40px 20px 77px 50px;
74 direction:rtl;
75 border-radius:20px 70px 0px 20px;
76 //text-decoration: none;
77 text-decoration: underline;
78 }
79 #headerMenuId ul li a:hover
80 {
81 background-color:#fc0;
82 color:black;
83 }
84 #headerMenuId ul
85 {
86 list-style-type:none;
87 margin-top:15px;
88 margin-right:-33px;
89 }
90 #headerMenuId ul li
91 {
92 display:inline;
93 //margin-top: 3px;
94 }
95 #headerMenuId ul li a
96 {
97 text-decoration:none;
98 ////margin-top: 5px;
99 padding: 10px 10px 10px 10px;
100 color:#f60;
101 ////font-weight:bold;
102 font-size:20px;
103 border:#a33 solid 1px;
104 border-radius:5px 5px 5px 5px;
105 }
106 .headerMenu
107 {
108 direction:rtl;
109 margin-top: 3px;
110 margin-right:5px;
111 border:#933 1px solid;
112 width:100%;
113 height:55px;
114 background-color:#ffc;
115 }
116 //////////////////////////////////////////////
117 ///// بداية ملف الـCSS لعمل قائمة باستخدام الـbotton////////
118 //// [Link]
119
120 .navbar {
121 direction:rtl;
122 float: right;
123 overflow: hidden;
124 //overflow: scroll;
125 //overflow-x: hidden; /* Disable horizontal scroll */
126 background-color: #333;
127 font-family: Arial, Helvetica, sans-serif;
128 }
129
130 .navbar a {
131 float: right;
132 font-size: 16px;
133 color: white;
134 text-align: center;
135 padding: 14px 16px;
136 text-decoration: none;
137 }
138
139 .dropdown {
140
141 float: right;
142 overflow: hidden;
143 }
144
145 .dropdown .dropbtn {
146 font-size: 16px;
147 border: none;
148 outline: none;
149 color: white;
150 padding: 14px 16px;
151 background-color: inherit;
152 font-family: inherit;
153 margin: 0;
154 }
155
156 .navbar a:hover, .dropdown:hover .dropbtn {
157 background-color: red;
158 }
159
160 .dropdown-content {
161 display: none;
162 position: absolute;
163 background-color: #f9f9f9;
164 min-width: 160px;
165 //box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
166 z-index: 1;
167 }
168
169 .dropdown-content a {
170 float: none;
171 color: black;
172 padding: 12px 16px;
173 text-decoration: none;
174 display: block;
175 text-align: right;
176 }
177
178 .dropdown-content a:hover {
179 background-color: #ddd;
180 }
181
182 .dropdown:hover .dropdown-content {
183 //display: block;
184 display: inline;
185 }
186