Welcome All,

CSS stands for Cascading Style Sheet. CSS is a style sheet language used for describing the presentation of web pages.

Let see the How to implement the shortest and simplest way to create drop-down menu in step by step :-

First of all we have to create List in Html page and There are three different types of list in HTML:

  • Unordered lists — A list of items, where every list items are marked with bullets.
  • Ordered lists — A list of items, where each list items are marked with numbers.
  • Definition list — A list of items, with a description of each item.

So we are using here Unordered list to make drop-down menu but we can use many way to create drop-down menu so first of all we see that how to create un-ordered list. we take <ul> tag and make many <li> tag in the ul elements. for Example :-

// how to create unordered list and there has been created list under the list

<ul>
      <li><a href=”#”>Home</a><li>
      <li><a href=”#”>Course</a>
      <ul>
            <li><a href=”#”>Home</a><li>
            <li><a href=”#”>Course</a><li>
            <li><a href=”#”>Home</a><li>
            <li><a href=”#”>Contact</a><li>
      </ul>
      <li>
      <li><a href=”#”>Home</a><li>
      <li><a href=”#”>Contact</a><li>
</ul>

That is the part of Html so we have done html work to create drop-down menu because we need only orderedlist or unordered list to make menu and to make sub menus that’s why I m creating child list under the unorderlist.

We have created list under the list to feel like drop down menu but there is the problem that we did not perform any kind of css so it will not looking as you hope so first of all we have to perform CSs.

 

Now we have to focus only on Css to part. Now we will see how to work with the Css. First of all If you want to make drop-down menu then you have to known about basics part of Css. And I have also mention basic parts to learn basic part of css that is more helpfull to you. Let see :-

What is Selector :-

Selector are the most important aspects in Css as they are used to select elements in the web page so there can be design and style of that elements. We we have requirement to select of any kind the element who is single , inner element, line element, element or universal element then we perform like this example :-

 

That was the basic part of css where I did tell you that what is the basics part of the css and now we will focus to make design or style of the html part so we will use <style> element to design page.  lets go for that :-

 

Step to make Drop-Down menu

1 First we take <ul> part and give margin or padding 0px to set the position of the list

 

2. Second step to take the <li> part that is list ( home, course, contact or about ). we set background-colour but its colour hold all the blocks that’s why we set width will set according to your choice. and set height 30px to take difference between list. but its shows on vertical list. There will be your choice that what you what you want vertical or horizontal. If you want vertical to left as well as but if you want to horizontal then you have to mention float left. Line-height is use to the show text in the centre of that block but its value is equals to the height. and border is use to give individual block to fell like menu of all list. use text-align properties to adjust text.

 

 

3. In the third step we design to the <a> tag. colour tag is use for the change colour of the of the text. and it <a> tag that’s why It shows underline under the text but I don’t then I use text-decoration none.

 

4. If we want to make style when we hover the menu the  we want to change the colour of text then set background colour as you like but you want to change block colour then mention display : block on ul li a { display : block } tag.

 

Here Our menu will be ready but we want to drop-down list so we have to flow some codes :-

 

Now our Drop-Down Menus are ready. now you can use easily way So, Thanks for reading and don’t forget to tell your experience with me. Thanks again to all of you.