html - 创建导航栏 - 将两个 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;}

或

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