CSS3 Navigation Menu

HTML & CSS
1

I am unable to fix this issue for my menu. Using Chrome.

The little left pointer arrow for the sub-sub-menu(Men,Women/Children) hides behind the list. (capture1.jpg)
The desired output - (capture.jpg)

Here is the css:

2

You’ve just missed a semicolon in your CSS. On line 162, add a semicolon, as shown below:

nav ul li > ul li > ul
{
 top:0;
 left:90%;
 padding:0px[COLOR="#FF0000"];[/COLOR] [COLOR="#FF0000"]/* SEMICOLON HERE! */[/COLOR]
 padding-left:13px; 
 -webkit-transition:0.3s ease-out;
 -moz-transition:0.3s ease-out;
 -ms-transition:0.3s ease-out;
 -o-transition:0.3s ease-out;
 transition:0.3s ease-out;
}
3

Ahh…How did I miss that. Thank you very much raplh. I see that there is a thin line to this pointer now. Did you observe it. I tried changing a few properties. How come the first pointer doesnt have it , but this one does.

4

Not sure what you’re referring to. I don’t see a problem. What browser are you using?

5

The gray line is cause by the way the triangle is rendered.

You can draw the triangle without using transform and it will look fine:


.triangle-left {
    width:0;
    height:0;
    border-width:9px 9px 9px 0;
    border-style:solid;
    border-color:transparent #2c3e50 transparent transparent;
}

<div class="triangle-left"></div>

If you can position the triangle behind the menu item container, you could also try this approach:


.pointerbox {
    width:14px;
    height:14px;
    background-color:#2c3e50;
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    transform:rotate(45deg);
}

<div class="pointerbox"></div>

You only need to code the rotated box once. Thereafter you just position it so half of it peeks out from under the list box in whichever direction you want it to point.

6

@Ronpat. Thank you very much.

7