We can apply CSS styles on the menus in the html Web page. Now create a Web page named verticalMenu.html to apply CSS style on menu.
<!doctype html>
<head>
<title>Working with changing the appearance of vertical menu</title>
<style type="text/css">
.vmenu{
list-style-type:none;
margin:0;
padding:0;
width:180px;
}
vmenu li{
background:#333 no-repeat right top;
font:bold 13px "Lucida Grande", "Trebuchect MS", Verdana;
display:block;
color:white;
width:auto;
padding:5px 0;
text-indent:8px;
text-decoration:none;
border-bottom:1px solid black;
width:180px;
}
.vmenu li{
background:#333 no-repeat right top;
font:bold 13px "Lucida Grande", "Trebuchet MS", Verdana;
display:block;
color:white;
width:auto;
padding:5px 0;
text-indent:8px;
text-decoration:none;
border-bottom:1px solid black;
}
.vmenu li:hover{
background-color:white;
color:black;
border-bottom:1px solid black;
}
</style>
</head>
<body>
<h1>Working With Vertical menus</h1>
<div class="vmenu">
<menu>
<li>HOME</li>
<li>ABOUT US</li>
<li>HTML</li>
<li>CSS</li>
<li>JAVASCRIPT</li>
<li>CONTACT</li>
<li>FEEDBACK</li>
</menu>
</div>
</body>
</html>
Here We have applied different CSS styles on a menu.
The output of the Above Web page:
<!doctype html>
<head>
<title>Working with changing the appearance of vertical menu</title>
<style type="text/css">
.vmenu{
list-style-type:none;
margin:0;
padding:0;
width:180px;
}
vmenu li{
background-color:green;
font-weight:bold;
display:block;
padding:2px 4px;
padding:5px 0;
text-indent:8px;
text-decoration:none;
border:2px solid green;
width:100%;
}
.vmenu li:hover{
background-color:green;
color:black;
border-style:outset;
}
</style>
</head>
<body>
<h1>Working With Vertical menus</h1>
<div class="vmenu">
<menu>
<li>HOME</li>
<li>ABOUT US</li>
<li>HTML</li>
<li>CSS</li>
<li>JAVASCRIPT</li>
<li>CONTACT</li>
<li>FEEDBACK</li>
</menu>
</div>
</body>
</html>
The output of the Above web page is:
<!doctype html>
<head>
<title>Working with changing the appearance of vertical menu</title>
<style type="text/css">
.vmenu{
list-style-type:none;
margin:0;
padding:0;
width:180px;
}
vmenu li{
background:#333 no-repeat right top;
font:bold 13px "Lucida Grande", "Trebuchect MS", Verdana;
display:block;
color:white;
width:auto;
padding:5px 0;
text-indent:8px;
text-decoration:none;
border-bottom:1px solid black;
width:180px;
}
.vmenu li{
background:#333 no-repeat right top;
font:bold 13px "Lucida Grande", "Trebuchet MS", Verdana;
display:block;
color:white;
width:auto;
padding:5px 0;
text-indent:8px;
text-decoration:none;
border-bottom:1px solid black;
}
.vmenu li:hover{
background-color:white;
color:black;
border-bottom:1px solid black;
}
</style>
</head>
<body>
<h1>Working With Vertical menus</h1>
<div class="vmenu">
<menu>
<li>HOME</li>
<li>ABOUT US</li>
<li>HTML</li>
<li>CSS</li>
<li>JAVASCRIPT</li>
<li>CONTACT</li>
<li>FEEDBACK</li>
</menu>
</div>
</body>
</html>
Here We have applied different CSS styles on a menu.
The output of the Above Web page:
Here We create second Web page named verticalmenusecond.html file.
<head>
<title>Working with changing the appearance of vertical menu</title>
<style type="text/css">
.vmenu{
list-style-type:none;
margin:0;
padding:0;
width:180px;
}
vmenu li{
background-color:green;
font-weight:bold;
display:block;
padding:2px 4px;
padding:5px 0;
text-indent:8px;
text-decoration:none;
border:2px solid green;
width:100%;
}
.vmenu li:hover{
background-color:green;
color:black;
border-style:outset;
}
</style>
</head>
<body>
<h1>Working With Vertical menus</h1>
<div class="vmenu">
<menu>
<li>HOME</li>
<li>ABOUT US</li>
<li>HTML</li>
<li>CSS</li>
<li>JAVASCRIPT</li>
<li>CONTACT</li>
<li>FEEDBACK</li>
</menu>
</div>
</body>
</html>
The output of the Above web page is:
No comments:
Post a Comment