Show more text when hover?

[Harris]

Is this possible?More specificaly i want to add an arrow next to a list item when i hover it.

[ShadowMage]

Of course it's possible. Anything is possible if you try hard enough. There are two main ways it can be done: one with pure CSS and one with JavaScript. Google "CSS tooltips" or "JavaScript tooltips" (depending on which one you want to use) and you should find a good number of tutorials. The advantage to the CSS method is that it will work in all browsers under pretty much any circumstances, whereas the JavaScript method obviously will not work if JavaScript is disabled. The disadvantage to the CSS method is that it's going to produce more markup but that's not really that big of an issue because the effect is pretty minimal unless you're making thousands of tooltips.

[es131245]

how about...

<style>li {background-color:blue;background-image:url('http://www.mars.com/cis/ru/assets/images/layout/flexBox_white_topLeft.jpg');background-position:center right;background-repeat:no-repeat;background-size:20px 20px;color:white;list-style-type:none;width:120px;}li:hover {background-color:#00a;background-image:url('http://www.oasis-open.org/docbook/xmlcharent/glyphs/100dpi/U003C.png');background-size:20px 20px;color:yellow;}</style> <ul><li>Main</li><li>More</li><li>Ending</li></ul> 

Ive used 2 images for background from google search. Empty white and "<" arrow. OrYou can just write "<span><</span>' andli span {color:white;}li:hover span {color:black;}but thats no good cuz your changing content for design (what is wrong)

Edited October 4, 2012 by es131245

[ShadowMage]

Yeah, I totally forgot about using background images. That would be the best option, especially if you use sprites. EDIT: But then again, that only works if you want the arrow inside the li. The options I gave you would allow it to appear outside of it.

Edited October 4, 2012 by ShadowMage

[dsonesuk]

Bit confused if you want text or arrow, if text place text in span, if arrow image of some sort define height/width and use background-image in span(remove span content, and leave it empty).

#left_nav {width:190px; }#left_nav a {background-color:#0033FF; color: #fff; display:block;height:100%; line-height:46px; font-size:36px; text-decoration:none;}#left_nav a:hover {background-color:#000099; color:#FFFF66;}#left_nav a:hover span {left:auto; right: -100px;}#left_nav a span {position:absolute; top:0; left:-99999em; color:#000; display:block;}#left_nav ul, #left_nav li{padding:0; margin:0; text-indent:0; list-style-type:none;} #left_nav li {height:46px; text-indent:10px; position:relative;}

<div id="left_nav"><ul><li><a href="#">Home<span>←</span></a></li><li><a href="#">Forum<span>←</span></a></li><li><a href="#">News<span>←</span></a></li><li><a href="#">Register<span>←</span></a></li><li><a href="#">About<span>←</span></a></li></ul></div>

Edited October 4, 2012 by dsonesuk

[es131245]

if out use position option =)

[suleone]

I write using Dreamweaver, which has Spry menus built in.

[dsonesuk]

i create menus of all sorts using notepad without javascript, only time i use javascript is when i use jquery to apply specific effect, i have no need for spry menus.