By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,723 Members | 1,662 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,723 IT Pros & Developers. It's quick & easy.

2-tiered css navigation

victorduwon
P: 32
hi guys,

I have a quick CSS question. I am trying to create a navigation menu that will display the second tier of navigation when the first tier is hovered over, similar to the way the menu is structured on this site. I do not want to use a large gif file and then shift it back and forth. I want to use plain text for the menu items, and a solid background color. I have build an unordered list but I am still stumped on how do accomplish what I want. I am new to CSS but not new to coding in general. If someone could just show me how to go about this, with a little example code, or point me in the right direction I would reallly appreciate it.

Thanks
Feb 24 '08 #1
Share this Question
Share on Google+
4 Replies


P: 15
See the following tutorial on this:

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


Best regards,
Angkana Jivaphaiboolsak
Feb 24 '08 #2

drhowarddrfine
Expert 5K+
P: 7,435
Google for Listamatic for many examples of this.
Feb 24 '08 #3

victorduwon
P: 32
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.


Expand|Select|Wrap|Line Numbers
  1. <body class="classifieds">
  2.  
  3. <div id="header">
  4.  
  5. <div id="nav_wrap">
  6.  
  7.             <ul id="sections_nav">
  8.                 <li id="home_li"><a href="#">Home</a></li>
  9.                 <li id="news_li"><a href="#">News</a></li>
  10.                 <li id="sports_li"><a href="#">Sports</a></li>
  11.                 <li id="opinion_li"><a href="#">Opinion</a></li>
  12.                 <li id="blogs_li"><a href="#">Blogs</a></li>
  13.                 <li id="lifestyle_li"><a href="#">Lifestyle</a></li>
  14.                 <li id="communities_li"><a href="#">Communities</a></li>
  15.                 <li id="apnews_li"><a href="#">A P News</a></li>
  16.                 <li id="services_li"><a href="#">Services</a></li>
  17.                 <li id="classifieds_li"><a href="#">Classifieds</a></li>
  18.                 <li id="shopping_li"><a href="#">Shopping</a></li>
  19.                 <li id="help_li"><a href="#">Help</a></li>
  20.             </ul><!-- End section_nav -->
  21.     </div><!-- End nav_wrap -->
  22.   </div>
  23.  
  24.         <div id="subnav_wrapper">
  25.  
  26.             <ul id="subnav">
  27.  
  28.  
  29.                 <span class="subnav_news">
  30.  
  31.                 <li><a href="#">The Front Page</a></li>
  32.                 <li><a href="#">Police</a></li>
  33.                 <li><a href="#">Business</a></li>
  34.                 <li><a href="#">Biz Buzz</a></li>
  35.                 <li><a href="#">Photographs</a></li>
  36.                 <li><a href="#">Obituaries</a></li>
  37.                 <li><a href="#">Weather</a></li>                
  38.                 <li><a href="#">Special Reports</a></li>
  39.                 <li><a href="#">Corrections</a></li>
  40.                 <li><a href="#">Mobile News</a></li>
  41.                 <li><a href="#">RSS</a></li>
  42.                 <li><a href="#">Search</a></li>
  43.                 <li><a href="#">Calendar View</a></li>
  44.  
  45.                 </span><!-- End subnav_news -->
  46.  
  47.  
  48.                 <span class="subnav_sports">
  49.  
  50.                 <li><a href="#">Fishing: Reel Report</a></li>
  51.                 <li><a href="#">High School Football Scoreboard</a></li>
  52.                 <li><a href="#">From the Sidelines</a></li>
  53.                 <li><a href="#">Ask Sports</a></li>
  54.                 <li><a href="#">Sports Photographs</a></li>
  55.                 <!-- End subnav_sports --></span>
  56.  
  57.  
  58.  
  59.                 <span class="subnav_opinion">
  60.  
  61.                 <li><a href="#">Letters to the Editor</a></li>
  62.                 <li><a href="#">Columns</a></li>
  63.                 <li><a href="#">Guest Columns</a></li>
  64.                 <li><a href="#">Cartoons</a></li>
  65.                 <li><a href="#">Forums</a></li>
  66.                 <li><a href="#">Write Us</a></li>
  67.                 </span><!-- End subnav_opinion -->
  68.  
  69.  
  70.  
  71.                 <span class="subnav_blogs">
  72.  
  73.                 <li><a href="#">Between The Lines</a></li>
  74.                 <li><a href="#">Blogging on the Island</a></li>
  75.                 <li><a href="#">Buzz Blog</a></li>
  76.                 <li><a href="#">Editors' Notes</a></li>
  77.                 <li><a href="#">From the Sidelines</a></li>
  78.                 <li><a href="#">On the Island, Off the Path</a></li>
  79.                 <li><a href="#">Weather Watch</a></li>
  80.                 </span><!-- End subnav_blogs -->
  81.  
  82.  
  83.                 <span class="subnav_lifestyle">
  84.  
  85.                 <li><a href="#">Food</a></li>
  86.                 <li><a href="#">Entertainment</a></li>
  87.                 <li><a href="#">Health</a></li>
  88.                 <li><a href="#">Travel</a></li>
  89.                 <li><a href="#">OurFaith</a></li>
  90.                 <li><a href="#">Announcements</a></li>
  91.                 <li><a href="#">Bulletin Board</a></li>
  92.                 </span><!-- End subnav_lifestyle -->
  93.  
  94.  
  95.                 <span class="subnav_community">
  96.  
  97.                 <li><a href="#">Bacliff</a></li>
  98.                 <li><a href="#">BayouVista</a></li>
  99.                 <li><a href="#">Bolivar</a></li>
  100.                 <li><a href="#">Clear Lake Shores</a></li>
  101.                 <li><a href="#">Dickinson</a></li>
  102.                 <li><a href="#">Friendswood</a></li>
  103.                 <li><a href="#">Galveston</a></li>
  104.                 <li><a href="#">High Island</a></li>
  105.                 <li><a href="#">Hitchcock</a></li>
  106.                 <li><a href="#">Kemah</a></li>
  107.                 <li><a href="#">La Marque</a></li>
  108.                 <li><a href="#">League City</a></li>
  109.                 <li><a href="#">Santa Fe</a></li>
  110.                 <li><a href="#">Tiki Island</a></li>
  111.                 <li><a href="#">Texas City</a></li>
  112.                 </span><!-- End subnav_community -->
  113.  
  114.  
  115.                 <span class="subnav_apnews">
  116.  
  117.                 <li><a href="#">Texas</a></li>
  118.                 <li><a href="#">Nation</a></li>
  119.                 <li><a href="#">Politics</a></li>
  120.                 <li><a href="#">Business</a></li>
  121.                 <li><a href="#">Technology</a></li>
  122.                 <li><a href="#">Sports</a></li>
  123.                 <li><a href="#">Health</a></li>
  124.                 <li><a href="#">Entertainment</a></li>
  125.                 <li><a href="#">Podcasts</a></li>
  126.                 <li><a href="#">Video</a></li>
  127.                 </span><!-- End subnav_apnews -->
  128.  
  129.  
  130.                 <span class="subnav_services">
  131.  
  132.                 <li><a href="#">Newspaper Delivery</a></li>
  133.                 <li><a href="#">Newspaper E-Edition</a></li>
  134.                 <li><a href="#">Newsstand Locations</a></li>
  135.                 <li><a href="#">Vacation Stops</a></li>
  136.                 <li><a href="#">Order Back Issues</a></li>
  137.                 <li><a href="#">Newspapers in Education</a></li>
  138.                 <li><a href="#">Reprints</a></li>
  139.                 <li><a href="#">Staff Directory</a></li>
  140.                 </span><!-- End subnav_services -->
  141.  
  142.  
  143.                 <span class="subnav_classifieds">
  144.  
  145.                 <li><a href="#">Jobs</a></li>
  146.                 <li><a href="#">Homes</a></li>
  147.                 <li><a href="#">Autos</a></li>
  148.                 <li><a href="#">All Listings</a></li>
  149.                 <li><a href="#">Service Directory</a></li>
  150.                 <li><a href="#">Place an Ad</a></li>
  151.                 </span><!-- End subnav_classifieds -->
  152.  
  153.  
  154.                 <span class="subnav_shopping">
  155.  
  156.                 <li><a href="#">Dining Guide</a></li>
  157.                 <li><a href="#">Newspaper Ads/Inserts</a></li>
  158.                 <li><a href="#">How to Advertise</a></li>
  159.                 </span><!-- End subnav_shopping -->
  160.  
  161.  
  162.                 <span class="subnav_help">
  163.  
  164.                 <li><a href="#">Dining Guide</a></li>
  165.                 <li><a href="#">Newspaper Ads/Inserts</a></li>
  166.                 <li><a href="#">How to Advertise</a></li>
  167.                 </span><!-- End subnav_help -->
  168.  
  169.             </ul><!-- End subnav -->
  170.         </div><!-- End subnav_wrapper -->
  171.  
  172. </div>
  173.  
Expand|Select|Wrap|Line Numbers
  1.  
  2.  
  3. * {
  4.     margin: 0;
  5.     padding: 0;
  6. }
  7. p {
  8.     margin-bottom: 15px;
  9. }
  10. a {
  11.     color: #40566f;
  12.     text-decoration: none;
  13. }
  14. a:hover {
  15.     text-decoration: underline;
  16.     color: #a90909;
  17.  
  18. #nav_wrap, #search {
  19.     border-left: #FCFCFC solid 1px;
  20.     border-right: #FCFCFC solid 1px;
  21. }
  22.  
  23. .clearfix:after {
  24.     content: "."; 
  25.     display: block; 
  26.     height: 0; 
  27.     clear: both; 
  28.     visibility: hidden;
  29. }
  30.  
  31. .clearfix {display: inline-block;}
  32.  
  33. /* Hides from IE-mac \*/
  34. * html .clearfix {height: 1%;}
  35. .clearfix {display: block;}
  36. /* End hide from IE-mac */
  37.  
  38. /* NAV */
  39.  
  40. #nav_wrap {
  41.     position: absolute;
  42.     bottom: 0;
  43.     left: 0;
  44.     width: 890px;
  45.     height: 26px;
  46.     background: url(/static/images/mca/bgs/nav_bg.gif) 0 0 repeat-x;
  47.     border-left: #CCC solid 1px;
  48.     border-right: #CCC solid 1px;
  49.     border-top: #CCC solid 1px;
  50. }
  51.  
  52. #header ul {
  53.     height: 26px;
  54.     list-style-type: none;
  55. }
  56.  
  57. #header ul li {
  58.     padding: 0;
  59.     margin: 0;
  60.     height: 26px;
  61.     display: block;
  62.     float: left;
  63.     text-align: center;
  64. }
  65.  
  66. #header ul li a {
  67.     display: block;
  68.     height: 26px;
  69.     padding: 0 15px;
  70.     color: #000;
  71.     font-family: Verdana, Helvetica, Arial, sans-serif;
  72.     font-size: 10px;
  73.     line-height: 26px;
  74.     font-weight: bold;
  75. }
  76.  
  77. #header ul li a:hover {
  78.     text-decoration: none;
  79.     color: #a90909;
  80. }
  81.  
  82. #sections_nav {
  83.     width: 971px;
  84.     border: #fcfcfc solid 1px;
  85.     border-bottom: none;
  86. }
  87. #sections_nav li a {
  88.     border-right: #e1e1e1 solid 1px;
  89. }
  90.  
  91. #verticals_nav {
  92.     width: 300px;
  93.     float: right;
  94. }
  95. #verticals_nav li a {
  96.     border-left: #e1e1e1 solid 1px;
  97. }
  98. .home ul li#home_li,
  99. .news ul li#news_li,
  100. .sports ul li#sports_li,
  101. .opinion ul li#opinion_li,
  102. .blogs ul li#blogs_li,
  103. .lifestyle ul li#lifestyle_li,
  104. .communities ul li#communities_li,
  105. .apnews ul li#apnews_li,
  106. .services ul li#services_li,
  107. .classifieds ul li#classifieds_li,
  108. .shopping ul li#shopping_li,
  109. .help ul li#help_li {
  110.     background: #435384;
  111.     color: #FFF;
  112.     border: none;
  113.  
  114. }
  115. .home ul li#home_li a,
  116. .news ul li#news_li a,
  117. .sports ul li#sports_li a,
  118. .opinion ul li#opinion_li a,
  119. .blogs ul li#blogs_li a,
  120. .lifestyle ul li#lifestyle_li a
  121. .communities ul li#communities_li a,
  122. .apnews ul li#apnews_li a,
  123. .services ul li#services_li a,
  124. .classifieds ul li#classifieds_li a,
  125. .shopping ul li#shopping_li a,
  126. .help ul li#help_li a {
  127.     color: #FFF;
  128. }
  129. .home #nav_wrap {
  130.     bottom: 1px;
  131.     border-bottom: #CCC solid 1px;
  132. }
  133.  
  134. /* SUB NAV */
  135. #subnav_wrapper {
  136.     margin: 1px auto 0 auto;
  137.     width: 973px;
  138.     height: 33px;
  139.     border-left: #CCC solid 1px;
  140.     border-right: #CCC solid 1px;
  141.     background-color: #0d3159;
  142.     background-image: url(subnav_bg_blue.gif);
  143.     background-repeat: repeat-x;
  144.     background-position: 0 0;
  145. }
  146. ul#subnav {
  147.     margin: 0;
  148.     width: 971px;
  149.     border: #fcfcfc solid 1px;
  150.     list-style-type: none;
  151.  
  152.  
  153.     line-height: 33px;
  154. }
  155. ul#subnav li {
  156.     display: inline;
  157.     margin-left: 15px;
  158. }
  159. ul#subnav li a {
  160.     color: #FFF;
  161.     line-height: 33px;
  162.     height: 33px;
  163.     font-size: 11px;
  164.     font-weight: bold;
  165. }
  166. ul#subnav li a:hover, .selected a {
  167.     color: #FFF;
  168.     text-decoration: underline;
  169. }
  170. ul#subnav span {
  171.     display: none;
  172. }
  173.  
  174. .home ul#subnav span.subnav_home,
  175. .news ul#subnav span.subnav_news,
  176. .sports ul#subnav span.subnav_sports,
  177. .opinion ul#subnav span.subnav_opinion,
  178. .blogs ul#subnav span.subnav_blogs,
  179. .lifestyle ul#subnav span.subnav_lifestyle,
  180. .communities ul#subnav span.subnav_communities,
  181. .apnews ul #subnav span.subnav_apnews,
  182. .services ul #subnav span.subnav_services,
  183. .classifieds ul #subnav span.subnav_classifieds,
  184. .shopping ul #subnav span.subnav_shopping,
  185. .help ul #subnav span.subnav_shopping {
  186.  
  187.     display: block;
  188. }
  189.  
  190. .home ul#subnav span.subnav_home a:hover,
  191. .news ul#subnav span.subnav_news a:hover,
  192. .sports ul#subnav span.subnav_sports a:hover,
  193. .opinion ul#subnav span.subnav_opinion a:hover,
  194. .blogs ul#subnav span.subnav_blogs a:hover,
  195. .lifestyle ul#subnav span.subnav_lifestyle a:hover,
  196. .communities ul#subnav span.subnav_communities a:hover,
  197. .apnews ul #subnav span.subnav_apnews a:hover,
  198. .services ul #subnav span.subnav_services a:hover,
  199. .classifieds ul #subnav span.subnav_classifieds a:hover,
  200. .shopping ul #subnav span.subnav_shopping a:hover,
  201. .help ul #subnav span.subnav_shopping a:hover {
  202.     display: block;
  203. }
  204.  
  205.  
  206.  
  207.  

Thanks again for the help.
Feb 24 '08 #4

P: 15
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="#">Recruitment</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
Feb 25 '08 #5

Post your reply

Sign in to post your reply or Sign up for a free account.