creating navigation bar - position two li elements next to each other

Question

basically i'm trying to create a navigation bar and I'm trying to position two (and more) li elements next to each other, I've tried to figure it out but can't seem to do it???

css is below.... html is below css

don't even know whether i've laid it out correctly, if you know a tutorial or something to do the same thing let me know I've spent days figuring out how to set it up correctly......

CSS

li {
list-style-type:none;
list-style:none;
background:clear;
padding:0;
margin:0;

}

ul {
list-style-type:none;
list-style:none;
margin:0;
padding:0;
background-color:clear;
}

li.nav a {
text-align:center;
font-family:"Helvetica";
font-weight:lighter;
text-decoration:none;
display:inline;
background-color:green;
padding:10px;
margin:0;
color:#FF0;
float:none;
}

li.nav a:hover {
text-align:center;
font-family:"Helvetica";
font-weight:lighter;
text-decoration:none;
display:inline;
background-color:blue;
padding:10px;
margin:0;
color:#0FF;
}

li.sub a {
position:relative;
top:2px;
background:pink;
display:block;
margin:0;
padding:10px;
color:red;
width:100px;
}

li.sub a:hover {
position:relative;
top:2px;
background:pink;
display:block;
margin:0;
padding:10px;
color:red;
width:100px;
}

HTML

<li class="nav"><a href="#">Community</a>
<ul>
<li class="sub"><a href="#">Third Age</a></li>
<li class="sub"><a href="#">Tide Timetables</a></li>
<li class="sub"><a href="#">Schools</a></li>
<li class="sub"><a href="#">Religion</a></li>
<li class="sub"><a href="#">Clubs+Societies</a></li>
<li class="sub"><a href="#">Courses</a></li>
<li class="sub"><a href="#">The Council</a></li>
<li class="sub"><a href="#">Culture</a></li>
</ul>
</li>

<!--END OF COMMUNITY SECTION-->

<!--START OF EVENTS NAVIGATION BUTTON AND SUBMENU-->

<li class="nav"><a href="#">Events</a>
<ul>    
<li class="sub"><a href="#">Festivals</a></li>
<li class="sub"><a href="#">Family</a></li>
<li class="sub"><a href="#">Music</a></li>
<li class="sub"><a href="#">Comedy</a></li>
<li class="sub"><a href="#">Theatre</a></li>
<li class="sub"><a href="#">Exhibitions</a></li>
<li class="sub"><a href="#">Film</a></li>
<li class="sub"><a href="#">Literature</a></li>
</ul>
</li>

<!--END OF EVENTS SECTION-->

Answer 1

Try to add this lines in your css.

li.nav{display:inline-block;position:absolute;}
li.nav:nth-child(2)
{margin-left:140px;}

OR

HTML

<div class="main-navigation">
    <nav class="navigation">
        <ul>
             <li>1
                <ul class="sub-menu"><li>1a</li><li>1b</li></ul>
             </li>
             <li>2
                <ul class="sub-menu"><li>2a</li><li>2b</li></ul>
             </li>
             <li>3</li>
             <li>4</li>
        </ul>
    </nav>
</div>

CSS

nav.navigation{
width: 75%;
height:50px;

}
nav ul ul.sub-menu{
display: none;
margin-left:-40px;
margin-top:-10px;   
}

nav ul li:hover > ul.sub-menu{
display: block;
}

nav ul{
height:50px;
list-style:none;
padding: 3px 0 0 0;
position: relative;
text-transform: uppercase;
}

nav ul:after{
content:""; 
clear:both; 
display:block;
}

nav ul li{
float: left;
padding:10px 30px;
background:yellow;
margin-left:5px;
}

nav ul ul.sub-menu{
background-color: #fcfcfc; 
padding: 0;
position: absolute; 
z-index:100;
top: 100%;
}

nav ul ul.sub-menu li{
float: none; 
margin-top: -3px;
height:30px;
background-color:green; 
}

The DEMO is here

Answer 2

add float:left; to the li-items.

li
{
  float:left;
}

DEMO

Answer 3

you can use display:inline-block level property to all li element.