I am pulling my hair out trying to figure out why the dropdown content spans all the way to the left, and not under the appropriate parent, and be of equal width of said parent element. I would also really like to know how to code it without using CSS selectors.
I really want just a simple code like from this sample, but the dropdown content of equal width as the button tags and CSS selectors
/***** whole navigation bar *****/
nav#nav-content {
display: grid;
place-items: center;
font-faimily: "Gill Sans", sans-serif;
font-size: 13.7px;
}
nav#nav-content ul {
grid-auto-flow: column;
list-style: none;
text-align: center;
padding: 0;
margin: 0;
}
nav#nav-content { /*selects whole <li> tags under <nav> tag */
position: relative; /*to provide boundry*/
margin: 0;
padding: 0;
}
/***** all links *****/
ul#exo-menu a:link /* all normal, unvisitied links under <ul> */ {
display: block;
text-decoration: none;
background-color: #0E0E10; /* jet black */
color: #FFFAFA; /* olde lace */
margin: 0;
padding: 7px 13px;
}
ul#exo-menu a:visited /* visited link */ {
background-color: #F5F5F5; /* white smoke */
color: #1A1110; /* licorice */
}
ul#exo-menu a:hover /* mouse over link, must come after <a:link> and <a:visited> */ {
background-color: #242124; /* raiden */
color: #FFFFF0; /* ivory */
}
ul#exo-menu a:active /* a link that's selected - must come after <a:hover> */ {
background-color: #D3D3D3;
color: #808080;
}
/* disables links */
nav#nav-content div.cursor { /* Since pointer-event: none; disables all mouse functions, wrap disabled link with a div tag, and then add the cursor input.*/
cursor: not-allowed;
}
nav#nav-content a.disabledLink {
pointer-events: none;
}
/***** all <button> tags *****/
button.dropbtn {
outline: none;
border: none;
font: inherit; /* Important for vertical align on mobile phones */
background-color: #0E0E10; /* jet black */
color: #FFFAFA; /* olde lace white */
/* width: 100% */
margin: 0; /* Important for vertical align on mobile phones */
padding: 7px 13px;
cursor: pointer;
}
button.dropbtn:hover {
background-color: #242124; /* raiden */
color: #FFFFF0; /* ivory */
}
button.dropbtn:active {
background-color: #D3D3D3;
color: #808080;
}
/***** submenu positioning *****/
ul .dropdown {
float: left;
overflow: hidden;
}
#exo-menu ul {
background-color: #0E0E10; /* jet black */
/* Adding a background makes the dropdown work properly in IE7 . Make this as close to your page's background as possible (i.e. white page == white background). */
color: #FFFAFA; /* olde lace */
position: absolute;
left: -9999px; /* Hide off-screen when not needed (this is more accessible than display: none;) */
}
#exo-menu>li:hover>ul {
/*to keep it under relative li*/
position: absolute;
top: 100%;
left: 0; /* Bring back on-screen when needed */
background: #fff;
border: 1px solid #000;
}/***** whole navigation bar *****/
nav#nav-content {
display: grid;
place-items: center;
font-faimily: "Gill Sans", sans-serif;
font-size: 13.7px;
}
nav#nav-content ul {
grid-auto-flow: column;
list-style: none;
text-align: center;
padding: 0;
margin: 0;
}
nav#nav-content {
/*selects whole <li> tags under <nav> tag */
position: relative;
/*to provide boundry*/
margin: 0;
padding: 0;
}
/***** all links *****/
ul#exo-menu a:link
/* all normal, unvisitied links under <ul> */
{
display: block;
text-decoration: none;
background-color: #0E0E10;
/* jet black */
color: #FFFAFA;
/* olde lace */
margin: 0;
padding: 7px 13px;
}
ul#exo-menu a:visited
/* visited link */
{
background-color: #F5F5F5;
/* white smoke */
color: #1A1110;
/* licorice */
}
ul#exo-menu a:hover
/* mouse over link, must come after <a:link> and <a:visited> */
{
background-color: #242124;
/* raiden */
color: #FFFFF0;
/* ivory */
}
ul#exo-menu a:active
/* a link that's selected - must come after <a:hover> */
{
background-color: #D3D3D3;
color: #808080;
}
/* disables links */
nav#nav-content div.cursor {
/* Since pointer-event: none; disables all mouse functions, wrap disabled link with a div tag, and then add the cursor input.*/
cursor: not-allowed;
}
nav#nav-content a.disabledLink {
pointer-events: none;
}
/***** all <button> tags *****/
button.dropbtn {
outline: none;
border: none;
font: inherit;
/* Important for vertical align on mobile phones */
background-color: #0E0E10;
/* jet black */
color: #FFFAFA;
/* olde lace white */
/* width: 100% */
margin: 0;
/* Important for vertical align on mobile phones */
padding: 7px 13px;
cursor: pointer;
}
button.dropbtn:hover {
background-color: #242124;
/* raiden */
color: #FFFFF0;
/* ivory */
}
button.dropbtn:active {
background-color: #D3D3D3;
color: #808080;
}
/***** submenu positioning *****/
ul .dropdown {
float: left;
overflow: hidden;
}
#exo-menu ul {
background-color: #0E0E10;
/* jet black */
/* Adding a background makes the dropdown work properly in IE7 . Make this as close to your page's background as possible (i.e. white page == white background). */
color: #FFFAFA;
/* olde lace */
position: absolute;
left: -9999px;
/* Hide off-screen when not needed (this is more accessible than display: none;) */
}
#exo-menu>li:hover>ul {
/*to keep it under relative li*/
position: absolute;
top: 100%;
left: 0;
/* Bring back on-screen when needed */
background: #fff;
border: 1px solid #000;
}<nav id="nav-content">
<ul id="exo-menu">
<li >
<button type="button" onclick="myFunction()" >The Desi Ghost Hunters
<i ></i>
</button>
<ul >
<li ><a href="#" title="Siddharth Bantval">Siddharth Bantval</a></li>
<li ><a href="https://www.ikerjimenez.com/" target="_blank" title="REAL NAME: Iker Jiménez Elizari">Iker Jiménez</a></li>
<li ><a href="#" title="Gaurav Tiwari">Gaurav Tiwari <span >‡</span></a></li>
<li ><a href="https://www.youtube.com/channel/UC5RfSq8MS00LWofLPSKAnDA" target="_blank" title="Alberto del Arco">Alberto del Arco</a></li>
<li ><a href="#" title="Alexsander Myagchenkov">Alexsander Myagchenkov</a></li>
<li ><a href="http://chernobrov.narod.ru/" target="_blank" title="Vadim Chernobrov">Vadim Chernobrov <span >‡</span></li>
<li ><a href="#" title="Meghna Porwal">Meghna Porwal</a></li>
</ul>
</li>
<li >
<button type="button" onclick="myFunction()" aria-expanded="false" title="N">Cazafantasmas españoles
<i ></i>
</button>
<ul id="multiple">
<li >
<button type="button" onclick="myFunction()" >Spain
<i ></i>
</button>
<ul >
<li ><a href="https://www.ikerjimenez.com/" target="_blank" title="REAL NAME: Iker Jiménez Elizari">Iker Jiménez</a></li>
</ul>
</li>
<li >
<button type="button" onclick="myFunction()" >Mexico
<i ></i>
</button>
<ul >
<li ><a href="#" title="Octavio Elizondo">Octavio Elizondo</a></li>
<li ><a href="#" title="Luisa Cárdenas">Luisa Cárdenas</a></li>
<li ><a href="https://www.youtube.com/channel/UC5RfSq8MS00LWofLPSKAnDA" target="_blank" title="Alberto del Arco">Alberto del Arco</a></li>
<li ><a href="#" title="Silvia Enciso">Silvia Enciso</a></li>
<li ><a href="#" title="Laura Rivas">Laura Rivas</a></li>
<li ><a href="#" title="Miriam Verdecía">Miriam Verdecía</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>CodePudding user response：
The position of the item which has sub-menu class is set to absolute. This means that all elements placed inside this tag are taken from the flow of the document and their position depends in your case on the first possibly closest parent that has the position attribute set. In this case, it's a nav tag with the nav-content class (and its position is adjacent to the left edge of the window). To solve this problem you need to set the position attribute in the tag to which you want your dropdown list to be positioned. It looks like you need to add the position: relative; attribute to the li tag from the dropdown class and then adjust position of your list depending on your need. That should fix the problem.
.dropdown { position: relative;}
For more knowledge, I recommend reading and understanding this
CodePudding user response：
pulling your hear out will not help. and it's normal to be frustrated like this in the beginning. the best thing to do is to learn the basic and practice as much as you can until you get familiar how things work.
here are some important points to learn about:
1- absolute position remove the element from the normal flow, and can overlap elements.
2- your HTML structure is very important factor and very important to learn how to build a good HTML structure. and will help you to easily style your page and put elements correctly.
3- borders will take space as you give it and this can confuse beginners when they add borders only on hover.
please check this video to learn more about positions in CSS video
and here are some edits for your code:
/***** whole navigation bar *****/
nav#nav-content {
display: grid;
place-items: center;
font-faimily: "Gill Sans", sans-serif;
font-size: 13.7px;
}
nav#nav-content ul {
grid-auto-flow: column;
list-style: none;
text-align: center;
padding: 0;
margin: 0;
}
nav#nav-content {
/*selects whole <li> tags under <nav> tag */
position: relative;
/*to provide boundry*/
margin: 0;
padding: 0;
}
/***** all links *****/
ul#exo-menu a:link
/* all normal, unvisitied links under <ul> */
{
display: block;
text-decoration: none;
background-color: #0E0E10;
/* jet black */
color: #FFFAFA;
/* olde lace */
margin: 0;
padding: 7px 13px;
}
ul#exo-menu a:visited
/* visited link */
{
background-color: #F5F5F5;
/* white smoke */
color: #1A1110;
/* licorice */
}
ul#exo-menu a:hover
/* mouse over link, must come after <a:link> and <a:visited> */
{
background-color: #242124;
/* raiden */
color: #FFFFF0;
/* ivory */
}
ul#exo-menu a:active
/* a link that's selected - must come after <a:hover> */
{
background-color: #D3D3D3;
color: #808080;
}
/* disables links */
nav#nav-content div.cursor {
/* Since pointer-event: none; disables all mouse functions, wrap disabled link with a div tag, and then add the cursor input.*/
cursor: not-allowed;
}
nav#nav-content a.disabledLink {
pointer-events: none;
}
/***** all <button> tags *****/
button.dropbtn {
outline: none;
border: none;
font: inherit;
/* Important for vertical align on mobile phones */
background-color: #0E0E10;
/* jet black */
color: #FFFAFA;
/* olde lace white */
/* width: 100% */
margin: 0;
/* Important for vertical align on mobile phones */
padding: 7px 13px;
cursor: pointer;
margin: 0 5px;
}
button.dropbtn:hover {
background-color: #242124;
/* raiden */
color: #FFFFF0;
/* ivory */
}
button.dropbtn:active {
background-color: #D3D3D3;
color: #808080;
}
/***** submenu positioning *****/
ul .dropdown {
float: left;
overflow: hidden;
}
#exo-menu ul {
background-color: #0E0E10;
/* jet black */
/* Adding a background makes the dropdown work properly in IE7 . Make this as close to your page's background as possible (i.e. white page == white background). */
color: #FFFAFA;
/* olde lace */
/* position: absolute; */
display: none;
left: -9999px;
/* Hide off-screen when not needed (this is more accessible than display: none;) */
}
#exo-menu>li:hover>ul {
/*to keep it under relative li*/
/* position: absolute; */
top: 100%;
left: 0;
/* Bring back on-screen when needed */
background: #fff;
/* border: 1px solid #000; */
display: block;
} <nav id="nav-content">
<ul id="exo-menu">
<li >
<button type="button" onclick="myFunction()" >The Desi Ghost Hunters
<i ></i>
</button>
<ul >
<li ><a href="#" title="Siddharth Bantval">Siddharth Bantval</a></li>
<li ><a href="https://www.ikerjimenez.com/" target="_blank" title="REAL NAME: Iker Jiménez Elizari">Iker Jiménez</a></li>
<li ><a href="#" title="Gaurav Tiwari">Gaurav Tiwari <span >‡</span></a></li>
<li ><a href="https://www.youtube.com/channel/UC5RfSq8MS00LWofLPSKAnDA" target="_blank" title="Alberto del Arco">Alberto del Arco</a></li>
<li ><a href="#" title="Alexsander Myagchenkov">Alexsander Myagchenkov</a></li>
<li ><a href="http://chernobrov.narod.ru/" target="_blank" title="Vadim Chernobrov">Vadim Chernobrov <span >‡</span></li>
<li ><a href="#" title="Meghna Porwal">Meghna Porwal</a></li>
</ul>
</li>
<li >
<button type="button" onclick="myFunction()" aria-expanded="false" title="N">Cazafantasmas españoles
<i ></i>
</button>
<ul id="multiple">
<li >
<button type="button" onclick="myFunction()" >Spain
<i ></i>
</button>
<ul >
<li ><a href="https://www.ikerjimenez.com/" target="_blank" title="REAL NAME: Iker Jiménez Elizari">Iker Jiménez</a></li>
</ul>
</li>
<li >
<button type="button" onclick="myFunction()" >Mexico
<i ></i>
</button>
<ul >
<li ><a href="#" title="Octavio Elizondo">Octavio Elizondo</a></li>
<li ><a href="#" title="Luisa Cárdenas">Luisa Cárdenas</a></li>
<li ><a href="https://www.youtube.com/channel/UC5RfSq8MS00LWofLPSKAnDA" target="_blank" title="Alberto del Arco">Alberto del Arco</a></li>
<li ><a href="#" title="Silvia Enciso">Silvia Enciso</a></li>
<li ><a href="#" title="Laura Rivas">Laura Rivas</a></li>
<li ><a href="#" title="Miriam Verdecía">Miriam Verdecía</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>