HTML css Rectangle menu with vertical separator
Creating attractive menu using HTML and css
Step 1: Create or download image you want here we are going to use image as shown to set menu hover .
Step 2: create a HTML page Rectangle menu.HTML following code in body tag
<body>
<div id="header">
<h1> Top 3 Actors </h1>
<div id="templatemo_menu">
<ul>
<li><a href="index.html" class="current">Home</a></li>
<li><a href="#">Daily News</a></li>
<li><a href="#">Sports</a></li>
<li><a href="#">Business</a></li>
<li><a href="#">Politics</a></li>
<li><a href="#">Entertainment</a></li>
<li><a href="#">Technology & Science</a></li>
</ul>
</div>
</div>
<div id="nav">
<h5> <a href="1.html"> Salman Khan </a> </h5>
<h5> <a href="2.html"> Shahrukh Khan </a> </h5>
<h5> <a href="3.html">Aamir Khan </a> </h5>
</div>
<div id="section">
<p>
</p>
</div>
<div id="footer">
<h1> copyright@w3schools </h1>
</div>
</body>
Step 3: write CSS Class or Copy paste following CSS code to to <head> tag
<head>
<style>
#header{ background-color:pink;
color:red;
text-align:center;
padding:5px;
}
#templatemo_menu {
float: left;
width: 100%;
height: 30px;
background: #750a20 url(images/templatemo_menu_bg.gif) repeat-x;
border-bottom: 1px solid #333;
}
#templatemo_menu ul {
float: left;
width:800px;
margin: 0;
padding: 7px 0 0 0;
list-style: none;
}
#templatemo_menu ul li{
display: inline;
}
#templatemo_menu ul li a{
float: left;
padding: 0 25px;
font-size: 12px;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #FFFFFF;
border-right: 1px solid #FFFFFF;
}
#templatemo_menu li a:hover, #templatemo_menu li .current{
color: #FFFF00;
}
#nav{ line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
h5:hover,h5:active;
clear:both;
}
#section{ width:350px;
float:left;
padding:10px;
}
#footer{ background-color:pink;
color:red;
clear:both;
text-align:center;
padding:5px;
}
</head>
complete code is save this code as Rectangle menu.HTML put menu image and HTML file in same folder
<html>
<head>
<style>
#header{ background-color:pink;
color:red;
text-align:center;
padding:5px;
}
#templatemo_menu {
float: left;
width: 100%;
height: 30px;
background: #750a20 url(images/templatemo_menu_bg.gif) repeat-x;
border-bottom: 1px solid #333;
}
#templatemo_menu ul {
float: left;
width:800px;
margin: 0;
padding: 7px 0 0 0;
list-style: none;
}
#templatemo_menu ul li{
display: inline;
}
#templatemo_menu ul li a{
float: left;
padding: 0 25px;
font-size: 12px;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #FFFFFF;
border-right: 1px solid #FFFFFF;
}
#templatemo_menu li a:hover, #templatemo_menu li .current{
color: #FFFF00;
}
#nav{ line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
h5:hover,h5:active;
clear:both;
}
#section{ width:350px;
float:left;
padding:10px;
}
#footer{ background-color:pink;
color:red;
clear:both;
text-align:center;
padding:5px;
}
</head>
</style>
<body>
<div id="header">
<h1> Top 3 Actors </h1>
<div id="templatemo_menu">
<ul>
<li><a href="index.html" class="current">Home</a></li>
<li><a href="#">Daily News</a></li>
<li><a href="#">Sports</a></li>
<li><a href="#">Business</a></li>
<li><a href="#">Politics</a></li>
<li><a href="#">Entertainment</a></li>
<li><a href="#">Technology & Science</a></li>
</ul>
</div>
</div>
<div id="nav">
<h5> <a href="1.html"> Salman Khan </a> </h5>
<h5> <a href="2.html"> Shahrukh Khan </a> </h5>
<h5> <a href="3.html">Aamir Khan </a> </h5>
</div>
<div id="section">
<p>
</p>
</div>
<div id="footer">
<h1> copyright@w3schools </h1>
</div>
</body>
</html>
<head>
<style>
#header{ background-color:pink;
color:red;
text-align:center;
padding:5px;
}
#templatemo_menu {
float: left;
width: 100%;
height: 30px;
background: #750a20 url(images/templatemo_menu_bg.gif) repeat-x;
border-bottom: 1px solid #333;
}
#templatemo_menu ul {
float: left;
width:800px;
margin: 0;
padding: 7px 0 0 0;
list-style: none;
}
#templatemo_menu ul li{
display: inline;
}
#templatemo_menu ul li a{
float: left;
padding: 0 25px;
font-size: 12px;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #FFFFFF;
border-right: 1px solid #FFFFFF;
}
#templatemo_menu li a:hover, #templatemo_menu li .current{
color: #FFFF00;
}
#nav{ line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
h5:hover,h5:active;
clear:both;
}
#section{ width:350px;
float:left;
padding:10px;
}
#footer{ background-color:pink;
color:red;
clear:both;
text-align:center;
padding:5px;
}
</head>
</style>
<body>
<div id="header">
<h1> Top 3 Actors </h1>
<div id="templatemo_menu">
<ul>
<li><a href="index.html" class="current">Home</a></li>
<li><a href="#">Daily News</a></li>
<li><a href="#">Sports</a></li>
<li><a href="#">Business</a></li>
<li><a href="#">Politics</a></li>
<li><a href="#">Entertainment</a></li>
<li><a href="#">Technology & Science</a></li>
</ul>
</div>
</div>
<div id="nav">
<h5> <a href="1.html"> Salman Khan </a> </h5>
<h5> <a href="2.html"> Shahrukh Khan </a> </h5>
<h5> <a href="3.html">Aamir Khan </a> </h5>
</div>
<div id="section">
<p>
</p>
</div>
<div id="footer">
<h1> copyright@w3schools </h1>
</div>
</body>
</html>