روش های مختلفی برای ایجاد منوی دراپ داون و یا آبشاری در
طراحی وب وجود دارد که در این مقاله یکی از ساده ترین روش ها را آموزش خواهم داد.
ساخت منو Dorp Down افقی توسط Cssاول یک فایل به اسم index.php میسازیم و بعد یک فولدر به اسم css میسازیم و داخل فولدر css فایل style.css را میسازیم .
برای ساختن منوهای drop down توسط css اول در فایل index.php در قسمت کدهای زیر را قرار دهید :
Item 1
Item 2
Sub Item1
Sub Item1
Sub Item1
Item 3
Item 4
Sub Item1
Sub Item1
Sub Item1
Item 5
Item 6
و بعد برای لینک شدن صفحه index.php به صفحه style.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;}
