2-tiered css navigation

**angkana** · Feb 24 '08, 05:44 AM

See the following tutorial on this:

Stu Nicholls | CSS PLAY | CSS only menus

http://www.cssplay.co.uk/menus/

Best regards,
Angkana Jivaphaiboolsak

**drhowarddrfine** · Feb 24 '08, 05:47 AM

Google for Listamatic for many examples of this.

**victorduwon** · Feb 24 '08, 06:57 AM

thanks guys, that helped alot.

I have my first tier done and looking good, the problem, I still have, and I checked on both of the links you guys provided and could not find an example of simple two tiered navigation without boxes, or gifs on the second teir. Below the html and css I have for the menu. I have pieced it together from different sources, which is probably why it doesn't work. I want the second teir to show on hover and it just won't work.

Code:

<body class="classifieds">

<div id="header">

<div id="nav_wrap">

			<ul id="sections_nav">
				<li id="home_li"><a href="#">Home</a></li>
				<li id="news_li"><a href="#">News</a></li>
				<li id="sports_li"><a href="#">Sports</a></li>
                <li id="opinion_li"><a href="#">Opinion</a></li>
                <li id="blogs_li"><a href="#">Blogs</a></li>
                <li id="lifestyle_li"><a href="#">Lifestyle</a></li>
                <li id="communities_li"><a href="#">Communities</a></li>
                <li id="apnews_li"><a href="#">A P News</a></li>
                <li id="services_li"><a href="#">Services</a></li>
                <li id="classifieds_li"><a href="#">Classifieds</a></li>
                <li id="shopping_li"><a href="#">Shopping</a></li>
                <li id="help_li"><a href="#">Help</a></li>
			</ul><!-- End section_nav -->
	</div><!-- End nav_wrap -->
  </div>

		<div id="subnav_wrapper">
        
			<ul id="subnav">
            
            
				<span class="subnav_news">
				
				<li><a href="#">The Front Page</a></li>
				<li><a href="#">Police</a></li>
				<li><a href="#">Business</a></li>
				<li><a href="#">Biz Buzz</a></li>
				<li><a href="#">Photographs</a></li>
				<li><a href="#">Obituaries</a></li>
				<li><a href="#">Weather</a></li>				
				<li><a href="#">Special Reports</a></li>
				<li><a href="#">Corrections</a></li>
                <li><a href="#">Mobile News</a></li>
                <li><a href="#">RSS</a></li>
                <li><a href="#">Search</a></li>
                <li><a href="#">Calendar View</a></li>
             
				</span><!-- End subnav_news -->
				
                
				<span class="subnav_sports">
              
				<li><a href="#">Fishing: Reel Report</a></li>
				<li><a href="#">High School Football Scoreboard</a></li>
				<li><a href="#">From the Sidelines</a></li>
				<li><a href="#">Ask Sports</a></li>
				<li><a href="#">Sports Photographs</a></li>
				<!-- End subnav_sports --></span>
                
                
                
				<span class="subnav_opinion">
                
				<li><a href="#">Letters to the Editor</a></li>
				<li><a href="#">Columns</a></li>
				<li><a href="#">Guest Columns</a></li>
				<li><a href="#">Cartoons</a></li>
				<li><a href="#">Forums</a></li>
				<li><a href="#">Write Us</a></li>
				</span><!-- End subnav_opinion -->



				<span class="subnav_blogs">
                
				<li><a href="#">Between The Lines</a></li>
				<li><a href="#">Blogging on the Island</a></li>
				<li><a href="#">Buzz Blog</a></li>
				<li><a href="#">Editors' Notes</a></li>
				<li><a href="#">From the Sidelines</a></li>
				<li><a href="#">On the Island, Off the Path</a></li>
				<li><a href="#">Weather Watch</a></li>
				</span><!-- End subnav_blogs -->
				
                
				<span class="subnav_lifestyle">
                
				<li><a href="#">Food</a></li>
				<li><a href="#">Entertainment</a></li>
				<li><a href="#">Health</a></li>
				<li><a href="#">Travel</a></li>
				<li><a href="#">OurFaith</a></li>
				<li><a href="#">Announcements</a></li>
				<li><a href="#">Bulletin Board</a></li>
				</span><!-- End subnav_lifestyle -->
				
                
				<span class="subnav_community">
                
				<li><a href="#">Bacliff</a></li>
				<li><a href="#">BayouVista</a></li>
				<li><a href="#">Bolivar</a></li>
				<li><a href="#">Clear Lake Shores</a></li>
				<li><a href="#">Dickinson</a></li>
				<li><a href="#">Friendswood</a></li>
				<li><a href="#">Galveston</a></li>
				<li><a href="#">High Island</a></li>
				<li><a href="#">Hitchcock</a></li>
			    <li><a href="#">Kemah</a></li>
                <li><a href="#">La Marque</a></li>
                <li><a href="#">League City</a></li>
                <li><a href="#">Santa Fe</a></li>
                <li><a href="#">Tiki Island</a></li>
                <li><a href="#">Texas City</a></li>
				</span><!-- End subnav_community -->
				
                
				<span class="subnav_apnews">
                
				<li><a href="#">Texas</a></li>
                <li><a href="#">Nation</a></li>
                <li><a href="#">Politics</a></li>
                <li><a href="#">Business</a></li>
                <li><a href="#">Technology</a></li>
                <li><a href="#">Sports</a></li>
                <li><a href="#">Health</a></li>
                <li><a href="#">Entertainment</a></li>
                <li><a href="#">Podcasts</a></li>
                <li><a href="#">Video</a></li>
				</span><!-- End subnav_apnews -->
                
               
                <span class="subnav_services">
                
				<li><a href="#">Newspaper Delivery</a></li>
				<li><a href="#">Newspaper E-Edition</a></li>
				<li><a href="#">Newsstand Locations</a></li>
				<li><a href="#">Vacation Stops</a></li>
				<li><a href="#">Order Back Issues</a></li>
				<li><a href="#">Newspapers in Education</a></li>
				<li><a href="#">Reprints</a></li>
                <li><a href="#">Staff Directory</a></li>
				</span><!-- End subnav_services -->
                
                
                <span class="subnav_classifieds">
                
				<li><a href="#">Jobs</a></li>
				<li><a href="#">Homes</a></li>
				<li><a href="#">Autos</a></li>
				<li><a href="#">All Listings</a></li>
				<li><a href="#">Service Directory</a></li>
				<li><a href="#">Place an Ad</a></li>
				</span><!-- End subnav_classifieds -->
                
                
                <span class="subnav_shopping">
                
				<li><a href="#">Dining Guide</a></li>
				<li><a href="#">Newspaper Ads/Inserts</a></li>
				<li><a href="#">How to Advertise</a></li>
				</span><!-- End subnav_shopping -->
                
                
                <span class="subnav_help">
                
				<li><a href="#">Dining Guide</a></li>
				<li><a href="#">Newspaper Ads/Inserts</a></li>
				<li><a href="#">How to Advertise</a></li>
				</span><!-- End subnav_help -->

			</ul><!-- End subnav -->
		</div><!-- End subnav_wrapper -->

</div>

Code:


* {
	margin: 0;
	padding: 0;
}
p {
	margin-bottom: 15px;
}
a {
	color: #40566f;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
	color: #a90909;

#nav_wrap, #search {
	border-left: #FCFCFC solid 1px;
	border-right: #FCFCFC solid 1px;
}

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

/* NAV */

#nav_wrap {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 890px;
	height: 26px;
	background: url(/static/images/mca/bgs/nav_bg.gif) 0 0 repeat-x;
	border-left: #CCC solid 1px;
	border-right: #CCC solid 1px;
	border-top: #CCC solid 1px;
}

#header ul {
	height: 26px;
	list-style-type: none;
}

#header ul li {
	padding: 0;
	margin: 0;
	height: 26px;
	display: block;
	float: left;
	text-align: center;
}

#header ul li a {
	display: block;
	height: 26px;
	padding: 0 15px;
	color: #000;
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 10px;
	line-height: 26px;
	font-weight: bold;
}

#header ul li a:hover {
	text-decoration: none;
	color: #a90909;
}

#sections_nav {
	width: 971px;
	border: #fcfcfc solid 1px;
	border-bottom: none;
}
#sections_nav li a {
	border-right: #e1e1e1 solid 1px;
}

#verticals_nav {
	width: 300px;
	float: right;
}
#verticals_nav li a {
	border-left: #e1e1e1 solid 1px;
}
.home ul li#home_li,
.news ul li#news_li,
.sports ul li#sports_li,
.opinion ul li#opinion_li,
.blogs ul li#blogs_li,
.lifestyle ul li#lifestyle_li,
.communities ul li#communities_li,
.apnews ul li#apnews_li,
.services ul li#services_li,
.classifieds ul li#classifieds_li,
.shopping ul li#shopping_li,
.help ul li#help_li {
	background: #435384;
	color: #FFF;
	border: none;
	
}
.home ul li#home_li a,
.news ul li#news_li a,
.sports ul li#sports_li a,
.opinion ul li#opinion_li a,
.blogs ul li#blogs_li a,
.lifestyle ul li#lifestyle_li a
.communities ul li#communities_li a,
.apnews ul li#apnews_li a,
.services ul li#services_li a,
.classifieds ul li#classifieds_li a,
.shopping ul li#shopping_li a,
.help ul li#help_li a {
	color: #FFF;
}
.home #nav_wrap {
	bottom: 1px;
	border-bottom: #CCC solid 1px;
}

/* SUB NAV */
#subnav_wrapper {
	margin: 1px auto 0 auto;
	width: 973px;
	height: 33px;
	border-left: #CCC solid 1px;
	border-right: #CCC solid 1px;
	background-color: #0d3159;
	background-image: url(subnav_bg_blue.gif);
	background-repeat: repeat-x;
	background-position: 0 0;
}
ul#subnav {
	margin: 0;
	width: 971px;
	border: #fcfcfc solid 1px;
	list-style-type: none;
	

	line-height: 33px;
}
ul#subnav li {
	display: inline;
	margin-left: 15px;
}
ul#subnav li a {
	color: #FFF;
	line-height: 33px;
	height: 33px;
	font-size: 11px;
	font-weight: bold;
}
ul#subnav li a:hover, .selected a {
	color: #FFF;
	text-decoration: underline;
}
ul#subnav span {
	display: none;
}

.home ul#subnav span.subnav_home,
.news ul#subnav span.subnav_news,
.sports ul#subnav span.subnav_sports,
.opinion ul#subnav span.subnav_opinion,
.blogs ul#subnav span.subnav_blogs,
.lifestyle ul#subnav span.subnav_lifestyle,
.communities ul#subnav span.subnav_communities,
.apnews ul #subnav span.subnav_apnews,
.services ul #subnav span.subnav_services,
.classifieds ul #subnav span.subnav_classifieds,
.shopping ul #subnav span.subnav_shopping,
.help ul #subnav span.subnav_shopping {
	
	display: block;
}

.home ul#subnav span.subnav_home a:hover,
.news ul#subnav span.subnav_news a:hover,
.sports ul#subnav span.subnav_sports a:hover,
.opinion ul#subnav span.subnav_opinion a:hover,
.blogs ul#subnav span.subnav_blogs a:hover,
.lifestyle ul#subnav span.subnav_lifestyle a:hover,
.communities ul#subnav span.subnav_communities a:hover,
.apnews ul #subnav span.subnav_apnews a:hover,
.services ul #subnav span.subnav_services a:hover,
.classifieds ul #subnav span.subnav_classifieds a:hover,
.shopping ul #subnav span.subnav_shopping a:hover,
.help ul #subnav span.subnav_shopping a:hover {
	display: block;
}

Thanks again for the help.

**angkana** · Feb 25 '08, 03:57 AM

Oh.... a lot of code
i'm confused.i have example menu.i saw

code html
<div id="topnav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Our Services</a></li>
<li><a href="#">Recrui tment</a></li>
<li><a href="#">News</a></li>
</ul>
</div>

code css
#topnav {
background: #9e9e9e url(../images/bg_topnav.gif) top left repeat-x;
font-family: arial, helvetica, sans-serif;
font-size: 120%;
color: #000;
overflow: auto;
margin: 0 13px;
height: 28px;
}
* > #topnav {
height: auto
}
#topnav ul {list-style: none}

#topnav li{display: inline; }

#topnav li a {
color: #fff;
display: block;
float: left;
padding: 5px 12px 5px 12px;
background: transparent url(../images/line.gif) center right no-repeat;
}

#topnav a:hover {
color: #7ede00;
}

Best Regards,
Angkana Jivaphaiboolsak

2-tiered css navigation

2-tiered css navigation

Comment

Comment

Comment

Comment