PDA

View Full Version : Triangle arrow on hover



nasyitah08
Feb 22nd, 2012, 03:15 AM
Hi, I'm currently working on my left navigation. Instead of having just the flat background color, I'm supposed to add the arrow on the right when someone hovers over it. I've manage to find the arrow code, however when i add them up in my css it becomes messed up and the hover effect will continue to blink. Is there anyway to solve it?

here is the mockup on how it should look like:
http://img528.imageshack.us/img528/6108/arrowqt.png (http://imageshack.us/photo/my-images/528/arrowqt.png/)


Here is my HTML:



<html>
<head>
<title></title>
</head>

<body>
<div id="navigation">
<ul class="top-level">
<li><a href="#">Home</a>
<ul class="sub-level">
<li><a href="#">Sub Menu Item 1</a>
</li>
<li>
<a href="#">Sub Menu Item 2</a>
<ul class="sub-level">
<li><a href="#">Sub Sub Menu Item 1</a></li>
<li><a href="#">Sub Sub Menu Item 2</a></li>
<li><a href="#">Sub Sub Menu Item 3</a></li>
<li><a href="#">Sub Sub Menu Item 4</a></li>
</ul>
</li>
<li><a href="#">Sub Menu Item 3</a></li>
<li><a href="#">Sub Menu Item 3</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li>
<a href="#">FAQ</a>
<ul class="sub-level">
<li><a href="#">Sub Menu Item 1</a></li>
<li>
<a href="#">Sub Menu Item 3</a>
<ul class="sub-level">
<li><a href="#">Sub Sub Menu Item 1</a></li>
<li><a href="#">Sub Sub Menu Item 2</a></li>
<li><a href="#">Sub Sub Menu Item 3</a></li>
<li><a href="#">Sub Sub Menu Item 4</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">News</a>
<ul class="sub-level">
<li><a href="#">Sub Menu Item 1</a>
<ul class="sub-level">
<li><a href="#">Sub Sub Menu Item 1</a></li>
<li><a href="#">Sub Sub Menu Item 2</a></li>
<li><a href="#">Sub Sub Menu Item 3</a></li>
<li><a href="#">Sub Sub Menu Item 4</a></li>
</ul>
</li>
<li><a href="#">Sub Menu Item 2</a></li>
<li><a href="#">Sub Menu Item 3</a></li>
</ul>
</li>
</ul>
</div>
<div class="arrow-right"></div>
</body></html>​



Here is the CSS:



body{behavior:url(../cssHoverFix.htc);}

#navigation {
width: 150px;
font-size: 0.75em;

}
#navigation ul {
margin: 0px;
padding: 0px;
}
ul.top-level { background: #666; }

#navigation li { list-style: none; }
ul.top-level li {
border-bottom: #fff solid;
border-top: #fff solid;
border-width: 1px;
}
#navigation a {
color: #fff;
cursor: pointer;
display:block;
height:25px;
line-height: 25px;
text-indent: 10px;
text-decoration:none;
width:100%;
}
#navigation a:hover{
text-decoration:none;
margin-left: 150px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid green;
height: 15px;
width:0;
}
#navigation li:hover {
background: #0680AD;
position: relative;


}
ul.sub-level { display: none; }
li:hover .sub-level {
background: #999;
border: #fff solid;
border-width: 1px;
display: block;
position: absolute;
left: 170px;
top: -1px;
}
ul.sub-level li {
border: none;
float:left;
width:150px;
}
#navigation .sub-level { background: #999; }
#navigation .sub-level .sub-level { background: #09C; }

/*IE RESET HELPER*/
li:hover .sub-level .sub-level { display:none; }
.sub-level li:hover .sub-level { display:block; }

.arrow-right {

margin-left: 150px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid green;
line-height:0;
}​



The Red section in the CSS is the part whereby the arrow is created.

I hope someone can help me out, I've been figuring this out for dayssss.

Thanks in adv everyone! :)

Cheers

stevenmw
Feb 22nd, 2012, 05:48 PM
http://www.dynamicdrive.com/style/csslibrary/item/css_triangle_arrow_divs/

nasyitah08
Feb 23rd, 2012, 03:49 AM
got it :) thanks alot steve!