<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<metacharset="utf-8">
<metaname="viewport"content="width=device-width, initial-scale=1">
<!--<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css">-->
</head>
<body>
<navid="nav"class="navbar navbar-expand-lg bg-black">
<divclass="container-fluid">
<aclass="navbar-brand"href="#">Brand</a>
<buttonclass="navbar-toggler"type="button"onclick="menuclick()">
<spanclass="navbar-toggler-icon"></span>
</button>
<divclass="collapse navbar-collapse"id="main_nav">
<ulclass="navbar-nav">
<liclass="nav-item active"><aclass="nav-link"href="#">Home </a></li>
<liclass="nav-item"><aclass="nav-link"href="#"> About </a></li>
<liclass="nav-item"><aclass="nav-link"href="#"> Services </a></li>
<liclass="nav-item dropdown">
<aclass="nav-link "href="#"data-bs-toggle="dropdown"> Hover me </a>
<ulclass="dropdown-menu">
<li><aclass="dropdown-item"href="#"> Submenu item 1</a></li>
<li><aclass="dropdown-item"href="#"> Submenu item 2 </a></li>
<li><aclass="dropdown-item"href="#"> Submenu item 3 </a></li>
</ul>
</li>
</ul>
</div><!-- navbar-collapse.// -->
</div><!-- container-fluid.// -->
</nav>
<!-- -->
<divclass="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
<style>
.navbar.nav-item.dropdown-menu {
display: none;
}
.navbar.nav-item:hover.dropdown-menu {
display: block;
}
.navbar.nav-item.dropdown-menu {
margin-top: 0;
}
nav-item {color: white;
font-weight: bold;}
#nav {
margin: 0;
padding: 0;
min-height: 50px;
float: left;
width: auto;
}
#navul {
margin: 0;
padding: 0;
zoom: 1;
}
#navulli {
margin: 0;
padding: 0;
list-style:none;
display:inline-block;
border-right: 1pxsolid#fff;
box-shadow: 1px00#e1e1e1;
float: left;
}
#navullia {
display:block;
color: #fff;
font-weight: bold;
margin: 0px;
padding: 15px;
padding-right: 15px;
padding-left: 15px;
text-align: center;
font-size: 14px;
text-decoration: none;
background-color: #036c9e;
}
#navulli:hovera {
color: #036c9e;
background: #e5e5e5;
}
#navulli:hoverullia {
display:block;
color: #000;
text-align: left;
background: #fff;
margin: 0px;
padding: 10px;
}
#navulliul {
position: absolute;
left: -999em;
z-index: 999;
margin: 0;
padding: 0;
background: #ffffff;
border: #ffffff1pxsolid;
box-shadow: #5454540px1px1px0px;
-moz-box-shadow: #5454540px1px1px0px;
-webkit-box-shadow: #5454540px1px1px0px;
border: #ccc1pxsolid;
width: 200px;
}
#navulliulli{
margin: 0;
padding: 5px;
width: 100%;
background: #fff;
}
#navulli:hoverul {
left: auto;
}
#navulliullia:hover {
display:block;
color: #fff;
background: #036c9e;
}
.sousitem a {
font-weight: bold;
}
</style>
<script>
functionmenuclick() {
toggling(document.getElementById("main_nav"));
}
functiontoggleclass(className) {
varx=document.getElementsByClassName(className);
for (vari=0; i<x.length; i++) {
if (x[i].style.display==="none") {
x[i].style.display="block";
} else {
x[i].style.display="none";
}
}
}
functiontoggling(myElement) {
if (myElement.style.display==="block") {
myElement.style.display="none";
} else {
myElement.style.display="block";
}
}
constboxes=document.getElementsByClassName('dropdown');
for (constboxofboxes) {
box.addEventListener('click', functionhandleClick(event) {
//console.log('box clicked', event);
toggling(box.children[1]);
/*
if (box.children[1].style.display === "block") {
box.children[1].style.display = "none";
}
else {
box.children[1].style.display = "block";
}
*/
});
}
</script>
</html>