CODEWITHSUNDEEP
htmlcss
user4491046
user4491046

Reputation:

HTML Dropdown Menu Vertical Alignment and Show/Hide Issue

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.

enter image description here

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

You may see the codes in action in the fiddle below. https://jsfiddle.net/qnb986nd/

Here's my dilemma.

  1. The problem with my code is the PARENT is sitting at the bottom (again, see my fiddle) of its container.
  2. 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.

Upvotes: 0

Views: 281

Answers (3)

Emipro Technologies Pvt. Ltd.
Emipro Technologies Pvt. Ltd.

Reputation: 14746

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>

Upvotes: 0

Fiido93
Fiido93

Reputation: 1978

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><a href="#">Home</a></li>
        <li><a href="#">Articles</a>
            <ul>
                <li><a href="#">Blogging</a></li>
                <li><a href="#">How To Guides</a></li>
                <li><a href="#">Tech</a>
                    <ul>
                        <li><a href="#">Mobile</a></li>
                        <li><a href="#">Tablet PC</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">Submit An Article</a>
            <ul>
                <li><a href="#">Your Movie</a></li>
                <li><a href="#">User Experience</a></li>
            </ul>
        </li>
        <li><a href="#">About Us</a></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. :)

Upvotes: 1

Rachel Gallen
Rachel Gallen

Reputation: 28553

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">
                    <a href="#">BPI Express Online</a>
                </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>

Upvotes: 2

Related Questions