displaying <li> horizontally with lesscss - css

Question

http://lesscss.org/
I am having the same issue. I changed the display to inline, but doesn't seem to work. Could anyone please tell me as to what I am doing wrong?
ul{
width:100%;
padding: 0;
margin: 0;
li{
list-style-type: none;
float: left;
padding-left: 10px;
display: inline;
white-space: nowrap;
a{
text-decoration: none;
font-size: 16px;
letter-spacing: -1px;
color: #darkGrey;
padding-right: 6px;
&:hover{
color: #mainColor;
}
}
}

Answer 1

i think you are using LESS CSS or alike.
Try display block instead of inline.
li{
display: block;
}

Answer 2

These 2 comments apply to both LESS CSS or regular CSS
You can't declare a:hover until you declare a:link and a:visited.
You don't need both display:inline and float:left. Float is applying to block level elements, but with display:inline, you are making the <li> an inline element.

Answer 3

original answer deleted due to disambiguation over css/less-css but I decided to leave the questions due to some good comments.

Answer 4

Demo : http://plugins.amiwithyou.com/lesscss/demo.htm
As per the documentation, you need to
Link your .less stylesheets with the rel set to “stylesheet/less”:
<link rel="stylesheet/less" type="text/css" href="styles.less">
Then download less.js from the top of the page, and include it in the element of your page, like so:
<script src="less.js" type="text/javascript"></script>
Make sure you include your stylesheets before the script.
And then add the following in your styles.less file
#darkGrey:#777;
#mainColor:#333;
ul{
width:100%;
padding: 0;
margin: 0;
li{
list-style-type: none;
padding-left: 10px;
display: inline;
white-space: nowrap;
a{
text-decoration: none;
font-size: 16px;
letter-spacing: -1px;
color: #darkGrey;
padding-right: 6px;
&:hover{
color: #mainColor;
}
}
}
}
Please note that,
I have removed float:left
and
added "}" at the end