Scribd
Upload
5 views3 pages

Submenu Code

The document is an HTML page titled 'zahra's page' that includes a navigation menu with links to Home, About, and subcategories such as Mission, Vision, and Team. The CSS styles define the appearance of the menu, including colors, layout, and hover effects. The menu features dropdown submenus for additional navigation options related to the Team section, with locations listed as Nairobi, Kisumu, and Mombasa.

Uploaded by

Edward njoroge
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
5 views3 pages

Submenu Code

The document is an HTML page titled 'zahra's page' that includes a navigation menu with links to Home, About, and subcategories such as Mission, Vision, and Team. The CSS styles define the appearance of the menu, including colors, layout, and hover effects. The menu features dropdown submenus for additional navigation options related to the Team section, with locations listed as Nairobi, Kisumu, and Mombasa.

Uploaded by

Edward njoroge
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

<!

DOCTYPE html>
<html>
<head>
<title>zahra's page</title>
<link rel="stylesheet" href="edumenu.css">
</head>
<body>
<div class="menu">
<ul>
<li class="active"><a href="#">Home</a></li>
<li class="menubar"><a href="#">About</a>
<div class="submenu1">
<ul>
<li><a href=#>Mission</a></li>
<li><a href=#>Vision</a></li>
<li class="menubar2"><a href=#>Team</a>
<div class="submenu2">
<ul>
<li><a href=#>Nairobi</a></li>
<li><a href=#>Kisumu</a></li>
<li><a href=#>Mombasa</a></li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div></body></html>
.menu{
background-color:red;
text-align:center;
border-radius: 5px;
}
.menu ul{
display:inline-flex;
list-style:none;
}
.menu ul li{
padding:12px;
margin:10px;
width:160px;
}
.menu ul li a{
text-decoration:none;
color:white;
}
.active, .menu ul li:hover{
background-color: #00ccff;
border-radius:3px;
}
.submenu1{
display:none;
background-color:#0073e6;
position:absolute;
margin-top:12px;
}
.submenu1 ul {
display:block;
padding:0px;
}
.submenu1 ul li {
margin:10px;
width:150px;
padding:8px;
text-align:left;
border-bottom:dotted 1px white;
}
.submenu1 ul li:hover{
color:rgba(204, 0, 68,1.0);
}
.menubar:hover .submenu1{
display:block;
}
.submenu2 {
margin-left:140px;
position:absolute;
background-color:#0073e6;
margin-top:-35px;
display:none;
}
.menubar2:hover .submenu2{
display:block;
}

You might also like