Learn VBA & Macros in 1 Week!

CSS - Different A:hover Values For Different Sub Menus.

Full Excel VBA Course - Beginner to Expert

Different A:hover Values For Different Sub Menus.	View Content

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

Full Excel VBA Course - Beginner to Expert

Css-driven Menus Using Whatever:hover

Similar Tutorials

View Content

hello

im very excited about your whatever:hover script http://www.xs4all.nl/~peterned/csshover.html, but im wondering if there is a way to make the css valid (according to eric meyer in "more eric meyer on css" the behavior spec isnt valid css)

instead of feeding ie through the behavior spec in the css file (that doesnt compute in other browsers), how about adding a conditional comment in the html file?

im not sure what it would look like (as im no expert) but how about ?
or maybe it needs to be some form of ?

thank you very much
rasmus
rasmus@samtaleterapi.com
www.samtaleterapi.com

Hover Property On Menus Disappears When I Mouse Over The Display Box

Similar Tutorials

View Content

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

Li:hover And A:hover Not Working Fully

Similar Tutorials

View Content

I have a drop down menu located at http://www.fieldspianos.com/new/index.php

If you hover over the menu items they turn black and white when you are right on the text but not if you are in the area surrounding it which is what I also need to occur. You can view the source on the page for the html but I will include the css below.

This is the basic layout of the menu:
Code:


<ul>
<li>About Us</li>
     <ul>
         <li><a href="#">Locations</a></li>

etc..etc..etc..

Here is the css:
Code:


/*Begin Content of drop down menu*/
a {
	outline:none;
}

* html div#dropdownmenu ul {
	float: left;
}

* {
	margin: 0;
	padding: 0;
}

div#dropdownmenu {
	float: left;
	background-color: #C8C6C6;
		font-size:11px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

div#dropdownmenu ul li {
	list-style-type: none;
	float: left;
	background-color: #000000;
	position: relative;
}

div#dropdownmenu ul li:hover {
	list-style-type: none;
	background-color: #000000;
}


/*Hides drop downs when not overed over and reveals them when they are hovered over.*/
body div#dropdownmenu ul li ul {
	display: none;
}

body div#dropdownmenu ul li:hover ul {
	display: block;
}



div#dropdownmenu ul li ul {
	margin: 0;
	width: 13em;
	position: absolute;
	left: -1px;
}

div#dropdownmenu ul li ul li {
	width: 100%;
	background-color:#bdb35e;
	color: #660000;
	border-bottom: 1px solid #000;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	padding: 3px;
}

div#dropdownmenu ul li ul li:first-child {
	border-top: 1px solid #000;
}

div#dropdownmenu ul li ul li:hover {
	color: #FFFFFF;
	background-color: #000000;
}

div#dropdownmenu ul li ul li a {
	color: #660000;
	text-decoration:none;
	outline: none;
}

div#dropdownmenu ul li ul li a:hover {
	color: #FFFFFF;
	background-color: #000000;
	text-decoration:none;
	outline: none;
}

div#dropdownmenu ul li:hover ul, div#dropdownmenu ul li ul:hover {
	display: block;
}

Any help is greatly appreciated, this seems like it would be a simple fix but I can't figure it out. Maybe I am overlooking some small detail. Thanks!

Menus?

Similar Tutorials

View Content

Hi,

I wanted to do a horizontal popout menu. I have the code and it works but I am trying to undertsand it better.
It uses a csshover.htc file which i didn't download but the thing still works fine with a ie sniffer code in it. It doesn't use any javascript which I thought it needed.

There seems a few ways to do expanding menus in css (with/without javascript)?

Menus are more complicated than they look but I would some explanation on the above points before i continue.

Css Menus In Ie (help!)

Similar Tutorials

View Content

Please help me. This is driving me crazy.

I am getting a problem in IE and I can't seem to figure out how to fix it. Of course, it works just fine in Firefox, but not IE.

In IE, go to to this page. On the horizontal drop-down menu, go to "Guides." Then scroll through the three drop-down options and back up. Notice how the 3rd level menu suddenly dissapears behind the 2nd level menu?

Here's the portion of my CSS file controling the menu:
Code:

/********** LAYOUT - HEADER **********/
#header {background: #ffffff;
         margin-top:    10px;
         margin-bottom: 25px;
         padding: 0 0 8px;}

img.headerimg {margin-left: 25px;}
	
  /** NAV - top horizontal nav **/
  #nav,
  #nav ul
    {padding: 0;
     margin: 0;
     list-style: none}

  #nav {height:1.5em;
        font: 80% arial;
        margin-top: 1em;
        margin-left: 75px;}

  #nav li {position:relative;
           float: left;
           width: auto;
           display:block;
           margin: 0;
           padding:0}

  #nav a
    {display: block;
     padding: 3px 10px 2px;
     border-bottom: 1px solid rgb(98,61,15);
     border-top: 1px solid rgb(98,61,15);}

  /************* 2nd tier *************/
  #nav li ul {width: 15em;
              position: absolute;
              left: -999em;
              background: #ffffff}

  #nav li:hover ul,
  #nav li.sfhover ul
    {left: 10px;
     z-index:55555}

  #nav li li {background:#9BCD9B;
              float:none;
              border: 1px solid rgb(98,61,15);
              border-top: none;
              padding-left: 0}

  #nav li li a,
  #nav li li a:link,
  #nav li li a:visited,
  #nav li li a:hover
    {color:#000;
     padding: 3px 10px;
     border-bottom: none;
     border-top: none;}

  #nav li li a:hover {color: #000;
                      background: #FFDAB9;}

  #nav li.active {background: #FFDAB9;}
  #nav li.active a {color: #000000}

  /************* 3rd tier *************/
  #nav li ul ul {width: 30em;
                 font-size: 100%;
                 margin-left: 7em;
                 margin-top: -.7em}

  #nav li:hover ul ul,
  #nav li.sfhover ul ul
     {left: -999em;}

  #nav li li:hover ul,
  #nav li li.sfhover ul
     {left: auto;}

  #nav li li li
             {background: #f6f6f6;
              border-top: 1px solid #fff;}

  #nav li li li a,
  #nav li li li a:link,
  #nav li li li a:visited,
  #nav li li li a:hover
    {color: #006400}

  /************* 4th tier *************/
  #nav li ul ul ul{width: 30em;}

  #nav li:hover ul ul ul,
  #nav li.sfhover ul ul ul
     {left: -999em;}

  #nav li li li:hover ul,
  #nav li li li.sfhover ul
     {left: auto;}

  #nav li li li li {background: #FFDAB9;}

  #nav li li li li a:hover {color: #000;
                            background: #9BCD9B;}

Please help me!

Thanks!

Manny

Css Menus

Similar Tutorials

View Content

Hi there.

I've become fond of the idea of non-javascript menus. I've been experimenting a little.

So with help from various sources I managed to get a simple set working.

I have this...
Code:

#menu ul li > ul { 
  display: 	none; 		
  position: 	absolute; 
  top: 		18px; 		
  left:          0;		
  width:       170px;		
}

which correctly 'hides' the sub-menu.
Then I have this
Code:

#menu ul li:hover > ul {
  display: 	block;
}

which should 'unhide' the sub-menu.

Now, because I'd had success with the menu, I thought I should now look at validating my html and css. So far, I've just looked at the html part.

My question is, why does it work with this code (which doesn't validate under Strict doctype)?
Code:

  <div id="menu">
  <ul>
    <li class="small"><a href="blah.php">About</a>
    <li>Details On...
      <ul>
        <li class="small"><a href="blah.php">Registering</a>
      </ul>
  </ul>
  </div>

and not this (which does validate)?
Code:

  <div id="menu">
  <ul>
    <li class="small"><a href="blah.php">About</a></li>
    <li>Details On...</li>
    <li>
      <ul>
        <li class="small"><a href="blah.php">Registering</a></li>
      </ul>
    </li>
  </ul>
  </div>

I'll listen to any thoughts on this, even the use (or not) of doctype strict.

Thanks for listening!
Stay JOLLY
H

Links For Tab Menus ????

Similar Tutorials

View Content

Hello does anyone have any links to good tabs tutorials I been looking at some other and most of the CSS code would not work well but I would just like some links thanks for ur time

Ie And Css Drop-down Menus

Similar Tutorials

View Content

Hi All,

I seem to have made a mistake in installing a CSS drop-down menu b/c despite my best efforts, I cannot seem to make it work in Internet Explorer.

I am using the Suckerfish method found http://www.alistapart.com/articles/dropdowns

My CSS file is here

And a sample page can be found here

Does anyone see a mistake I made? All other browsers work beautifully, so the problem must lie in the Internet Explorer hack.

? About Css Dropdown Menus

Similar Tutorials

View Content

In today's Website Development world, which kind of Drop Down menus do the pro's prefer to use, pure CSS without Javascript or CSS with Javascript?

And also, can pure CSS Drop Down menus be used in Dynamic Websites?

Thank you.

Sub Menus Disappearing

Similar Tutorials

View Content

I have this test site using CSS drop down menus, but when you scroll over, they disappear. Seems to be happening in IE9, Firefox and Chrome. Can't figure it out.

Any help would be appreciated!

Here is the script:

Code:

<head>
<title>Untitled Document</title>
<style type="text/css">
body {background-color: #FFFFFF; font-family: verdana, arial; font-size: 10pt; font-weight: bold; color: #0000ff;}
.box1 {
	width: 1000px;
	height: 600px;
	position:relative;
	left: 150px;
	top: 0px;
} 
.blue_box {
	width: 900px;
	position:absolute;
	top: 5px;
	left: 20px;
	height: 15px;
}
.box2 {
	width: 1050px;
	position:absolute;
	top: 40px;
	left: 20px;
	height: 15px;
	z-index: 2;
}
.main_image {
	position: relative;
	top: 3px;
}
.pic_box {
	width: 738px; /* 10px longer than actual jpg */
	position:absolute;
	top: 75px;
	height: 167px;
	left: 20px;
	z-index; 1;
}
.text_box1 {
	width: 738px;
	position:absolute;
	top: 218px;
	height: 159px;
	left: 26px;
	border-color: #ff0000;
}
.education_box {
	width: 881px;
	position:absolute;
	top: 321px;
	height: 350px;
	left: 21px;
}
.top_news_box {
	width: 136px;
	position:absolute;
	top: 1px;
	height: 317px;
	margin-left: 5px;
	left: 715px;
	border-color: #ff0000;
}

/*Credits: Dynamic Drive CSS Library */
/* Top menu */

.menu ul{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 12px Verdana;
list-style-type: none;
text-align: center; /*set to left, center, or right to align the menu as desired*/
}
.menu li{
display: inline;
margin: 0;
}
.menu li a{
text-decoration: none;
padding: 5px 7px;
margin-right: 5px;
border: 1px solid #778;
color: white;
background: #3282c2;
border-radius: 8px; /*w3c border radius*/
box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* w3c box shadow */
-moz-border-radius: 8px; /* mozilla border radius */
-moz-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* mozilla box shadow */
background: -moz-linear-gradient(center top, #a4ccec, #72a6d4 25%, #3282c2 45%, #357cbd 85%, #72a6d4); /* mozilla gradient background */
-webkit-border-radius: 8px; /* webkit border radius */
-webkit-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* webkit box shadow */
background: -webkit-gradient(linear, center top, center bottom, from(#a4ccec), color-stop(25%, #72a6d4), color-stop(45%, #3282c2), color-stop(85%, #357cbd), to(#72a6d4)); /* webkit gradient background */
}
.menu li a {
background: darkred;
background: -moz-linear-gradient(center top, #f5795d, #e55e3f 25%, #d02700 45%, #e55e3f 85%, #f5795d);
background: -webkit-gradient(linear, center top, center bottom, from(#f5795d), color-stop(25%, #e55e3f), color-stop(45%, #d02700), color-stop(85%, #e55e3f), to(#f5795d)); 
}
.menu li a:hover{
color: #FFFFFFF;
background:#0033CC;
}

/* Drop down menu buttons */

.blue ul {  /* For all tags under <ul> (main and sub) */
	padding: 3px 0;
	margin-left: 0;
	margin-top: 1px;
	margin-bottom: 0;
	font: bold 10pt Verdana;
	list-style-type: none;
	text-align: center; /*set to left, center, or right to align the menu as desired*/
	}
.blue li { /* Sets the properties associated with <li> */
	display: inline; /* Sets li tags horizontal(main and sub) */
	position: relative;
	margin: 0;
	}
.blue li a { /* Sets the properties associated for all anchor tags  */
	text-decoration: none;
	padding: 5px 7px;
	margin-right: 15px; /* Sets margin to 15px, which spaces out each menu button by 15px */
	border: 1px solid #778;
	color: white;
	background: #3282c2;
	border-radius: 8px; /*w3c border radius*/
	box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* w3c box shadow */
	-moz-border-radius: 8px; /* mozilla border radius */
	-moz-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* mozilla box shadow */
	background: -moz-linear-gradient(center top, #a4ccec, #72a6d4 25%, #3282c2 45%, #357cbd 85%, #72a6d4); /* mozilla gradient background */
	-webkit-border-radius: 8px; /* webkit border radius */
	-webkit-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* webkit box shadow */
	background: -webkit-gradient(linear, center top, center bottom, from(#a4ccec), color-stop(25%, #72a6d4), color-stop(45%, #3282c2), color-stop(85%, #357cbd), to(#72a6d4)); /* webkit gradient background */
	}
.blue li ul { /* Sets the properties for all li ul (sub menus). Rest is inherited */
	position: absolute; /* All settings (e.g. left, top, etc.) will be relative to the top menu buttons (non sub menu buttons) */
	left: 1px; 
	display: none; /* Blocks all sub menu tags */
	}	
.blue li:hover ul{ 
	display: block;  /* Shows all elements under each other (as opposed to next to each other) */ 
	}
.blue li:hover ul a {
	position: absolute;
	
	width: 150px;
	top: 5px; /* Amount of space the first sub menu starts from the parent button */
	border-radius: 8px;
	text-decoration: none;
	background-color: #0000FF;
	padding: 5px; /* Pads area around text 5x in all 4 directions */
	border: 1px solid #cccccc;
	border-bottom: 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9pt;
	font-weight: bold;
	color: #FFFFFF;
	}
</style>
</head>

<body>
<div class="box1">
 <div class="blue_box">
    <div class="menu">
      <ul>
        <li><a href="">Join MSSNY</a></li>
        <li><a href="">Pay Dues On Line</a></li>
        <li><a href="">Directory Questionaire</a></li>
        <li><a href="">MSSNYPAC</a></li>
        <li><a href="">Grassroots Action Center</a></li>
        <li><a href="">Member Login</a></li>
      </ul>
    </div><!-- Close menu -->
  </div><!-- Close box2 -->
 
  <div class="box2">
    <div class="blue">
      <ul> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">About MSSNY</a> 
      <ul> 
        <li><a href="#">Divisions</a></li> 
        <li><a href="#">Governance</a></li> 
        <li><a href="#">Committees</a></li> 
		<li><a href="#">Member Sections</a></li> 
        <li><a href="#">House of Delegates</a></li> 
		<li><a href="#">Position Statements</a></li> 
		<li><a href="#">By Laws</a></li> 
        <li><a href="#">Contact Us</a></li> 
      </ul> 
    </li> 
    <li><a href="#">Membership</a> 
      <ul> 
        <li><a href="#">Applications</a></li> 
        <li><a href="#">Pay Dues Online</a></li> 
        <li><a href="#">AAPI Physicians</a></li> 
        <li><a href="#">NYS Medical Directory</a></li> 
      </ul> 
    </li>
    <li><a href="#">Medical Community</a> 
      <ul> 
        <li><a href="#">County Societies</a></li> 
        <li><a href="#">Speciality Societies</a></li> 
        <li><a href="#">State Societies</a></li> 
        <li><a href="#">Ethnic Medical Associations</a></li> 
		<li><a href="#">American Medical Association</a></li> 
        <li><a href="#">NYS Department of Health</a></li> 
        <li><a href="#">Additional Medical Links</a></li> 
      </ul> 
    </li> 
	<li><a href="#">Public Health</a> 
      <ul> 
        <li><a href="#"></a></li> 
        <li><a href="#"></a></li> 
        <li><a href="#"></a></li> 
        <li><a href="#"></a></li> 
      </ul> 
    </li> 
	<li><a href="#">Physician Advocacy</a> 
      <ul> 
        <li><a href="#"></a></li> 
        <li><a href="#"></a></li> 
        <li><a href="#"></a></li> 
        <li><a href="#"></a></li> 
      </ul> 
	  <li><a href="#">Practice Resources</a> 
      <ul> 
        <li><a href="#">WCB Guidelines and Fee Schedule</a></li> 
        <li><a href="#">EHR Implementation Services</a></li> 
        <li><a href="#">CME Physicial Education</a></li> 
        <li><a href="#">MSSNY Online Library</a></li> 
      </ul> 
    </li> 
  </ul>
    </div>
    <!-- Close blue -->
  </div>
  <!-- Close blue_box -->
 
  <div class="pic_box"><img src="050211a_Original.jpg" class="main_image" width="691" height="136" border="0" />
      <!-- Close top_news_Box -->
      <div class="top_news_box">
        <p><img src="Facebook-Twitter-Linkedin.JPG" border="0" /></p>
        <p>Visit the MSSNY Blog Forum. .</p>
        <p>News of New York<br />
        Rate Card and Classifieds </p>
        <p> MSSNY eNews 6/17/11 </p>
        <p>MSSNY Legal Resources </p>
        <p> *** Members Section *** <br />
        Members: Click Here</p>
        <p> Non Members: <br />
        Browse Our Benefits Join US </p>
        <p> <br />
        </p>
    </div>
  </div>
  <!-- Close pic_box -->
  <div class="text_box1">To All New York Physicians: No Tort Reform &nbsp;&nbsp;&nbsp; HOD
    Ref. Comm. Documents &nbsp;&nbsp;&nbsp; Health Care Reform <br />
        <br />
    WCB Guidelines and Fee Schedule    6-Credit CME Course on New Workers Compensation
    <br />
    Treatment Guidelines&nbsp;&nbsp;&nbsp; <br />
    <br />
    Influenza Surveillance: How to become an ILINET Provider for 2010-11 flu
    season <br />
  </div>
  <div class="education_box"><img src="MED101014-Infection-Course-Image_1.jpg" width="263" height="219" border="0" /> <img src="MED100513-Course-Graphic.jpg" border="0" /></div>
  <!-- Close pic_box -->
</div>
</body>
</html>

Menus Appear Above An Iframe

Similar Tutorials

View Content

Can someone recommend a workaround for this issue I am having please. Rollover the top blue menus to see what i mean. There is an advert appearing in an iframe and it is blocking the drop down menus above it. Z indexes etc don't seem to help.

this is the link ( very frustrating you can't post a link - it would make things easier for people to help )

sidouglas.net/nz-tourism-guide-prototype/index.html

index.html:
Iframe source is the same as the domain; menu can appear above the iframe no problem.

index2.html:
iframe source references another domain; menu dissapears.

index3.html:
iframe source is same as domain - but references swf resources from another domain. menu dissapears.

Surely someone has faced this same issue? I am tied down to having to a situation with index2.html as there has to be a click tracking registering from another domain.

Very frustrating, please help.
Thanks.

Need Help Replacing Menus

Similar Tutorials

View Content

Hello,

I'm trying to replace one CSS nav menu with another, is there anyone who is familiar enough to assist me?

Z-index And 2 Menus.

Similar Tutorials

View Content

i have 2 menus on my page. one is a vertical sliding menu & other is a floating menu.
i want the vertical sliding menu to slide over the floating menu. i tried giving the floating menu a z-index of -2 since the vertical menu has z-index of -1. but it doesn't work coz the floating menu disappears.

the vertical menu is written with tables while the floating menu has a div tag around it. this is the style for the vertical menu
Code:

table.topnav
{position: relative; 
top: 0;
left: 0;
padding-left: 2px;
}

table.menu
{position: absolute;
bottom: 0; 
z-index: -1;
}

.pad{padding-top: 2px;}

.banner{z-index: 1;
position: relative;}

and this is the style for the floating menu
Code:

<script>
if (!document.layers)
document.write('<div id="divStayTopLeft" style="position:absolute">')
</script>

thank you
xia

Css Dynamic Menus

Similar Tutorials

View Content

Thank you for your time and assistance. I am working on building my first website in 2 years.

I am very interested in developing a good site interface with standard code that may be easily edited later. Specifically, I am interested in creating dynamic navigation menus that will be supported by as many browsers as possible. I have seen dynamic menus created with javascript, but I know I don't want to do that since some browsers do not support it/or do not have it enabled by default.

Can you comment on whether or not CSS would be a good solution to get around this problem? I have never used CSS to create menus in the past, but it seems very useful for standardizing a site interface. I am also open to other suggestions, what would you do to accomplish this task?

Css Menus Problem

Similar Tutorials

View Content

I am learning CSS and started to like it
I was trying to make an image gallery
so was just playing around with this link I got
Please see this
http://www.cssplay.co.uk/menus/tabmenu.html

When I added five more images in this, the last images ceases to display
How can I correct that

I was testing this by adding this code 5 times

<li>
<a href="#nogo">

William Turner<br />
(1775-1851)
<span>
<img src="../img/turner.jpg" alt="painting"
title="painting" />
This English painter was one of the greatest
romantic interpreters of nature in the history
of Western art and is still unrivaled in
the virtuosity of his painting of light.
</span>
</a>
</li>
I was anticipating that a scrollbar would come automatically in the browser but that dint happen
What should I do?

Horizontal Nav With Menus

Similar Tutorials

View Content

I've been grappling with this for a long while now. I pretty much have it working, except for the life of me I cannot get the drop down menus to appear under the corresponding link. position: absolute makes the menus always appear off to the left. Does anyone know what the secret is to this?

Code:

<div id="nav_wrapper">
<div id="nav_bar">
<div id="nav_content">
	<ul id="nav_ul">
	<li><a href="/">Home</a></li>
		<li><a href="/forum/">Forum</a>
			<div class="nav_subcontent">
			<ul>
			<li><a href="/forum/search.php">Search</a></li>
			<li><a href="/forum/memberlist.php">Members</a></li>
			</ul>
			</div>
		</li>
	<li><a href="#">A link without a menu</a></li>
	</ul>
</div>
</div>
</div>

Code:

/* Wrapper */
#nav_wrapper {
	clear: both;
	}
/* Bar */
#nav_bar {
	background: url('images/nav_swish_fade.jpg');
	background-repeat: repeat-x;
	height: 36px;
	}
/* All the buttons within the bar, the middle portion */
#nav_content {
	display: inline;
	margin: 0 auto;
	text-align: center;
	background: #fff;
	height: 36px;
	}
	
/* Entire unordered list */
#nav_ul {
	list-style: none;
	position: relative;
	}
/* Top level unordered list */
#nav_content ul>li {
	display: block;
	}
/* Top level unordered list links */
#nav_content ul>li a {
	display: block;
	float: left;
	
	padding: 9px;
	margin-left: 2px;
	margin-right: 2px;
	
	}
/* Menus */
.nav_subcontent {
	display: none;
	position: absolute;
	background: #222;
	
	margin-top: 8px;
	}
/* Menu link */
#nav_content .nav_subcontent a {
	display: block;
	padding: 9px 20px 9px 0;
	margin-left: -5px;
	text-align: left;
	
	min-width: 100px;
	}
	
/* Show menus */
#nav_content ul>li:hover .nav_subcontent {
	display: block;
	}

Dropdown Menus

Similar Tutorials

View Content

Hi there,

I'm trying to integrate some SEO friendly dropdown menus into an existing website design.

The trouble I'm experiencing so far is that the body of the design is aligned centre, and most of the examples I've seen thus far use absolute positioning of <div> elements (i.e. the design is left-aligned, so the designer knows to position the dropdown div X pixels).

Is there a good reference I can use for positioning my divs properly?

Thanks

Java Menus And Css

Similar Tutorials

View Content

Dear Forum,
I am designing a website using HTML and Java for the drop down menus. Although for one page this seemed ok at the begining, now I want to add links to other catagories where I only want to change the main body of the page. Up to now I have had to insert the Java script into every page I want to link to. The problem is A) The pages blink and the menu is lost while the graphics are being loaded, B) If I need to change the menus in the future I have to change all pages.
Is there a way I can use CSS to keep the consistency of the Top and sides of the page and only change the body for other pages. I can do this with frames but I prefer not to use them. The test page can be seen at http://test.kipseli.com

Thanks
Rob

Help With Css Drop Down Menus

Similar Tutorials

View Content

I am very new to this whole css thing, but am trying to get all learned about it. I think I am doing badly so far.

I am trying to make css drop-down menus, and have pulled code from all over the place, and modified it to look correct (so as to match my design comp). it is based on the suckerfish model <http://www.alistapart.com/articles/dropdowns/> and it works exactly as it should in safari, firefox (mac & pc). but doesn't work correctly at all in IE (mac or pc). I have implemented the "ie fix" with the javascript code several sites instructed me to use, and while it now sorta works (in the sense that the menus drop down), there are still problems. such as in IE on pc you can't roll down to the drop down menus, because they go away as soon as you roll off the top menu item.

in IE on mac they are messed up in a whole other way. you can roll down to them, and they don't go away as soon as you're off the top nav option, but the hover is all jacked, and the menu is broken, sending the last nav button down to the next line! aaahhh!

can anyone help me?! I'm sorry I'm so stupid and helpless, but... well. I am.

any tips/etc would be mighty appreciated!

-daniel

Selected Menus - Id Or Class?

Similar Tutorials

View Content

Hi,

Looking to make menus out of an unordered list. I want one of the menus to be highlighted when the corresponding page is being displayed. I might have more than one menu on a given page.

http://css.maxdesign.com.au/listamatic/ shows examples on how to do so. In the HTML, they use <li id="active"> to target the menu link to highlight.

If I have two menus on a given page, this would result in two identical ID's, however, they could be uniquely identified since they exist in different menu ID's. Is this a problem? Would it be better to use <li class="active"> instead of how Listamatic's use of id?

Thanks