Table of Contents
hide
________________________________________________________________________________
Click here to go to HTML Page Click here to go to Java Script Page
____________________________________________________________________________________
<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> 
1 Comment
Gaurav Kumar · April 10, 2020 at 12:09 AM
Mam please make a slider example too…!!