HTML/CSS menu :hover/:active help needed

[dimitris4463]

Hello all! I have the following code for a drop down menu, I need some help now to make the hover link to have an arrow bellow the blue box, and the active link to look the same.

HTML:

<ul>
<li><a href="<?php echo url('/'); ?>">Home</a></li>

    <li><a href="<?php echo url('/about'); ?>">About</a></li>
  <li>
    <a href="">Operations</a>
      <ul>
      <li><a href="<?php echo url('/acars') ?>">Live Map</a></li>
      <li><a href="">Login</a></li>
    <li><a href="">Register</a></li>
    <li><a href="">Profile</a></li>
    </ul>
  </li>
  <li><a href="<?php echo url('/forum') ?>">Forum</a></li>
  <li><a href="<?php echo url('/contact') ?>">Contact</a></li>
</ul>

CSS:

ul {
  text-align: left;
  display: inline;
  list-style: none;
  z-index:1000;
}
ul li a {
color:#6F6F6F;
  z-index:1000;
}

ul li {
  font: bold 12px/18px sans-serif;
  display: inline-block;
  position: relative;
  padding: 10px 15px;
  background: #eeeeee;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
  -webkit-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;
    border-style: solid;
    border-width: 2px;
    border-color:#54add7;
      z-index:1000; 

    }

ul li:hover {
  background: #6ec3ed;
  color: #eeeeee;
    z-index:1000;
}

ul li ul {
  padding: 0;
  position: absolute;
  top: 48px;
  left: 0;
  width: 150px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
    z-index:1000;
}

ul li ul li { 
  background: #fff; 
  display: block; 
  color: #848484;
  text-shadow: 0 -1px 0 #000;
  -webkit-border-radius: 0 0 0 0;
border-radius: 0 0 0 0;
    border-style: solid;
    border-width: 0px;
    border-color:#54add7;
      z-index:1000;
      margin-top:-8px;
}

ul li ul li:hover { 
background: #6ec3ed;
 }

ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
  -webkit-border-radius: 0 0 0 0;
border-radius: 0 0 0 0;
  z-index:1000;
}

See the image to have a more clear view: http://s7.postimg.org/uckajf4sr/menu_problem.jpg

Thank you very much!
Dimitris

[hericles]

Not interested in just using a background image (one including the arrow) for the hovered element?
If you want to keep it as CSS3 I've seen attempts to do this where the bottom line would be broken up into four sections and transform is used on the 2nd and 3rd to rotate them and position them so they form a V. Probably worth researching as it sounds feasible.

[dimitris4463]

I tried to make it with an image but it failed, because the menu items are not width standard, some of them are twice others. I m trying with CSS3 but can make it to work... my knowledge is limited on CSS3.

Thanks!

[diafol]

If you post a mockup image of what you hope to achieve, it may help others suggest possible solutions. 'arrow below the blue box' doesn't really give much of a feel for this.

[hericles]

see link at bottom of original post

[diafol]

see link at bottom of original post

heh heh - going blind in my old age! Thank you pointing it out hericles and apologies to you dimitris4463.

[Jacques_1]

Why not make the bottom triangle into an image which can be placed as a background image on a div and positioned absolute, relative to the parent, in this case the menu item(li)? The parent would have to have position: relative, else it won't work.
You could then use one of the many css methods to center the arrow in the middle of the menu item. This div would then need to be made visible on hover of the parent. Some jQuery or JavaScript should help there?

[rpv_sen]

Below CSS will help you how to /CREATE AND HIDE THE TRIANGE/

<style>
/***CREATE AND HIDE THE TRIANGE***/

a.tooltip:before {
    z-index: 1000; /*see the support section below*/
    position: absolute; /*see the support section below*/
    content: ""; /*because there's nothing between the "" the content of the psuedo elements will be blank*/
    top: 15px; /*places the triangle 15px from the top of the link*/
    left: 0px;
    /*we want the triangle to be 14px wide and high. To do this we'll use borders - the bottom will be 14px and the colour of the triangle; the left and right will be transparent and 7px each. This creates a square 14px by 14px, by setting the left and right border as transparent we remove the sides to create the triangle*/
    border-right: 7px transparent solid;
    border-bottom: 14px #c00d3f solid; /*same colour as the top background gradient for the tooltip*/
    border-left: 7px transparent solid;
    /*hide the triangle until the link is hovered*/
    display: none;
}
/***DISPLAY THE TRIANGLE WHEN THE LINK IS HOVERED OVER***/
a.tooltip:hover:before {
    display: block;
}
</style>

[dimitris4463]

Hello! Thank you all for your replies. I thought there will be an easier way to do this but it seems that there isn't. Thank you for the code snipset, I wiil try this and come back as soon as I have news.

Again thank you all!
Dimitris