HTML / CSS Dropdown Menu

HTML / CSS Dropdown Menu

I would like to have 5 divs, inline, with the third one showing a dropdown menu beneath it when hovered on. When I hover over the third div my dropdown menu appears, but it appears to the left of the page on the next line, rather than directly beneath the third div.

HTML:

One
  
Two
  
      
          
Three              
                  Link 1
                  Link 2
                  Link 3
              
          
      
  
Four
  
Five
  

CSS:

.option {      display: inline;  }    #container {      display: inherit;  }    .onHover {      display: inline;  }    .showMenu {      display: none;      position: absolute;  }    .onHover:hover .showMenu {      display: block;  }  

Any help is appreciated.

Thanks

Answer by Ahmed Salama for HTML / CSS Dropdown Menu

First you must define the positions for the absolute elements :

.showMenu {      display: none;      position: absolute;      top:15px; // add this      left:0;   // add this  }  

and to make it on the left of specific element you must make this element position is relative

.onHover {      display: inline;      position:relative; // add this  }  

Demo: https://jsfiddle.net/9dxn0cn8/

Answer by Ken for HTML / CSS Dropdown Menu

Give relative position to the parent of absolute & then position the menu with top/left. You might also need to adjust the width or use ellipsis.

.option {      display: inline;  }    #container {      display: inherit;      position: relative;  }    .onHover {      display: inline;  }    .showMenu {      display: none;      position: absolute;      top:1em;      left:0px;      }    .onHover:hover .showMenu {      display: block;  }

One
  
Two
  
      
          
Three              
                  Link 1
                  Link 2
                  Link 3
              
          
      
  
Four
  
Five

Answer by 5n00py for HTML / CSS Dropdown Menu

In your case you need to make

.option { position: relative; }  

You need to reed about position:absolute: https://developer.mozilla.org/en-US/docs/Web/CSS/position

Also always good idea is look to some examples: http://www.w3schools.com/css/css_dropdowns.asp

Answer by raja maha for HTML / CSS Dropdown Menu

try this , i am updated in your jsfiddle

code  

Demo: https://jsfiddle.net/mhrjnsa1/jpwqcxtj/3/

Answer by sagar kodte for HTML / CSS Dropdown Menu

.option {      display: inline;  }    #container {      display: inherit;  }    .onHover {      display: inline;  }    .showMenu {      display: none;      position: absolute;      left:70px;  }    .onHover:hover .showMenu {      display: block;  }

One
  
Two
  
      
          
Three              
                  Link 1
                  Link 2
                  Link 3
              
          
      
  
Four
  
Five

Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72