创建导航栏 - 定位两个彼此相邻的li元素

Question

基本上，我试图创建一个导航栏，并试图将两个（和更多）li元素相邻放置，我试图它出来，但似乎无法做到这一点？

CSS低于.... HTML低于CSS

甚至不知道我是否已经正确制定出来，如果你知道一个教程或东西做同样的事情，让我知道我已经花天搞清楚如何正确设置它......

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

尝试在您的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; 
} 

的DEMO是here

Answer 2

add float：left;到li项目。

li 
{ 
    float:left; 
} 

DEMO

Answer 3

可以使用display:inline-block级属性，所有li元素。