Responsive menu with dropdown submenu

Asked

Viewed 1,072 times

1

I am working on a template menu and need to adjust the submenu view. I cannot make the submenu overlap with the original menu. When I hover the mouse through the submenu link, it is displayed, however, it expands not only the submenu, but also the div of the menu. Follows code:

	function myFunction() {
		var x = document.getElementById("myTopnav");
		if (x.className === "topnav") {
			x.className += " responsive";
		} else {
			x.className = "topnav";
		}
	}
body {
	width: 90%;
	margin-left: 5%;
	background-color: #A19BFF;
}
.listsubmenu{
	display: none;
	width: 180px;
	list-style-type: none;
}
.listsubmenu li{
	width: 180px;
}
#menuprincipal{
	background-color: #FEFEFE;	
	position: relative;
	margin: 0;
}
#dropdown:hover .listsubmenu{
	display: block;
	position: relative;
}
ul.topnav {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
}
ul.topnav li {
	float: left;
}
ul.topnav li a {
  display: inline-block;
  color: #3E4095;
  text-align: center;
  font-weight: bold;
  padding: 14px 16px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 17px;
  border-radius: 50px;
}
ul.topnav li a:hover {
	background-color: #3E4095;
	color: white;
}
ul.listsubmenu li a:hover{
	width: 150px;
}
ul.topnav li.icon {
	display: none;
}
@media screen and (max-width:680px) {
	ul.topnav li:not(:first-child) {
		display: none;
	}
	ul.topnav li.icon {
		float: right;
		display: inline-block;
	}
	ul.topnav.responsive li.icon {
		position: absolute;
		right: 0;
		top: 0;
	}	
	ul.topnav.responsive li {
		float: none;
		display: inline;
	}
	ul.topnav.responsive li a {
		display: block;
		text-align: left;
	}
}
<!DOCTYPE html>
<html>
<head>
	<meta charset='utf-8'>
	<link rel='stylesheet' type='text/css' href='css\normalize.css'>
	<link rel='stylesheet' type='text/css' href='css\menu_responsivo.css'>
</head>
<body>
	<nav id='menuprincipal'>
		<ul class="topnav" id="myTopnav">
			<li><a class="active" href="#home">Início</a></li>
			<li><a href="#news">Sobre Nós</a></li>
			<li id='dropdown'><a href="#contact">Sistemas</a>
				<ul class='listsubmenu'>
					<li><a href=''>Auto Peças</a></li>
					<li><a href=''>Esfiharia</a></li>
					<li><a href=''>Estacionamentos</a></li>
					<li><a href=''>Mercados</a></li>
					<li><a href=''>Pet Shops</a></li>
					<li><a href=''>Pizzarias</a></li>
					<li><a href=''>Restaurantes</a></li>
				</ul>
			</li>
			<li><a href="#about">Cliente</a></li>
			<li><a href="#about">Contato</a></li>
			<li class="icon">
				<a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a>
			</li>
		</ul>
	</nav>
	<div style="padding-left:16px">
	  <h2>Responsive Topnav Example</h2>
	  <p>Resize the browser window to see how it works.</p>
	</div>
</body>
</html>

javascript html css

1 answer

2

Hello Matthew, maybe if you manipulate a little your CSS you can do something like:

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
    background-color: red;
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}
<!DOCTYPE html>
<html>
<head>
 </head>
<body>
<ul>
  <li><a class="active" href="#home">Início</a></li>
  <li><a href="#news">Sobre nós</a></li>
  <li class="dropdown">
    <a href="#" class="dropbtn">Sistemas</a>
    <div class="dropdown-content">
      <a href="#">Auto Peças</a>
      <a href="#">Esfiharia</a>
      <a href="#">Estacionamentos</a>
      <a href="#">Mercados</a>
      <a href="#">Pet Shops</a>
      <a href="#">Pizzarias</a>
      <a href="#">Restaurantes</a>



    </div>
  </li>
</ul>

<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>

</body>
</html>

Examples of Dropdown W3C

  • Thanks Fabricio. Had left aside the script until now.

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.