I started to write a code for fun until i notice the navigation dropdown elements were ruin the navigation menu when i hover to dropdown and i have no idea what’s wrong so, can you tell me where i did the mistake? my html code:
<html>
<head>
<title>Website</title>
<link rel="stylesheet" type="text/css" href="Style.css">
</head>
<body>
<div>
<span id="navmenu">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">contact</a><ul class="dropdown">
<li><a href="#">Our emails</a></li>
<li><a href="#">Our telephones</a></li>
<li><a href="#">Our Fax</a></li>
<li><a href="#">Our mail</a></li>
<li><a href="#">To visit us</a></li></ul>
<li><a href="#">about us</a></li>
</ul>
</li>
</span>
</div>
</br>
</br>
<div>
<span id="container">
This is our website, feel free to contact us if you didn't find something that you need.</span>
</div>
</br>
</br>
<div id="Smenu">
<span>
<ul>
<a href="#"><li>Our history</li></a>
<a href="#"><li>Our workers</li></a>
<a href="#"><li>Our buildings</li></a>
<a href="#"><li>Our tools</li></a>
<a href="#"><li>Our targets</li></a>
<a href="#"><li>Our job so far</li></a>
<a href="#"><li>What we've done</li></a>
</ul>
</span>
</div>
</body>
</html>
my css code:
html, body {
margin: 0;
height: 100%;
}
html{
background-image: linear-gradient(rgb(189, 189, 189), rgb(88, 88, 88))
}
#navmenu ul li{
font-size: 30px;
float: left;
display: block;
padding: 0% 10%;
list-style: none;
background-color: lightgreen;
}
#navmenu ul :first-child li{
border-radius: 10px 0px 0px 10px;
}
#navmenu ul :last-child li{
border-radius: 0px 10px 10px 0px;
}
#navmenu a{
text-decoration: none;
}
#navmenu li:hover{
background-color: green;
}
#navmenu li:active{
background-color: darkgreen;
}
#Smenu{
transform: translateY(20px);
width: 10%;
z-index: 1
}
#Smenu li{
font-size: 20px;
list-style: none;
display: block;
background-color: lightblue;
width: 100%;
height: 5%;
text-align: center;
padding: 10px 0;
z-index: 5;
}
#Smenu li:hover{
background-color: blue;
}
#Smenu li:active{
background-color: darkblue;
}
#Smenu ul a:first-child li{
border-radius: 10px 10px 0px 0px;
}
#Smenu ul a:last-child li{
border-radius: 0px 0px 10px 10px;
}
#navmenu ul :last-child{
border-radius: 0px 10px 10px 0px;
}
#Smenu a{
text-decoration: none;
}
#container{
border: 5px solid black;
position: absolute;
top: 15%;
left: 15%;
margin: 0;
min-width: 75%;
min-height: 75%;
text-align: center;
border-radius: 50px 0px 50px 0px;
background-color: silver;
z-index: -100;
}
#navmenu ul li ul li{
display: none;
}
#navmenu ul li:hover ul li{
display: block;
}
#navmenu ul li ul li a{
width: 100%;
}
#navmenu{
z-index: 5;
}
.dropdown li{
width: 100%;
}
1 Like
ok, what about now?
why does dropdown menu elements takes the entire horizontal line when it drop.
why does the Smenu being pushed down when the dropdown drops?
my HTML code:
<html>
<head>
<title>Website</title>
<link rel="stylesheet" type="text/css" href="Style.css">
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
</head>
<body>
<div>
<ul class="navmenu">
<li><a href="#Home">Home</a></li>
<li><a href="#News">News</a></li>
<li id="rolldown"><a href="#Contact"><span id="sArrow">Contact▼</span></a>
<ul class="dropdown">
<li>telephones</li>
<li>email</li>
<li>mail</li>
<li>fax</li>
</ul>
</li>
</ul>
<div>
<div id="container">
This is our website, feel free to contact us if you don't find something that you need.
</div>
</div>
<div id="Smenu">
<div>
<ul>
<a href="#history"><li class="top">Our history</li></a>
<a href="#workers"><li>Our workers</li></a>
<a href="#buildings"><li>Our buildings</li></a>
<a href="#tools"><li>Our tools</li></a>
<a href="#targets"><li>Our targets</li></a>
<a href="#ourjob"><li>Our job so far</li></a>
<a href="#havedone"><li class="bottom">What we've done</li></a>
</ul>
</div>
</div>
</div>
</body>
</html>
and my css code:
html, body {
margin: 0;
}
html{
height: 100%;
background-image: linear-gradient(rgb(189, 189, 189), rgb(88, 88, 88))
}
/*-------------navmenu---------*/
.navmenu{
overflow: hidden;
background-color: gold;
text-decoration: none;
display: block;
font-size: 20px;
color: white;
text-align: center;
margin-top: 1%;
}
.navmenu a{
text-decoration: none;
}
.navmenu li{
float: left;
color: darkslategray;
list-style-type: none;
padding-right: 50px;
padding-left: 50px;
padding-top: 10px;
padding-bottom: 10px;
font-size: 100%;
}
.navmenu li:hover{
background-color: lightgreen;
}
.navmenu li:active{
background-color: darkgreen;
color: lightgray;
}
.dropdown{
display: none;
}
#rolldown:hover > .dropdown, .dropdown:hover{
display: block;
background-color: lightgreen;
}
#rolldown:hover > .dropdown, .dropdown:active{
display: block;
background-color: darkgreen;
}
.dropdown{
width: 200px;
z-index: -2;
}
/*---------Smenu--------------*/
#Smenu .bottom{
border-radius: 0px 0px 10px 10px;
}
#Smenu .top{
border-radius: 10px 10px 0px 0px;
}
#Smenu ul{
text-align: center;
}
#Smenu ul li{
font-size: 150%;
margin-left: -40px;
list-style-type: none;
padding-bottom: 5%;
padding-top: 5%;
}
#Smenu{
transform: translateY(30%);
left: 1%;
width: 10%;
position: relative;
background-color: greenyellow;
border-radius: 10px 10px 10px 10px;
}
#Smenu a:visited{
color: darkblue;
}
#Smenu a:link{
color: darkblue;
text-decoration: none;
}
#Smenu li:hover{
background-color: green
}
#Smenu li:active{
background-color: darkgreen;
color: blue;
}
/*------------container---------*/
@media all and (orientation: landscape){
#container{
position: absolute;
left: 20%;
top: 30%;
min-height: 40%;
min-width: 60%;
background-color: rgba(100, 200, 255, 50%);
z-index: -20;
}
}
@media all and (orientation: portrait){
#container{
position: absolute;
left: 20%;
top: 30%;
min-height: 60%;
min-width: 30%;
background-color: rgba(100, 200, 255, 50%);
}
}
#container{
border: 5px solid black;
border-radius: 0px 15px 0px 15px;
}
someone please tell me and explain me what i’ve done wrong.
Thanks!
ok i figured out what’s wrong with the dropdown i had add a css style to the entire navbar
i still have 2 more problems that i can’t figure out:
the dropdown menu (at “Contact”) adding space to the left as a result it’s moving when someone hover the mouse over it
the Smenu that’s at the left stills moving down when the dropdown menu opens
here is my html code:
<html>
<head>
<title>Website</title>
<link rel="stylesheet" type="text/css" href="Style.css">
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
</head>
<body>
<div class="navmenubg"> </div>
<div>
<ul class="navmenu">
<li><a href="#Home">Home</a></li>
<li><a href="#News">News</a></li>
<li id="rolldown"><a href="#Contact"><span id="sArrow">Contact▼</span></a>
<ul class="dropdown">
<li>telephones</li>
<li>email</li>
<li>mail</li>
<li>fax</li>
</ul>
</li>
</ul>
<div>
<div id="container">
This is our website, feel free to contact us if you don't find something that you need.
</div>
</div>
<div id="Smenu">
<div>
<ul>
<a href="#history"><li class="top">Our history</li></a>
<a href="#workers"><li>Our workers</li></a>
<a href="#buildings"><li>Our buildings</li></a>
<a href="#tools"><li>Our tools</li></a>
<a href="#targets"><li>Our targets</li></a>
<a href="#ourjob"><li>Our job so far</li></a>
<a href="#havedone"><li class="bottom">What we've done</li></a>
</ul>
</div>
</div>
</div>
</body>
</html>
and here is my css code:
html, body {
margin: 0;
}
html{
height: 100%;
background-image: linear-gradient(rgb(189, 189, 189), rgb(88, 88, 88))
}
/*-------------navmenu---------*/
.navmenubg{
background-color: rgba(255, 217, 0, 0.5);
position: fixed;
left: 0px;
width: 100%;
opacity: 10%;
height: 43px;
z-index: -60000;
}
.navmenu{
overflow: hidden;
text-decoration: none;
display: block;
font-size: 20px;
color: white;
margin-top: 1%;
}
.navmenu a{
text-decoration: none;
}
.navmenu li{
float: left;
color: darkslategray;
list-style-type: none;
padding-right: 50px;
padding-left: 50px;
padding-top: 10px;
padding-bottom: 10px;
font-size: 100%;
}
.navmenu li:hover{
background-color: lightgreen;
}
.navmenu li:active{
background-color: darkgreen;
color: lightgray;
}
.dropdown{
display: none;
}
#rolldown:hover > .dropdown, .dropdown:hover{
display: block;
background-color: lightgreen;
}
#rolldown:hover > .dropdown, .dropdown:active{
display: block;
background-color: darkgreen;
}
.dropdown{
width: 200px;
z-index: -2;
}
/*---------Smenu--------------*/
#Smenu .bottom{
border-radius: 0px 0px 10px 10px;
}
#Smenu .top{
border-radius: 10px 10px 0px 0px;
}
#Smenu ul{
text-align: center;
}
#Smenu ul li{
font-size: 150%;
margin-left: -40px;
list-style-type: none;
padding-bottom: 5%;
padding-top: 5%;
}
#Smenu{
transform: translateY(30%);
left: 1%;
width: 10%;
position: relative;
background-color: greenyellow;
border-radius: 10px 10px 10px 10px;
}
#Smenu a:visited{
color: darkblue;
}
#Smenu a:link{
color: darkblue;
text-decoration: none;
}
#Smenu li:hover{
background-color: green
}
#Smenu li:active{
background-color: darkgreen;
color: blue;
}
/*------------container---------*/
@media all and (orientation: landscape){
#container{
position: absolute;
left: 20%;
top: 30%;
min-height: 40%;
min-width: 60%;
background-color: rgba(100, 200, 255, 50%);
z-index: -20;
}
}
@media all and (orientation: portrait){
#container{
position: absolute;
left: 20%;
top: 30%;
min-height: 60%;
min-width: 30%;
background-color: rgba(100, 200, 255, 50%);
}
}
#container{
border: 5px solid black;
border-radius: 0px 15px 0px 15px;
}
Can someone figure out how to solve those 2 problems? Why they are moving and how can i fix it?
For redability could you add a codepen link?
lasjorg
September 25, 2019, 4:57pm
6
The #Smenu element is part of normal document flow and its position is in relation to the sibling elements that come before it (if they are also part of normal document flow).
When you hover the menu the height of .navmenu increases pushing down any content part of normal flow. The translate on #Smenu is relative to its current position which changes when it is pushed down.
When a menu expands down you have two options, let it push the content below it, or let it overlay the content. Most times you will overlay it. As an example look at the menu on this forum. If you click the hamburger icon you can see how the menu overlays on the page. For this, you need to take the menu out of normal document flow.
Make #rolldown position relative and set .dropdown to position absolute. Now you just need to position the offset on .dropdown (e.g. left: 0 top: 43px). You will also have to remove overflow: hidden; from .navmenu and remove the negative z-index from .dropdown.
BTW, this selector .navmenu li is affecting all li inside .navmenu which includes the ones inside .dropdown.
Note: I would really not suggest using float and positioning much for doing layout. Try using the normal document flow as much as possible and use something like flexbox and CSS Grid.