how to make menu bar in html
 |
| menu bar |
menu.html file
<html>
<head>
<title>menu</title>
<link rel="stylesheet" type="text/css" href="menu.css"/>
<body>
<div id="menu">
<ul>
<li><a href="#">student</a>
<ul>
<li><a href="#">Student entry</a></li>
<li><a href="#">View student</li>
</ul>
</li>
<li><a href="#">Teachers</a>
<ul>
<li><a href="#">teacher entry</a></li>
<li><a href="#">View teachers</li>
</ul>
</li>
<li><a href="#">Faculty</a>
<ul>
<li><a href="#">Faculty entry</a></li>
<li><a href="#">View Faculty</li>
</ul>
</li>
<li><a href="#">Subject</a>
<ul>
<li><a href="#">Subject entry</a></li>
<li><a href="#">View subject</li>
</ul>
</li>
<li><a href="#">Score</a>
<ul>
<li><a href="#">Score entry</a></li>
<li><a href="#">View Score</li>
</ul>
</li>
<li><a href="#">Attendances</a>
<ul>
<li><a href="#">Attendace entry</a></li>
<li><a href="#">Monthle Stats</li>
<li><a href="#">Students Status</li>
</ul>
</li>
<li><a href="#">Users</a>
<ul>
<li><a href="#">users entry</a></li>
<li><a href="#">View users</li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</body>
</head>
</html>
menu.css css file
*{
margin:0px;
padding:0px;
}
body{background:grey;}
#menu ul
{
list-style:none;
}
#menu li
{
background:red;
border: solid 1px white;
width:180px;
height:50px;
line-height:50px;
float:left;
text-align:center;
position:relative;
text-transform:uppercase;
border-radius: 12px;
}
#menu ul li a
{
text-decoration:none;
color:white;
display:block;
}
#menu ul li a:hover
{
background-color:green;
border-radius:12px;
}
#menu ul ul
{
position:absolute;
display:none;
}
#menu ul li:hover > ul
{
display:block;
}
#menu ul ul ul
{
margin-left:180px;
top:0px;
}
.list
{
width: 660px;
height: 400px;
margin-left: 339px;
float: left;
margin-top: 26px;
border: solid cadetblue;
}
@media screen and (max-width:700px)
{
.list
{
float:left;
margin-left:-20px;
}
#menu ul
{
flex-direction:column;
display:block;
}
}
@media screen and (max-width:640px) {
#menu ul li{
max-width: 100%;
}
}
@media screen and (max-width:775px) {
#menu ul li{
max-width: 100%;
padding: 0px 5px 0px 5px;
float: none;
text-align: center;
}
}
@media screen and (max-width:980px) {
#menu ul li{
max-width: 100%;
}
}
#list
{
width:auto;
margin-top:40px;
}
.slist
{
height:400px;
}
.tlist
{
height: 32px;
width: 205px
}
#area
{
height: 100px;
width: 207px;
}
.btn
{
width:100px;
height: 40px;
border-radius: 11px;
border: solid #4050c1;
}
#content
{
text-align:justify;
margin:10px;
padding:10px;
}
please comment on this post
