View Full Version : Ul question, lifting notes to the navigation bar

01-06-2013, 04:49 PM
Hello, I have made a navigation bar based on html ul, ul is configured in css.

I also want to add notes right bellow the links which are text, not clickable, explaining the link's purpose but I cannot attach them to the links, I cannot make them be on the next line of links. I have attached a picture explaining the problem and the need of a result:




01-06-2013, 05:14 PM
Hello Renovatio,
Would the title attribute work for you? Like this - <a href="#" title="How it works">See</a>

01-06-2013, 05:23 PM
Maybe some text positioned in a span like this -
<meta charset="UTF-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin: 0;
font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #000;
background: #fc6;
#container {
width: 800px;
padding: 100px;
margin: 0 auto;
background: #999;
li {position: relative;}
li a span {
position: absolute;
top: 45px;
left: 0;
display: none;}
li:hover span {
display: block;
<div id="container">
<li><a href="#">See<span>How it works</span></a></li>
<!--end container--></div>

01-06-2013, 07:46 PM
Dear Excavator, thank You very much I have tried it it is even nicer than I imagined my final result, but it doesnt remove the problem: I just want the notes text be closer to the link.

currently it is like:


how it works

i want it to be:

how it works

Ive tried playing in css doesnt work. it seems like CSS has an invisible line between two lines of text and it doesnt let me make it be closer..


01-06-2013, 07:54 PM
Adjust that position by changing the bit I've highlighted in red -
li a span {
position: absolute;
top: 45px;
left: 0;
display: none;

01-19-2013, 04:00 PM
Thank you excavator :)