flash (macromedia): Hi

I was wondering if somebody can tell me how the drop down menus are created
on adobe website.
Is it created using Flash or fireworks???

I wanted to implement somewhat the same kind on my website.

Thanks

I have looked at that before. I was looking to see how the dropdown was placed
over a swf. I would suggest that you download Mozilla Firefox if you havn't
yet. Then find the add-ons (I think 'mozilla add on' as key words will work)
then look for the 'web developer' toolbar. It should have a lot of do-dads. On
this toolbar their are some cool tools. You can get the javascript, css, and
html without having to hunt them down in the code.

to your question. I took another look at it, and it seems to be an html nav
bar using CSS. Then I think they are using javascript for browser bugs. I
could be wrong. But thats what it looks like to me at a quick glance.

Thanks for suggestions. I downloaded the add ons for firefox.

I am trying to use CSS for drop down menus. But it works on firefox but not on
IE properly. How do I find the ways so that it works on all the browsers.

I spent weeks getting a nav bar working just right with out using javascript.
Its a hassle. What works in Firefox often does not in IE. Its just a matter of
tweeking it. Put a link to your site up and I will check it out, see if you are
on the right track.

Depak, Do you live in India or some other country? I am from india too. This
does not work in IE.
I dont have too good experience with CSS. I am new to web development
technology. I am attaching the css file.
Any suggestion is really appreciated.
Thanks

/* CSS Document */


.menu {
width:750px;
font-size:1em;
position:relative;
z-index:100;
background-color: #F0EDF8;
}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
}

.menu ul ul {
width:150px;
}

/* float the list to make it horizontal and a relative positon so that you can
control the dropdown menu positon */
.menu li {
float:left;
width:150px;
position:relative;
}

/* style the links for the top level */
.menu a, .menu a:visited {
display:block;
font-size:12px;
text-decoration:none;
font-family: "lucida console", sans-serif;
color:#fff;
width:139px;
height:30px;
border:0px solid #fff;
border-width:.5px .5px 0 0;
background-image: url(blue_bar.jpg);
padding-left:10px;
line-height:29px;
}
/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {
width:150px;
w\idth:139px;
}

/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited {
background-image:url(Images/blue_bar.jpg) bottom right no-repeat; /* this
is for a drop down from a drop down */
}

/* style the second level hover */
.menu ul ul a.drop:hover{
background-image: url(Images/blue_bar.jpg) bottom right no-repeat;
}

.menu ul ul :hover > a.drop {
background-image: url(blue_bar.jpg) bottom right no-repeat;
}


/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {
background:#e2dfa8;
}
/* style the third level hover */
.menu ul ul ul a:hover {
background:#b2ab9b;
}

/* hide the sub levels and give them a positon absolute so that they take up
no room */
.menu ul ul {
visibility:hidden;
position:absolute;
height:0;
top:31px;
left:0;
width:150px;
}
/* another hack for IE5.5 */
* html .menu ul ul {
top:30px;
t\op:31px;
}

/* position the third level flyout menu */
.menu ul ul ul{
left:150px;
top:0;
width:150px;
}
/* position the third level flyout menu for a left flyout */
.menu ul ul ul.left {
left:-150px;
}

/* style the table so that it takes no ppart in the layout - required for IE
to work */
.menu table {position:absolute; top:0; left:0;}

/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
background:#F0EDF8;
color:#000;
height:auto;
line-height:1em;
padding:5px 10px;
width:129px
/* yet another hack for IE5.5 */
}
* html .menu ul ul a{
width:150px;
w\idth:129px;
}

/* style the top level hover */

.menu :hover > a, .menu ul ul :hover > a {
color:#FF9900;
background:#949e7c; /* remove the background and tdrop down does not work */
}

.menu a:hover, .menu ul ul a:hover{
color:#FF9900;

}

/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul{
visibility:visible;
}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{
visibility:hidden;
}

/* make the third level visible when you hover over second level list OR link
*/
.menu ul :hover ul :hover ul{
visibility:visible;
}

You are creating the nav bar in a manner that is quite different than I did.
Its sort of difficult for me to understand unless I were to see it in action. I
would need to see how you are creating your ul.

I would be interested in seeing what you have, I might also point you in the
direction of a very good web site 'A list apart' They have a great tutorial on
css nav bars that you might find easier to understand than if I were just to
give you some code.

http://alistapart.com/articles/horizdropdowns/

Also, one other thing is that you might want to use a javascript hack that
helps you display your nav bars in ie6. They mention it in this article. I am
not a javascript expert and dont quite understand how it works. But it seems to.

There are 2 type of navigation menu we can find on adobe website, it looked
just like the same, but created using different way.

First type is what you can see on adobe homepage, normal content page, forum,
which I believe it has been created by manual coding (html, css, javascript,
&etc.) Anyway, you can use firework to create the background graphic, & use
dreamweaver to create something similar.

2nd type is on adobe exchange, like what you can see
http://www.adobe.com/cfusion/exchange/index.cfm?view=sn110#loc=en_us&view=sn103&
viewName=Uploads%20by%20Author&authorid=68601368&page=0&scrollPos=0&subcatid=0&s
nid=sn103&itemnumber=-1&extid=0&catid=0. It looked just like the same, but this
one created using flash.

For me, i believe Flash is much more easier :smile;

I got busy with my homeworks. But here is the link which shows problems in IE.

http://www.cs.uno.edu/~szutshi/menuDesign/index4.html

And how do I find the hack for IE?

the suckerfish dropdown (alistaparttutorial)has an IE6 hack that you can use. A
small snippit of javascript. You might want to pull apart your nav bar just a
little and base it on the tutorial. I made a link above to the site, snazy I
think.

If you want a css nav bar that works, that is the place to start. You can make
it as complicated as you want with the foundation given

Thanks for all your help. That site is really helpful.