________________________________________________________________________________
Click here to go to HTML Page                         Click here to go to Java Script Page

____________________________________________________________________________________

Example : How to create menu & sub-menu in home/web page of a web site using CSS.
<html>
<head>
<meta charset="utf-8">
<title>Menu Design</title>
<style>	
   #menu ul /* 1 */
      { 
	list-style: none;   /* 1.1 */
	padding-top:10px;  /* 2.9 */	
      }	
   #menu ul li     /* 2 */
      {
	background-color: red;  /* 2.1 */
	border: 1px solid white; /* 2.2 */
	width: 120px;/* 2.3 */  width of the button
	height: 35px;/* 2.4 */   height of the button
	text-align: center;/* 2.5 */
	line-height: 35px;/* 2.6 */	
	float: left;/* 2.7 */
        margin-left:10px;/* 2.8 *///to create space between button
	z-index:1000;/* 2.10 optional*/

	position: relative ; /* 6.3 optional* /
      }
   #menu ul li a /* 3 */
      {
	text-decoration: none; /* 3.1 removes underline  */
	color: white; /* 3.2 set the button text color */
	display: block; /* 3.3 whole button becomes hyperlink */
      }
   #menu ul li a:hover /* 4 */
      {
	background-color: green; 	/* 4.1 */
	color:yellow;  /* 4.2 */		
      }	
   *  or  #menu ul li ul         /* ul li ul is used to align submenu with main menu and * is 
                                    used for all used tags having no margin and space*/
      {
	padding: 0px; /* 5.1 */
	margin-left:-10px; /* 5.2  align the menu and sub menu */
	margin: 0px; /* 5.3 */ optional
      }
   #menu ul ul /* 6*/
      {
	display: none; /* 6.1 */ hides the appeared sub menu
	position: absolute /* 6.2 optional*/
	z-index:1000; /* 6.4 */  to appear menu above the created design
      }	
   #menu ul li:hover>ul /* 7 */    to appear sub menu on over effect
      {
	display: block; /* 7.1 */
      }	
   #menu ul li ul li /* 8 *///to increase the width of sub-menu, when required
      {
	Width:160px;/* 8.1 */
      }	
</style>	
</head>

<body>
   <div id="menu">
      <ul>				
	 <li><a href="#">Home</a></li>				
	 <li><a href="#"> User Details</a>
	    <ul>						
		<li><a href="#" target="new_window">Change password</a></li>
		<li><a href="#">Forget password</a></li>
		<li><a href="#">New User Registration</a></li>						
	    </ul>				
	 </li>
	 <li><a href="#"> Contact Us</a></li>
	 <li><a href="#"> FeedBack</a></li>
	 <li><a href="#"> About Us</a></li>
         <li><a href="#"> Report</a></li>				
      </ul>			
   </div>
 </body>
</html>
Example : How to align text vertically in a paragraph/div using CSS.
<html>
    <head>
        <title>Vertical Alignment</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">        
        <style>
            div
            {
                display: flex;
                align-items: center;
                justify-content: center;
                border-color: black;
                border-width: 4px;
            }
        </style>
        
    </head>
    <body>
        <form>                   
           <fieldset style="width: 600px; height: 500px">
               <div style="width: 600px; height: 500px">                
                    Vertically centered text 
               </div>
            </fieldset>                        
        </form>
    </body>
</html>

Loading

Categories: CSS

1 Comment

Gaurav Kumar · April 10, 2020 at 12:09 AM

Mam please make a slider example too…!!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.