HTML下拉菜单垂直对齐和显示/隐藏问题

Question

这就是我想要实现的目标，每当用户在列出的父类别上悬停时，它将显示其第一级子类别，如下图所示。当用户悬停父类别时，它将显示其子类别。

这是我的HTML结构加上其CSS

HTML

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

您可能会在下面的小提琴中看到代码。 https://jsfiddle.net/qnb986nd/

这是我的困境。

1. 我的代码存在的问题是PARENT位于其容器的底部（再次，请参阅我的fiddle）。
2. 另一个问题是孩子应该先被隐藏。应该显示 WHEN 父类别被用户悬停。我已尝试visibility:hidden/visible;，但它无效。

非常感谢您的帮助。

Answer 1

请查看此演示。它可以解决您的问题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>