Pure CSS hover menu

Question

I am trying to make an basic, preferrably no javascript, hover drop down menu for a navigational bar and it appears when it is hovered over, except it disappears when you scroll off of it. I have experimented with it and can't seem to figure out how to fix it.

Here is the code:

HTML:

<div tabindex="0" class="locations-menu" id="home-menu">
    <div class="arrow">
    </div>

    <ul class="locations-menu-content" id="locations-header">
        <br>
        <a class="button" href="location1.html">Location #1</a><br>
        <a class="button" href="location2.html">Location #2</a><br>         
        <a class="button" href="location3.html">Location #3</a><br>


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

CSS:

.button {
    font-family:"Trebuchet MS";
    font-size:14px;
    text-decoration:none;
    color:#3D3D3D;
}

.arrow {
    top:140%;
    background-color:#648FBD;
    position:absolute;
    height:50%;
    width:30%;
    opacity:0;
    visibility:hidden;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.locations-menu {
    position: absolute;
    display: inline-block;
    height:50px;
    top:3%;
    left:30%;
}

.locations-menu:before {
    content: "Locations";
    font-family:"Trebuchet MS";
    font-size:24px;
}

.locations-menu:focus {
    pointer-events: none;
}

.locations-menu:hover .arrow {
    opacity: 1;
    transition: visibility 2s;
    visibility: visible;
    pointer-events: auto;
}

.locations-menu-content:hover .locations-menu-content {
    opacity: 1;
    visibility: visible;
    pointer-events:auto;
}

.locations-menu:hover .locations-menu-content {
    opacity: 1;
    transition: visibility 2s;
    visibility: visible;
    pointer-events: auto;
}

.locations-menu-content {
    background-color:#648FBD;
    top:125%;
    left:-15%;
    position:absolute;
    z-index: 1;
    width:200%;
    height:200%;
    text-decoration:none;
    opacity: 0;
    visibility: hidden;
    z-index:2;
}

If someone would be willing to fix the code or atleast tell me what is wrong that would be nice. There is probably a simple solution to this but I again, can't seem to find it.

For those who like to see the code in action, here is the fiddle.

Thank you.

Note that this is not the way to make a proper listed menu. Use list items li and put your links a in them. — Bram Vanroy
– Bram Vanroy, Commented Jan 8, 2015 at 17:11

Alex Char · Accepted Answer · 2015-01-08 16:54:15Z

One quick fix is to add some negative margin-top to the elements that create the bubble element(.locations-menu-content and .arrow):

.button {
  font-family: "Trebuchet MS";
  font-size: 14px;
  text-decoration: none;
  color: #3D3D3D;
}
.arrow {
  top: 140%;
  background-color: #648FBD;
  position: absolute;
  height: 50%;
  width: 30%;
  opacity: 0;
  visibility: hidden;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  margin-top: -40px;
}
.locations-menu {
  position: absolute;
  display: inline-block;
  height: 50px;
  top: 3%;
  left: 30%;
}
.locations-menu:before {
  content: "Locations";
  font-family: "Trebuchet MS";
  font-size: 24px;
}
.locations-menu:focus {
  pointer-events: none;
}
.locations-menu:hover .arrow {
  opacity: 1;
  transition: visibility 2s;
  visibility: visible;
  pointer-events: auto;
}
.locations-menu-content:hover .locations-menu-content {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.locations-menu:hover .locations-menu-content {
  opacity: 1;
  transition: visibility 2s;
  visibility: visible;
  pointer-events: auto;
}
.locations-menu-content {
  background-color: #648FBD;
  top: 125%;
  left: -15%;
  position: absolute;
  z-index: 1;
  width: 200%;
  height: 200%;
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  z-index: 2;
  margin-top: -24px;
}

<div tabindex="0" class="locations-menu" id="home-menu">
  <div class="arrow"></div>
  <ul class="locations-menu-content" id="locations-header">
    <br>	<a class="button" href="location1.html">Location #1</a>
    <br>	<a class="button" href="location2.html">Location #2</a>
    <br> <a class="button" href="location3.html">Location #3</a>
    <br>
  </ul>
</div>
</div>

It works cleanly except is there any way to keep it the same distance away from the regular menu tab. With the margins it overlaps the word locations (in my Google Chrome atleast).

jmore009 · Accepted Answer · 2015-01-08 17:09:18Z

1

You can just wrap your content in a container and set height: 100%. That way the hover action takes the entire height but the content is positioned where you want it.

HTML

<div tabindex="0" class="locations-menu" id="home-menu">    
   <div class="wrapper">
      <div class="arrow"></div>
      <ul class="locations-menu-content" id="locations-header">
         <br/>
         <a class="button" href="location1.html">Location #1</a><br/>
         <a class="button" href="location2.html">Location #2</a><br/>           
         <a class="button" href="location3.html">Location #3</a><br/>           
      </ul>
   </div>
</div>

CSS

.wrapper{
   height: 100%;  
}

FIDDLE

edited Jan 8, 2015 at 17:09

answered Jan 8, 2015 at 17:03

jmore009

12.9k1 gold badge21 silver badges34 bronze badges

1 Comment

shaun Over a year ago

Thanks, it looks perfect. I don't quite know who the downvote was but I am kinda new to S.O. so I can't upvote it yet, ha. But thanks a lot.

Collectives™ on Stack Overflow

Pure CSS hover menu

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related