HTML Dropdown Menu Vertical Alignment and Show/Hide Issue - html

Question

This is what I want to achieve, whenever the user hovers on the listed Parent Category, it will display its 1st level child category as show in the image below. When the user hovers the parent category, it will show its child category.
This is my HTML Structure plus its CSS
HTML
.categories {
padding: 0;
margin: 0;
}
.categories a {
color: #FFF !important;
text-decoration: none;
font-size: 16px;
}
.categories ul {
list-style: none;
}
.categories ul li {
background: #000;
color: #FFF;
margin-bottom: 30px;
/* REMOVE THIS*/
vertical-align: top;
}
.categories ul li a {
display: inline-block;
margin-right: 15px;
position: relative;
}
/*CHILDREN */
.categories ul li ul {
padding: 0;
width: 100% auto;
display: inline-block;
}
.categories ul li ul li {
margin: 0 15px 0 0;
}
.categories ul li ul li {
width: auto;
display: block;
position: relative;
}
<li class="categories">
ARTICLES
<ul>
<li class="cat-item cat-item-1">
BPI
<ul class='children'>
<li class="cat-item cat-item-2449">
BPI Car Loan
</li>
<li class="cat-item cat-item-2448">
BPI Credit Card
</li>
<li class="cat-item cat-item-2446">
BPI Express Online
</li>
<li class="cat-item cat-item-2450">
BPI Housing Loan
</li>
<li class="cat-item cat-item-2447">
BPI Loans
</li>
</ul>
</li>
<li class="cat-item cat-item-2451">
Tech
<ul class='children'>
<li class="cat-item cat-item-2455">
Desktop
</li>
<li class="cat-item cat-item-2454">
Laptop
</li>
<li class="cat-item cat-item-2452">
Smart Phone
</li>
<li class="cat-item cat-item-2453">
Tablet
</li>
</ul>
</li>
</ul>
</li>
You may see the codes in action in the fiddle below.
https://jsfiddle.net/qnb986nd/
Here's my dilemma.
The problem with my code is the PARENT is sitting at the bottom (again, see my fiddle) of its container.
Another issue is that the children should be hidden first. It should be shown WHEN the parent category is hovered by the user. I've tried the visibility:hidden/visible; but it's not working.
Your help is highly appreciated.

Answer 1

you can fix the parent thing easily enough with vertical-align:top
with a bit of tinkering i got it to work
Jsfiddle
.categories {
padding: 0;
margin: 0;
}
.categories a {
color:#FFF !important;
text-decoration:none;
font-size:16px;
}
.categories ul {
list-style:none;
vertical-align:top;
}
.categories ul li {
background:#000;
color:#FFF;
vertical-align:top;
}
.categories ul li a{
display:inline-block;
margin-right:15px;
position:relative;
}
/*CHILDREN */
.categories ul li ul {
padding:0;
width:100% auto;
display:none;
}
.categories ul li:hover ul {
padding:0;
width:100% auto;
margin:0!important;
display:inline-block;
}
.categories ul li:hover a {
display:inline-block;
}
.categories ul li ul:hover li{
display:block;
left:500px!important;
width:200px;
position:absolute;
}
<li class="categories">
ARTICLES
<ul>
<li class="cat-item cat-item-1">
<a href="#" >BPI</a>
<ul>
<li class="cat-item cat-item-2449">
<a href="http://localhost/wp/category/bpi/bpi-car-loan/" >BPI Car Loan</a>
</li>
<li class="cat-item cat-item-2448">
<a href="#" >BPI Credit Card</a>
</li>
<li class="cat-item cat-item-2446">
BPI Express Online
</li>
<li class="cat-item cat-item-2450">
<a href="#" >BPI Housing Loan</a>
</li>
<li class="cat-item cat-item-2447">
<a href="#" >BPI Loans</a>
</li>
</ul>
</li>
<li class="cat-item cat-item-2451">
<a href="#" >Tech</a>
<ul>
<li class="cat-item cat-item-2455">
<a href="#" >Desktop</a>
</li>
<li class="cat-item cat-item-2454">
<a href="#" >Laptop</a>
</li>
<li class="cat-item cat-item-2452">
<a href="#" >Smart Phone</a>
</li>
<li class="cat-item cat-item-2453">
<a href="#" >Tablet</a>
</li>
</ul>
</li>
</ul>
</li>

Answer 2

Like miss Rachel says fix the parent thing easily enough with vertical-align:top.
And this is how to beautify your navbar. You can take a look from my example and learn from it.
HTML
<nav style="background-color:black;">
<ul>
<li>Home</li>
<li>Articles
<ul>
<li>Blogging</li>
<li>How To Guides</li>
<li>Tech
<ul>
<li>Mobile</li>
<li>Tablet PC</li>
</ul>
</li>
</ul>
</li>
<li>Submit An Article
<ul>
<li>Your Movie</li>
<li>User Experience</li>
</ul>
</li>
<li>About Us</li>
</ul>
</nav>
CSS
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: #efefef;
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -moz-linear-gradient(top, #000 0%, #020202 100%);
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 20px;
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block; padding: 25px 40px;
color: #757575; text-decoration: none;
}
nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
nav ul ul li a:hover {
background: #4b545f;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
DEMO
Is there anything you not clear just comment. :)

Answer 3

Please check this demo. It may solve your problem JS Fiddle
CSS
.categories {
padding: 0;
margin: 0;
}
.categories a {
color:#FFF !important;
text-decoration:none;
font-size:16px;
}
.categories ul {
list-style:none;
}
.categories ul li {
background:#000;
color:#FFF;
vertical-align:top;
}
.categories ul li a{
display:inline-block;
margin-right:15px;
position:relative;
}
/*CHILDREN */
.categories ul li ul {
padding:0;
width:100% auto;
display:none;
}
.categories ul li ul{
margin:auto 50px ;
position:relative;
top:-18px;
}
.categories ul li ul li {
width:auto;
display: block;
position:relative;
}
.categories ul li:hover ul
{
display:block
}
HTML
<li class="categories">
ARTICLES
<ul>
<li class="cat-item cat-item-1">
<a href="http://localhost/wp/category/bpi/" >BPI</a>
<ul class='children'>
<li class="cat-item cat-item-2449">
<a href="http://localhost/wp/category/bpi/bpi-car-loan/" >BPI Car Loan</a>
</li>
<li class="cat-item cat-item-2448">
<a href="http://localhost/wp/category/bpi/bpi-credit-card/" >BPI Credit Card</a>
</li>
<li class="cat-item cat-item-2446">
<a href="http://localhost/wp/category/bpi/bpi-express-online/" >BPI Express Online</a>
</li>
<li class="cat-item cat-item-2450">
<a href="http://localhost/wp/category/bpi/bpi-housing-loan/" >BPI Housing Loan</a>
</li>
<li class="cat-item cat-item-2447">
<a href="http://localhost/wp/category/bpi/bpi-loans/" >BPI Loans</a>
</li>
</ul>
</li>
<li class="cat-item cat-item-2451">
<a href="http://localhost/wp/category/rock-band/" >Tech</a>
<ul class='children'>
<li class="cat-item cat-item-2455">
<a href="http://localhost/wp/category/rock-band/desktop/" >Desktop</a>
</li>
<li class="cat-item cat-item-2454">
<a href="http://localhost/wp/category/rock-band/laptop/" >Laptop</a>
</li>
<li class="cat-item cat-item-2452">
<a href="http://localhost/wp/category/rock-band/smart-phone/" >Smart Phone</a>
</li>
<li class="cat-item cat-item-2453">
<a href="http://localhost/wp/category/rock-band/tablet/" >Tablet</a>
</li>
</ul>
</li>
</ul>
</li>