How to add a triangle pointer to the top of a drop menu?
Can I add css code to my existing css code to add a top pointer?
all help appreciated 
There are numerous sites available that have some very good examples.
I like this one, plain and simple:
Hello John, thank you for that page, I had it open already from a google search, and had been trying to add the css code to my existing css.
here is my existing css code:
div#usernav ul li ul {
padding: 0px;
height: auto;
position: absolute;
top: -999px;
left: -1px;
/*display: none;*/
list-style: none;
background: #ffffff;
border: 1px solid #cccccc;
border-width: 0px 1px 1px 1px; }
div#usernav ul li:hover ul,
div#usernav ul li.shover ul {
top: 36px;
left: 0px;
padding: 10px 10px 10px 10px;
width: 160px; }
John you are a genius! many thank yous 
But I still can not get it correctly added into my css code.
I get little black triangles in several places … lol … but not at the top of my drop menu …lol
div#usernav ul li ul {
padding: 0px;
height: auto;
position: absolute;
top: -999px;
left: -1px;
/*display: none;*/
list-style: none;
background: #ffffff;
border: 1px solid #cccccc;
border-width: 0px 1px 1px 1px; }
div#usernav ul li:hover ul,
div#usernav ul li.shover ul {
top: 36px;
left: 0px;
padding: 10px 10px 10px 10px;
width: 160px; }
div#usernav ul li ul li {
height: 36px;
float: none; }
div#usernav ul li ul li a {
padding: 0px 0px 0px 26px;
height: 36px;
display: block;
float: none;
font: 16px/36px verdana, arial, sans-serif;
font-weight: normal;
color: #333333;
border: 0px;
text-decoration: none;
white-space: nowrap; }
div#usernav ul li ul li a:hover {
border: 0px;
background-color: #ededed;
color: #000000; }
Many thanks for the compliments, I am far from a genius, just trial and error
I have just updated the link, try it again.
It is not easy to try your script without having a full script page or a link to your web-page.
Hi John,
Ok yes I see your update has a new style, a moving white triangle, rather than a fixed at the top of the drop triangle,
I will experiment and see what I can do … where I can get the triangle to appear !? LOL
thank you John for your humble genius
1 Like
Have you considered using a plain image? Just a thought.
We’d need to see your full css and html but here is a basic example.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
body {background:#f9f9f9;}
.navwrap {text-align:center;}
ul {
margin:0;
padding:0;
list-style:none;
}
.nav {display:inline-block;}
.nav > li {
float:left;
position:relative;
border-right:1px solid #fff;
width:200px
}
.nav > li:last-child {border:none}
.nav li a {
display:block;
padding:8px 20px;
color:#fff;
text-decoration:none;
background:#000;
}
.nav li li a {
background:#fff;
color:#000;
border-bottom:1px solid #ccc;
}
.nav li li:last-child a {border:none}
.nav li ul {
position:absolute;
left:0;
top:100%;
width:200px;
margin-left:-999em;
border:1px solid #ccc;
z-index:99;
}
.nav li:hover ul {margin-left:0}
.nav > li:hover > a {color:#f00}
.nav li li a:hover {
background:#666;
color:#fff;
}
/* the arrow */
.nav > li:hover > a:after{
content:"";
height:0;
width:0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #fff;
position:absolute;
bottom:-1px;
left:50%;
margin:0 0 0 -3px;
z-index:100;
}
</style>
</head>
<body>
<div class="navwrap">
<ul class="nav">
<li><a href="#">Menu item</a>
<ul>
<li><a href="#">Sub menu item</a></li>
<li><a href="#">Sub menu item</a></li>
<li><a href="#">Sub menu item</a></li>
<li><a href="#">Sub menu item</a></li>
<li><a href="#">Sub menu item</a></li>
<li><a href="#">Sub menu item</a></li>
<li><a href="#">Sub menu item</a></li>
</ul>
</li>
<li><a href="#">Menu item</a>
<ul>
<li><a href="#">Sub menu item</a></li>
<li><a href="#">Sub menu item</a></li>
<li><a href="#">Sub menu item</a></li>
<li><a href="#">Sub menu item</a></li>
<li><a href="#">Sub menu item</a></li>
<li><a href="#">Sub menu item</a></li>
<li><a href="#">Sub menu item</a></li>
</ul>
</li>
<li><a href="#">Menu item</a>
<ul>
<li><a href="#">Sub menu item</a></li>
<li><a href="#">Sub menu item</a></li>
<li><a href="#">Sub menu item</a></li>
<li><a href="#">Sub menu item</a></li>
<li><a href="#">Sub menu item</a></li>
<li><a href="#">Sub menu item</a></li>
<li><a href="#">Sub menu item</a></li>
</ul>
</li>
<li><a href="#">Menu item</a>
<ul>
<li><a href="#">Sub menu item</a></li>
<li><a href="#">Sub menu item</a></li>
<li><a href="#">Sub menu item</a></li>
<li><a href="#">Sub menu item</a></li>
<li><a href="#">Sub menu item</a></li>
<li><a href="#">Sub menu item</a></li>
<li><a href="#">Sub menu item</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Hello RyanReese,
I had not thought of using an image, yet an idea worth exploring, thank you
Hello PaulOB,
Thank you for all that coding, your time and example is greatly appreciated,
I will see what I can do, see If I can manage to update my css code using your example,
many thank you to all, this is a great forum
The main point is to target the top level items only and make sure that position:relative is set on the top level items and then you just position the border arrow at the bottom on hover.
.nav > li:hover > a:after{
content:"";
height:0;
width:0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #fff;
position:absolute;
bottom:-1px;
left:50%;
margin:0 0 0 -3px;
z-index:100;
}
Hello PaulOB, thank you again for this code, I almost have it working correctly … almost!
Now the problem is that all css code with an “a” attribute in the UserNav has a black pointer (see pic attached)
Black pointer at the top = yes perfect
Black pointer on “My Favorites” no not required.
You help greatly appreciated,
Here is all the css code for the NavBar:
/* ********** [ USER NAVIGATION ] ********** */
div#usernav_wrap {
margin: 0px auto;
width: 1000px;
background: #980039; }
div#usernav {
margin: 0px auto;
width: 1000px;
background: #980039;
padding: 0px 0px;
height: 40px;
border-bottom: 1px solid #980039; }
div#usernav ul {
list-style: none; }
div#usernav li {
float: left;
height: 40px;
z-index: 9999;
position: relative; }
div#usernav ul li a.outter {
padding: 8px 0px 0px 32px;
height: 30px;
display: block;
float: left;
font: bold 16px/25px arial, sans-serif;
color: #ffffff;
font-weight: normal;
text-decoration: none; }
div#usernav ul li.shover a.outter,
div#usernav ul li a.outter:hover {
text-decoration: none; }
div#usernav ul li li a {
background-repeat: no-repeat;
background-position: 5px 50%;}
div#usernav ul li.nav_logout {
float: right; }
div#usernav ul li ul {
padding: 0px;
height: auto;
position: absolute;
top: -999px;
left: -1px;
/*display: none;*/
list-style: none;
background: #ffffff;
border: 1px solid #cccccc;
border-width: 0px 1px 1px 1px; }
div#usernav ul li:hover ul,
div#usernav ul li.shover ul {
top: 40px;
left: 0px;
padding: 10px 10px 10px 10px;
width: 160px; }
div#usernav ul > li:hover > a:after{
content:"";
height:0;
width:0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #000000;
position:absolute;
bottom:-1px;
left:50%;
margin:0 0 0 -3px;
z-index:100; }
div#usernav ul li ul li {
height: 36px;
float: none; }
div#usernav ul li ul li a {
padding: 0px 0px 0px 26px;
height: 36px;
display: block;
float: none;
font: 16px/36px verdana, arial, sans-serif;
font-weight: normal;
color: #333333;
border: 0px;
text-decoration: none;
white-space: nowrap; }
div#usernav ul li ul li a:hover {
border: 0px;
background-color: #ededed;
color: #000000; }
Target only the top level.
e.g.
div#usernav > ul > li:hover > a:after{
Note the use of the child selector after #usernav. Without the child selector you will target all nested uls also.
Hello PaulOB,
Perfect! Ok all done, and working, and looking great
I learnt allot from that exercise.
Many thank yous Paul, and all who helped me
Here is a link that I found while searching, maybe helpful to others: http://apps.eky.hk/css-triangle-generator/
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.