আসসালামু আলাইকুম।
টেকটিউন্সে আমার সর্বপ্রথম টিউন পোস্ট করলাম।
ভুল হলে ক্ষমার দৃষ্টিতে দেখবেন 🙂

আসুন তাহলে দেখা যাক কিভাবে CSS Drop Menu তৈরি করবেন।
১. প্রথমে নিচের CSS কোডগুলো কপি করে </style> ট্যাগের আগে পেস্ট করুন।

ul
{

font-family
:

Arial,

Verdana
;

font-size
:

14px
;

margin
:

0
;

padding
:

0
;

list-style
:

none
;
}
ul li
{

display
:

block
;

position
:

relative
;

float
:

left
;
}
li ul
{

display
:

none
;
}
ul li a
{

display
:

block
;

text-decoration
:

none
;

color
:

#ffffff
;

border-top
:

1px

solid

#ffffff
;

padding
:

5px

15px

5px

15px
;

background
:

#1e7c9a
;

margin-left
:

1px
;

white-space
:

nowrap
;
}
ul li a:hover
{
background
:

#3b3b3b
;
}
li:hover ul
{

display
:

block
;

position
:

absolute
;
}
li:hover li
{

float
:

none
;

font-size
:

11px
;
}
li:hover a
{

background
:

#3b3b3b
;

}
li:hover li a:hover
{

২। এবার HTML কোডগুলো </body> এর আগে পেস্ট করুন।

<ul
id
=
"menu"
>

<li>
<a
href
=
"#"
>
Home
</a>
</li>

<li>
<a
href
=
"#"
>
About Us
</a>

<ul>

<li>
<a
href
=
"#"
>
The Team
</a>
</li>

<li>
<a
href
=
"#"
>
History
</a>
</li>

<li>
<a
href
=
"#"
>
Vision
</a>
</li>

</ul>

</li>

<li>
<a
href
=
"#"
>
Products
</a>

<ul>

<li>
<a
href
=
"#"
>
Cozy Couch
</a>
</li>

<li>
<a
href
=
"#"
>
Great Table
</a>
</li>

<li>
<a
href
=
"#"
>
Small Chair
</a>
</li>

<li>
<a
href
=
"#"
>
Shiny Shelf
</a>
</li>

<li>
<a
href
=
"#"
>
Invisible Nothing
</a>
</li>

</ul>

</li>

<li>
<a
href
=
"#"
>
Contact
</a>

<ul>

<li>
<a
href
=
"#"
>
Online
</a>
</li>

<li>
<a
href
=
"#"
>
Right Here
</a>
</li>

<li>
<a
href
=
"#"
>
Somewhere Else
</a>
</li>

</ul>

</li>
</ul>

ধন্যবাদ সবাইকে। 🙂

p