Sam Teng Wong Sam Teng Wong - 6 months ago 14
HTML Question

show div element when another element is being hover

I'm going straight to the point here. what I want is when I hover to services link I want the dropdown content to show... I'm not that good when it comes to css tricks so please bear with me..

<div id="Navigation">
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="nav-container">
<ul>
<li><a href= "javacsript:(0)">Home</a></li>
<li><a href= "javacsript:(0)">Services <i class="caret"></i></a></li>
<li><a href= "javacsript:(0)">Categories <i class="caret"></i></a></li>
<li><a href= "javacsript:(0)">Shop <i class="caret"></i></a></li>

</ul>
</div>
</div>
</div>
</div>
</div>

//I want to show this one when I hover on services
<div class="row dropdown-content">
<div class="col-md-12">
<p>Hello World!</p>
</div>
</div>


so here's what I have tried so far.

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 100%;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 5;
border: 1px solid #c6c6c6;
}


#nav-container ul:hover .dropdown-content {
display: block;
}


it'll only show when I put the div inside the
<ul>
element...

thanks in advance...

I want to achieve this using css only....

Answer

You need to place that dropdown div in the services <li> with css postion properties then only you css will work to block it on hover of <li>

HTML

<div id="Navigation">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div id="nav-container">
          <ul>
            <li><a href="javacsript:(0)">Home</a></li>
            <li class="dropdown"><a href="javacsript:(0)">Services <i class="caret"></i></a>
              <div class="row dropdown-content">
                <div class="col-md-12">
                  <p>Hello World!</p>
                </div>
              </div>
            </li>
            <li><a href="javacsript:(0)">Categories <i class="caret"></i></a></li>
            <li><a href="javacsript:(0)">Shop <i class="caret"></i></a></li>

          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

 .dropdown-content {
   display: none;
   position: absolute;
   background-color: #f9f9f9;
   min-width: 100%;
   box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
   padding: 12px 16px;
   z-index: 5;
   border: 1px solid #c6c6c6;
 }

 #nav-container ul li.dropdown .dropdown-content {
   position: absolute;
   top: 100%;
   left: 0;
   width: 100%;
   display: none;
 }

 #nav-container ul li.dropdown:hover .dropdown-content {
   display: block;
 }

In this css #nav-container ul li.dropdown:hover .dropdown-content when you are writing .dropdown-content after #nav-container ul li.dropdown it means that .dropdown-content is child element of #nav-container ul li.dropdown that's why we need to put it in services <li> to let it act as a child.

Comments