CSS - Css-driven Menus Using Whatever:hover

Hello there
I would like to ask you a question concerning pop up menus. It turns out that I have seen some techniques which use just CSS. Nevertheless, what I usually see is techniques that use javascript to achieve this pop up menus. It seems to me that javascript might be a more simple and straightforward technique for this purpose although I do not know because I have not implemented neither of them yet.
Since I want to build a pop up menu, I would like to hear your suggestions in terms of advantages and disadvantages of css driven pop up menus against javascript menus. As far as I know, javascript is a disadvantage because it might not work sometimes when it is disabled in the browser. But, tell me your point of view, because I am sure you have lot to say about this.

Another thing that I would like to do is defining myself the shape and colors of this pop up menus so please, you can bear in mind this point for any suggestion concerning the previous paragraph.

In conclusion, bearing in ming that lot of you will have had some experience working with pop up menus, I would appreciate any sound suggestion about the best or the most standard approach to let me start working on a custom pop up menu.

If you there might be other more interesting and useful way of doing these pop up menus that is not css or javascript, please tell me as well.
I look forward your replies.
Thanks in advance.

Hey all,

I'm working on a collapsable menu thing, and the CSS is just getting ugly. I'm basically rewriting this fantastic little thing.

Code:

<dt class="m_an" onclick="javascript:show(\'m2\');">Menu 2</dt>
  <dd id="m2">
     <ul>
         <li><a href="x">M 2.1</a></li>
	 <li><a href="y">M 2.2</a></li>
    </ul>
</dd>	

<dt class="m_my" onclick="javascript:show(\'m3\');">Menu 3</dt>
  <dd id="m3">
     <ul>
         <li><a href="1">M 3.1</a></li>
	 <li><a href="2">M 3.2</a></li>
    </ul>
</dd>	

The css:
Code:

#menu {}

#menu dt 
{
	margin: 2px 0;
	height: 20px;
	line-height: 20px;
	text-align: left;
	padding-left: 10px;
	font-weight: bold;
	border: 1px solid gray;
}
#menu dd 
{
        border: 1px solid gray;
}

#menu li {
	text-align: left;
	padding-left: 20px;
	background: #fff;
}

#menu li a, #menu dt a 
{
	color: #000;
	text-decoration: none;
	display: block;
	border: 0 none;
	height: 100%;
}

#menu li a:hover, #menu dt a:hover 
{ 
        background: #eee; 
}

.m_an { background: #3cf; }
.m_my { background: #6f3; }

Now, what I'm trying to do is to get m2 and m3 (and the four or five others) to have different colored a:hovers. Thing is these pseudo-selector things screw with my head. Also, is there anyway I can fix up this rather spaghetti styled css and make it more elegant?

Thanks heaps,
Simon

Im writing a combination navigation bar and contextual layout box model for a large dynamically generated site. The contextual layout is so that i can set a variable in the appropriate markup and then have the correct collumns display. I have two problems.

#1. When I mouse over the menus and try to go down my menus they dissapear. If I take out the layout styling they work properly in both IE and Firefox.

#2. Anyway to get the menus to appear above form elements?

I would appreciate any help....

my code...

Quote:
/* default layout.php */

body {
color: #000;
background-color: #fff;
margin: 0;
}

p, h1, h2, h3, h4 {
margin: 0;
padding: 1em;
}

h2, h3, h4 {
color: #cc0000;
}

#layoutlogic-abc, #layoutlogic-ab, #layoutlogic-a {
background-color: #fff;
margin: 0 -1px;
width: 100%;
border:1px solid black;
}



#footer {
color: #000;
position: relative;
z-index: 13;
width: 100%;
}

#footer a {
color: black;
}

#layoutlogic-abc .page {
background-color: #fff;
width: auto;
border-right: 150px solid #eee;
border-left: 200px solid #eee;
}

#layoutlogic-ab .page {
background-color: #fff;
width: auto;
border-left: 200px solid #eee;
}

#layoutlogic-a .page {
background-color: #fff;
width: auto;
}

.section {
margin: 0;
width: 100%;
}

.col-a, .col-b, .col-c {
position: relative;
float: left;
padding: 2.5em;
}

.col-a a, .col-b a, .col-c a{
color: blue;
}

.col-a {
margin-right: 1px;
}

.col-b {
margin: 0 -3px 0 -2px;
}

.col-c {
margin-left: 1px;
}

#layoutlogic-abc .col-a, #layoutlogic-ab .col-a {
margin-left: -200px;
z-index: 10;
width: 200px;
padding-top: 1em;
}

#layoutlogic-abc .col-b, #layoutlogic-ab .col-b {
z-index: 20;
width: 100%;
padding-top: 1em;
border: 1px solid black;
}

#layoutlogic-abc .col-c {
color: #fff;
margin-right: -150px;
z-index: 10;
width: 150px;
padding-top: 1em;
}

#layoutlogic-a .col-b, #layoutlogic-ab .col-c, #layoutlogic-a .col-c {
display: none;
}

.floatright {
float: right;
margin: 1em 1em 0 2em;
}

.floatleft {
float: left;
margin: .8em 0 .8em 1.6em;
}

.clear {
clear: both;
}

.page > .section {
border-bottom: 1px solid transparent;
}

.garamond {font-family: garamond;}
."Times New Roman" {font-family: "Times New Roman";}
.verdana {font-family: verdana;}
.arial {font-family: arial;}
."Times New Roman" {font-family: "Times New Roman";}


and my markup:

PHP Code:
<body>
<div align="center"><h1><img src="/images/banner.gif" alt="UCWDC Banner" /></h1></div>

<div id="nav">
<ul class="level1">
 <li><a href="/home/"><?= $menu1 ?></a></li>
 <li class="submenu"><a href="/my_ucwdc/"><?= $menu2 ?></a>
   <ul class="level2">
     <li><a href="/my_ucwdc/my_account.php"><?= $menu2array[0] ?></a></li>
     <li class="submenu"><a href="/my_ucwdc/online_community.php"><?= $menu2array[1] ?></a>
       <ul class="level3">
         <li><a href="/my_ucwdc/forum.php"><?= $submenu2array[0] ?></a></li>
         <li><a href="/my_ucwdc/marketplace.php"><?= $submenu2array[1] ?></a></li>
         <li><a href="/contacts/teachers_dir.php"><?= $submenu2array[2] ?></a></li>
       </ul></li>
     <li><a href="/my_ucwdc/membership.php"><?php echo ($menu2array[2])?></a></li>
     <li><a href="/my_ucwdc/history.php"><?= $menu2array[3] ?></a></li>
     <li><a href="/contacts/officers.php"><?= $menu2array[4] ?></a></li>
     <li><a href="/contacts/regional_rep.php"><?= $menu2array[5] ?></a></li>
     <li><a href="/contacts/members_dir.php"><?= $menu2array[6] ?></a></li>
     <li><a href="/events/results.php"><?php echo($menu2array[7])?></a></li>
   </ul></li>
 <li class="submenu"><a href="/events/"><?= $menu3 ?></a>
   <ul class="level2">
     <li><a href="/events/events_by_date.php"><?= $menu3array[1] ?></a></li>
     <li><a href="/events/event_reviews.php"><?= $menu3array[2] ?></a></li>
     <li><a href="/events/results.php"><?= $menu3array[0] ?></a></li>
     <li><a href="/events/register.php"><?= $menu3array[3] ?></a></li>
   </ul></li>
 <li class="submenu"><a href="/competition/"><?= $menu4 ?></a>
   <ul class="level2">
     <li class="submenu"><a href="/rules/"><?= $menu4array[0] ?></a>
       <ul class="level3">
         <li><a href="/rules/couples.php">Couples</a></li>
         <li><a href="/rules/line.php">Line Dance</a></li>
         <li><a href="/rules/pro_am.php">Pro-Am</a></li>
         <li><a href="/rules/team.php">Team</a></li>
       </ul></li>
     <li class="submenu"><a href="/dances/"><?= $menu4array[1] ?></a>
       <ul class="level3">
         <li><a href="/dances/triple_2.php"><?= $dancesarray[0] ?></a></li>
         <li><a href="/dances/polka.php"><?= $dancesarray[1] ?></a></li>
         <li><a href="/dances/night_club.php"><?= $dancesarray[2] ?></a></li>
         <li><a href="/dances/cha_cah.php"><?= $dancesarray[3] ?></a></li>
         <li><a href="/dances/waltz.php"><?= $dancesarray[4] ?></a></li>
         <li><a href="/dances/2_step.php"><?= $dancesarray[5] ?></a></li>
         <li><a href="/dances/east_coast_swing.php"><?= $dancesarray[6] ?></a></li>
         <li><a href="/dances/west_coast_swing.php"><?= $dancesarray[7] ?></a></li>
       </ul></li>
     <li class="submenu"><a href="/music/"><?= $menu4array[2] ?></a>
       <ul class="level3">
         <li><a href="/music/release_dates.php"><?= $musicarray[0] ?></a></li>
         <li><a href="/music/music_news"><?= $musicarray[3] ?></a></li>
         <li><a href="/music/dj_forum"><?= $musicarray[2] ?></a></li>
         <li><a href="/music/music_match.php"><?= $musicarray[1] ?></a></li>
       </ul></li>
   </ul></li>
 <li class="submenu"><a href="/worlds/"><?= $menu5?></a>
   <ul class="level2">
     <li><a href="/worlds/worlds_register.php"><?= $menu5array[0] ?></a></li>
     <li><a href="/worlds/worlds_swing.php"><?= $menu5array[1] ?></a></li>
     <li><a href="/worlds/worlds_workshops.php"><?= $menu5array[2] ?></a></li>
     <li><a href="/worlds/worlds_schedule.php"><?= $menu5array[3] ?></a></li>
     <li><a href="/worlds/worlds_line.php"><?= $menu5array[4] ?></a></li>
     <li><a href="/worlds/worlds_competitors.php"><?= $menu5array[5] ?></a></li>
     <li><a href="/worlds/worlds_hotels.php"><?= $menu5array[6] ?></a></li>
     <li><a href="/worlds/worlds_sponsor.php"><?= $menu5array[7] ?></a></li>
     <li><a href="/worlds/worlds_contacts.php"><?= $menu5array[8] ?></a></li>
     <li><a href="/wolrds/worlds_updates.php"><?= $menu5array[9] ?></a></li>
   </ul></li>
 <li class="submenu"><a href="/judge/"><?= $menu6?></a>
   <ul class="level2">
     <li><a href="/judge/about_judge.php"><?= $menu6array[0] ?></a></li>
     <li><a href="/contacts/judge_pool.php"><?= $menu6array[1] ?></a></li>
     <li><a href="/judge/judge_curriculum.php"><?= $menu6array[2] ?></a></li>
   </ul></li>
 <li class="submenu"><a href="/classes/"><?= $menu8 ?></a>
   <ul class="level2">
     <li><a href="/classes/zip_code_match.php"><?= $menu8array[0] ?></a></li>
     <li><a href="/classes/classes_events.php"><?= $menu8array[1] ?></a></li>
     <li><a href="/contacts/teachers_dir.php"><?= $menu8array[2] ?></a></li>
     <li><a href="/classes/classes_judging.php"><?= $menu8array[3] ?></a></li>
   </ul></li>
 <li class="submenu"><a href="/contacts/"><?= $menu9 ?></a>
   <ul class="level2">
     <li><a href="/contacts/officers.php"><?= $menu9array[0] ?></a></li>
     <li><a href="/contacts/regional_rep.php"><?= $menu9array[1] ?></a></li>
     <li><a href="/contacts/teachers_dir.php"><?= $menu9array[2] ?></a></li>
     <li><a href="/contacts/judge_pool.php"><?= $menu9array[3] ?></a></li>
     <li><a href="/contacts/members_dir.php"><?= $menu9array[4] ?></a></li>
     <li><a href="/contacts/webmaster.php"><?= $menu9array[5] ?></a></li>
   </ul></li>
</ul>
</div>

<div id="layoutlogic-abc">
        <div class="page">
            <div class="section">
                <div class="col-a">
                <fieldset><legend>Login:</legend>
                <table width="100%" border="0">
                    <tr>
                        <td align="right">Username:</td><td align="center"><input type="text" size="10" /></td>
                    </tr>
                    <tr>
                        <td align="right">Password:</td><td align="center"><input type="password" size="10" /></td>
                    </tr>
                    <tr>    
                        <td colspan="2" align="center"><a href="#">Forgot Password?</a></td>
                    </tr>
                    <tr>
                        <td colspan="2" align="center"><a href="new-member.html">Not a Member yet?</a></td>
                    </tr>
                </table>
                </fieldset>
                <div align="center"><input type="submit" value="Login"></div>
                <hr />
                <p>left Content </p>
                <hr />
                </div>
                <div class="col-b">
                
                <div class="floatright"><img src="header2.jpg"></div>
                <p >Content</p>
                </div>
                <div class="col-c">
                <p>Content</p>
                </div>
                <div class="clear"></div>
            </div>
        </div>    
        <div id="footer"><h3>Footer</h3><p>Site Design and Maintenence by <a href="#">WestonWebWorks.com</a>.</p></div>       
    </div>              

</body>
</html> 





Thanks

Well I honestly have no idea which forum to stick this in so I'll start here? As the title says I'm trying to make a simple css tab menu, except I'm making it very difficult lol.

The problem that I'm having is not only must the tabs be able to expand and contract depending on the content/word inserted, and also if a new category is created it must create another tab. There will always be one tab present labeled home/index/etc., centered in the design.
Like this

As a new category/page is created/included via php a new tab shows and they stay centerd.
Like this

This goes on to make a total of six tabs. As of right now I was planning on using these mac style tabs for the tab images but that seems to be whats making this the most diffucult.Especially since I wanted to use a diffrent tab image for the tabs when they are selected.

This would be pretty straightforward in a table layout but I'm really trying for a completely css page. I would greatly appreciate any advice if this even sounds possible the way I described, some other way possibly, or if I'm just shooting for a pipedream.

Thanks very much in advance.

Thanks for taking the time to read my question.

I have an events page for my band. The page is layed out using tables.

I'd like to change my pages over to using css.

I'm having problems putting things where they need to go.

Can someone help?

it needs to work for both FireFox and IE

Thanks

Good Page (tables):
www.pierced.ca/pierced-events.htm

Messed up Page (css):
www.pierced.ca/pierced-eventsWithCSS.htm