Hoverable Dropdown - html

Question

I tried to make a Hoverable text, but it gives me a little visual error. I want to make it in this way: http://i.imgur.com/fg1NTab.png
but at my website it gives in this way.
http://vestigedayz.com/wqeq
(press on the A from menu on my website)
This is my CODE.
<div class="liste">
<div class="dropdown">
<ul> <li>A</li> </ul>
<div class="dropdown-content">
<li>AA</li>
<li>AB</li>
<li>AC</li>
<li>AD</li>
</div>
</div>
<ul> <li>B</li> </ul>
<ul> <li>c</li> </ul>
<ul> <li>d</li> </ul>
<ul> <li>e</li> </ul>
<ul> <li>f</li> </ul>
<ul> <li>g</li> </ul>
<ul> <li>h</li> </ul>
<ul> <li>i</li> </ul>
<ul> <li>j</li> </ul>
<ul> <li>k</li> </ul>
<ul> <li>l</li> </ul>
<ul> <li>m</li> </ul>
<ul> <li>n</li> </ul>
<ul> <li>o</li> </ul>
<ul> <li>p</li> </ul>
<ul> <li>q</li> </ul>
<ul> <li>r</li> </ul>
<ul> <li>s</li> </ul>
<ul> <li>t</li> </ul>
<ul> <li>u</li> </ul>
<ul> <li>v</li> </ul>
<ul> <li>w</li> </ul>
<ul> <li>y</li> </ul>
<ul> <li>z</li> </ul>
</div>
</div>
</div>
AND THE STYLE CSS
.header .liste {background:#ffd564;border-bottom:5px solid #ffecb8;font-size:13px;height:50px;overflow:hidden;padding-left:25px;margin-top:30px;}
.header .liste > ul li {float:left;padding-right:30px;margin:17px 0;}
.header .liste > ul li a {text-decoration:none;color:#1b1b1b;text-transform:uppercase;}
.dropdown {
position: fixed;
display: table;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #ffecb8;
min-width: 950px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
}
.dropdown:hover .dropdown-content {
display: inline-table;
}

Answer 1

Ok, to get A in the right spot you have to put that ul element on the same level as other ul elements (B, C, D etc.)
So change your list div like this
<div class="liste">
<ul><li>A</li></ul>
<div class="dropdown">
<div class="dropdown-content">
<li>AA</li>
<li>AB</li>
<li>AC</li>
<li>AD</li>
</div>
</div>
<ul> <li>B</li> </ul>
<ul> <li>c</li> </ul>
<ul> <li>d</li> </ul>
<ul> <li>e</li> </ul>
<ul> <li>f</li> </ul>
<ul> <li>g</li> </ul>
<ul> <li>h</li> </ul>
<ul> <li>i</li> </ul>
<ul> <li>j</li> </ul>
<ul> <li>k</li> </ul>
<ul> <li>l</li> </ul>
<ul> <li>m</li> </ul>
<ul> <li>n</li> </ul>
<ul> <li>o</li> </ul>
<ul> <li>p</li> </ul>
<ul> <li>q</li> </ul>
<ul> <li>r</li> </ul>
<ul> <li>s</li> </ul>
<ul> <li>t</li> </ul>
<ul> <li>u</li> </ul>
<ul> <li>v</li> </ul>
<ul> <li>w</li> </ul>
<ul> <li>y</li> </ul>
<ul> <li>z</li> </ul>
</div>
Then find these properties and remove padding left:
.header .liste {
background: #ffd564;
border-bottom: 5px solid #ffecb8;
font-size: 13px;
height: 50px;
overflow: hidden;
/* padding-left: 25px; */
margin-top: 30px;
}
Then move your opened dropdown down (top: 50px)and change min width to 948px
.dropdown-content {
/* display: none; */
position: absolute;
background-color: #ffecb8;
min-width: 948px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
top: 50px;
}
Then give your liste li padding left:
.liste li {
padding-left: 25px;
}
And here is the screenshot of the result: http://screencast.com/t/RD3Akbot
Also, because structure changed you will have to deal with hover.
Here is the code for the hover:
.liste ul:hover + .dropdown {
display: block;
}
This says, when you hover over this ul element show next .dropdown div. So all you have to do is add .dropdown sections underneath appropriate ul section. I will add the code snippet below.
<ul> <li>A</li> </ul>
<div class="dropdown">
<div class="dropdown-content">
<li>AA</li>
<li>AB</li>
<li>AC</li>
<li>AD</li>
</div>
</div>
<ul> <li>B</li> </ul>
<div class="dropdown">
<div class="dropdown-content">
<li>AA777</li>
<li>AB777</li>
<li>AC777</li>
<li>AD777</li>
</div>
</div>
Oh, I forgot you have to declare your .dropdown display:none too. So when you hover it will display block.