2-tiered css navigation

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

Subscribe Post Reply

2005

angkana

See the following tutorial on this:

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

Best regards,
Angkana Jivaphaiboolsak

Feb 24 '08 #2

drhowarddrfine

7,435

Expert 4TB

Google for Listamatic for many examples of this.

Feb 24 '08 #3

victorduwon

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

 
<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>

Expand|Select|Wrap|Line Numbers

  
* {

    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.

Feb 24 '08 #4

angkana

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

Similar topics

best way to markup navigation menus?

by: Dave Patton | last post by:

Using my About page as an example: http://members.shaw.ca/davepatton/about.html What is the best/proper way to markup a page such as this that has "the main body" and "a navigation menu"? It...

HTML / CSS

Accessibility of Docs on Win32: Navigation, Names and PyDoc

by: Veli-Pekka Tätilä | last post by:

Hi, My first post here. I've found some serious accessibility flaws in the Python 2.4 docs and wish they could be rectified over time. I'm very new to Python and initially contacted docs at python...

Python

Custom Navigation Button Woes

by: Robert Neville | last post by:

I am having some trouble with some old code revolving around custom form navigation buttons. My main form has a sub-form with these custom navigation buttons. In other words, the code should be...

Microsoft Access / VBA

Long navigation alternatives, to frames

by: Sandy.Pittendrigh | last post by:

I don't want to get into a frames discussion here. We all know they have numerous drawbacks, especially with search engine visibility. (Google, ironically, uses framesets for displaying individual...

HTML / CSS

Fails on IE?!

by: laredotornado | last post by:

Hi, Surprisingly, I can't get the drop down menus to work on PC IE 6. If you roll over "PRODUCTS", normally a drop down menu appears (on Safari and Firefox), but on PC IE, nada. ...

HTML / CSS

how to force navigation column to be same color to the bottom?

by: Paul | last post by:

I want the <div id="navigation"column to be the same color all the way to the bottom. The "background-image: url(bg_menu_tile.gif);" was a try to force it with a long 1-pixel graphic - didn't...

HTML / CSS

Navigation

by: EA | last post by:

I am sure I must be missing something about building navigation bars with CSS. Yes it is a very clever and efficient way to format navigation structures on simple one navigation level webs, i.e....

HTML / CSS

place navigation correctly

by: quartzy | last post by:

I have a strict doc type: However, I am still unsure about css. Problems I have now are to do with floating both navigation lists. I have used tables and divs, as layouts are just too difficult for...

HTML / CSS

Navigation AddNew Record woes

by: emalcolm_FLA | last post by:

Hello and TIA for your consideration. I have created several db's for a non-profit and they want custom navigation buttons to display "You are on the first record, last record, etc". With this...

Microsoft Access / VBA

CSS Image Navigation Bar Help...

by: tom59593 | last post by:

Hi there. I have been attempting (for a few days on end, sadly) to get a navigation section of my new site to work. Granted, this is the first time I've ever written CSS...although I had PLENTY of...

HTML / CSS

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General