Raz Programming school

How to create a responsive hoverable dropdown menu in html and css. We will create a simple dropdown menu with html and css . When we move a mouse arrow on the button it will show  the menu. It is very easy Here is the Drop down menu Here is the source code:  <! DOCTYPE   html > < html > < head > < style > .dropbtn  {      background-color : #48d1cc;      color : white;      padding :  16px ;      font-size :  16px ;      border : none;      cursor : pointer; } .dropdown  {      position : relative;      display : inline-block; } .dropdown-content  {      display : none;      position : absolute;      background-color : #f9f9f9;      min-width :  160px ;      box-shadow :  0px   8px   16px   0px     rgba( 0 , 0 , 0 , 0.2 ); } .dropdown-content   a  {      color : black;      padding :  12px   16px ;      text-decoration : none;      display : block; } .dropdown-content a:hover { background-color :#f1f1f1} .dropdown:hover   .dropdown-content  {      display : blo

We will create a responsive table using HTML and CSS. We are going to create a responsive table with html and css. it will show the price in a responsive with the sing up button. Here is the table: The source code: <! DOCTYPE   html > < html > < head > < meta   name = "viewport"   content = "width= device-width, initial-scale=1.0" > < style > *  {      box-sizing : border-box; } .columns  {      float : left;      width :  33.3% ;      padding :  8px ; } .price  {      list-style-type : none;      border :  1px  solid #eee;      margin :  0 ;      padding :  0 ;      -webkit-transition :  0.3s ;      transition :  0.3s ; } .price:hover  {      box-shadow :  0   8px   12px   0     rgba( 0 , 0 , 0 , 0.2 ) } .price   .header  {      background-color : #111;      color : white;      font-size :  25px ; } .price   li  {      border-bottom :  1px  solid #eee;      padding :  20px ;      text-align : center; } .price   .grey  {      background