Struggling to create a navigation bar with multiple li elements positioned next to each other? I've been trying to figure it out but can't seem to get it right. Anyone know of a tutorial or solution for this? Spent days working on it...
CSS code and HTML code provided below:
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-->