ساخت منو Dorp Down افقی توسط Css

اول یک فایل به اسم index.php میسازیم و بعد یک فولدر به اسم css میسازیم و داخل فولدر css فایل style.css را میسازیم .

برای ساختن منوهای drop down توسط css اول در فایل index.php در قسمت <body> <body/> کدهای زیر را قرار دهید :

<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Sub Item1</li>
<li>Sub Item1</li>
<li>Sub Item1</li>
</ul>
</li>
<li>Item 3</li>
<li>Item 4
<ul>
<li>Sub Item1</li>
<li>Sub Item1</li>
<li>Sub Item1</li>
</ul>
</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>

و بعد برای لینک شدن صفحه index.php به صفحه style.css از کد زیر استفاده میکنیم و آنرا قبل از <head/> میگذاریم :

<link href=”css/style.css” rel=”stylesheet” type=”text/css” />

و بعد کدهای زیر را در صفحه style.css میگذاریم نماییم :

@charset “utf-8”;
body,ul,li {
margin: 0px;
padding: 0px;
background-color:#0CF;
}
li {
font-family: verdana;
font-size: 12px;
color: #333;
line-height: 40px;
list-style-type: none;
/* [disabled]list-style-image: url(../images/li.png); */
background-color: #990;
width: 100px;
float: left;
text-align: center;
height: 40px;
margin-left: 2px;
display: block;
}
li ul {
display: none;
}

body ul li ul li {
background-color: #F90;
margin: 0px;
padding: 0px;
}

li:hover{
background-color:#CC0;
cursor:pointer;}
li:hover>ul{
display:block;}

تصویر منو به شکل زیر میباشد :

منو آبشاری css

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

این قسمت نباید خالی باشد
این قسمت نباید خالی باشد
لطفاً یک نشانی ایمیل معتبر بنویسید.

Call Now Buttonمشاوره رایگان