CODEWITHSUNDEEP
css
Ruby
Ruby

Reputation: 969

CSS3 Navigation Menu

I am unable to fix these 2 issues for my menu. Using Chrome.

  1. The little left pointer arrow for the sub-sub-menu(Men,Women/Children) hides behind the list. enter image description here

This is the desired output:

enter image description here

  1. Ideally, the sub menus should appear only when hovered on the parent menu. But here, they appear even when hovered a littl away too. You can see this if you place the cursor, at about 10 px right below 'portfolio' or 20 px below 'links'

    http://jsfiddle.net/mdB9z/

    nav ul li > ul li > ul:before
 {
  content:"";
   border-style:solid;
   border-width:0 9px 9px 9px;
  border-color:transparent transparent #2c3e50 transparent;
  width:0;
  height:0;
  position:absolute;
  left:0;
  top:15px;
  -webkit-transform:rotate(270deg);
 }

Upvotes: 0

Views: 47

Answers (1)

SQRCAT
SQRCAT

Reputation: 5840

As for

1.) Arrows

It seems to be a result of the arrow element being absolutely positioned. Do you consider relative positioning an issue? Because if not, you could use that - and it works as long as you also apply a z-index (such as 1).

nav ul li > ul li > ul:before {
    position:relative;
    left:0;
    top:15px;
    z-index: 1;
}

2.) Visibility

You have to hide the element if you don't want it to trigger :hover on mouseover. Using display:block to display:none or vice-verse cancels out or rather skips CSS3 transitions, so use visibility:visible to visiblity:hidden instead.

nav ul li > ul {
    visibility: hidden;
}

nav ul li:hover > ul {
    visibility: visible;
}

See this example.

Is this what you tried to achieve?

Upvotes: 1

Related Questions