|
CSS - Pulldown Menu Trouble In Ie 6 Sp2
Hello.
My site works fine in Firefox 3 of course not sure about IE 7 but in IE 6 the menus bar links are not dropping down ie About Us, Services ect. What did I miss? Site Link Matt Similar TutorialsHey I'm having some trouble with the website I'm trying to make. I got a css style pulldown menu, but the pulldown part can't be seen because its on the top frame of a frameset. Is there a way to make the pulldown extend over the edge of the frame? Hey Guys, I'm switching over from a completely javascripted and clunky menu system to htmldog/alistapart's Son of Suckerfish CSS pulldown menu. (ref: http://www.htmldog.com/articles/suckerfish/dropdowns/ ) Now, I'm having trouble with the new menu sitting behind other properties on my pages; namely other form-pulldowns. Can you suggest anything that might correct this - I've tried z-indexing the pulldowns but that doesn't seem to do the trick!? Check this out at : http://www.pps.org/gps/ - pass your cursor over Placemaking Tools. Note - this seems to be a problem I'm noticing with IE6; in Mozilla/Firefox everything works alright. Cheers, Qasim Virjee pps.org qasim.ca (personal) Hello, I currently have a site (left aligned) that has its own Javascript pulldown menu. Its is pretty standard with the sub-menu's being in their own layer and are shown on mouseover. My problem is that these sub-menus are currently set at an absolute left position (CSS) but, if centered, will appear in different places at different resolutions. Does anyone know if its possible to anchor a layer to a point from something on a different z-index? I did a search on the forums here and found a similar question but no responses. Thanks guys! Hi, I got the menu the working the way I want, except I can't get the last two on the menu to be bold becasue they are like Multimodal Corridor Planning, a category with articles under it. Here is the link: http://www.greatstreetsstlouis.net/...d=32&Itemid=204 I just need to get Site Planning to be bold, and then Choices & Guidelines. I have to use CSS as well, becasue the menu is done through Joomla and is dynamic. I need those last two titles to behave the same way when clicked on like Multimodal Corridor Planning does. Thank you. Here is the code: Code: .extmenu .modulebdr div div div #mainlevel {
font:.8em/14px Verdana,sans-serif;
}
.extmenu .modulebdr div div div #mainlevel li a.mainlevel_active {
background: url(../images/bullet_arrow_down.gif) left center no-repeat;
padding-left:11px;
color:#2E69BF;
font-weight:bold;
}
.extmenu .modulebdr div div div #mainlevel li a.mainlevel_current {
background: url(../images/bullet_arrow_down.gif) left center no-repeat;
padding-left:11px;
color:#000000;
}
.extmenu .modulebdr div div div #mainlevel li a.sublevel_active {
background: url(../images/bullet_arrow_down.gif) left center no-repeat;
padding-left:11px;
color:#2E69BF;
font-weight:bold;
}
.extmenu .modulebdr div div div #mainlevel li a.sublevel_current {
background: url(../images/bullet_arrow_right.gif) left center no-repeat;
padding-left:9px;
color:#000000;
}
.extmenu .modulebdr div div div #mainlevel li a.sublevel {
padding-left:9px;
}
.extmenu .modulebdr div div div #mainlevel .sublevel_active ul li a.sublevel{
color:#666666;
margin-left:14px;
}
.extmenu .modulebdr div div div #mainlevel li .sublevel_active {
padding:0;
}
.extmenu .modulebdr div div div #mainlevel li .sublevel_active .sublevel_active {
margin-left:11px;
}
.extmenu .modulebdr div div div #mainlevel li .sublevel_active .sublevel_current {
margin-left:10px;
}
.extmenu .modulebdr div div div ul {
list-style-type: none;
padding-left: 0;
margin-left: 0;
}
.extmenu .modulebdr div div div #mainlevel li .sublevel_current {
margin-left:8px;
}
.extmenu .modulebdr div div div #mainlevel li .sublevel {
margin-left:7px;
}
Hi, I've been at this for some time now. Currently building a site (development address: mainline.divsharp.com). Menu (left) was Javascript, its now CSS. Works fine in Chrome, Firefox and IE 8, but IE 7 is acting extremely strange. You can see the desired effect if you use a recent version of one of those browsers. When I pull it up in IE 7 on the homepage, I can't hover over the popup like I can in the other, more compliant browsers. It either hides the pane as soon as the mouse gets off the main menu link, or when the mouse leaves the picture once its over the pane. If I then click on, say, "Market Watch" and try to view the menu on an interior page, its even more erratic. I'm about at the end of what I know or can look up how to do here.. If I can get the mouse over some part of the popout pane, it seems that if its over the content area of a div and not padding or margins, it stays open. For example, over the picture or over the grey area to the right... This might suggest something to someone.. Unfortunately, the markup is clogged at best and my style is all over the place. Site is built in Wordpress and is a custom theme. Hopefully this will help: Home page style sheet: mainline.divsharp.com/wp-content/themes/mainline/style.css Interior page style sheet: mainline.divsharp.com/wp-content/themes/mainline/interior.css In those stylesheets, there isn't much discernible organization, but the pieces relating to this problem are near the id's labeled menu_bg in the middle and at the very bottom is where the hover effects are. The popout is achieved like this: Code:
<li id="popout_hov">
<div id="popout">code for menu pane</div>
</li>
#popout_hov #popout {
visibility: none;
}
#popout_hov:hover #popout {
visibility: visible;
}
Thanks. tomm[.]bnesfinest[.]net/underattackwebsite/test/menu.html tomm[.]bnesfinest[.]net/underattackwebsite/test/menu.css For some reason, it refuses to rollover... in the actual site I've tried implementing it, all of them come up in the secondary start (black text, blue bg) rather than the default state (white text, transparent bg). Neither times does it actually "rollover". What am I doing wrong? Code from: webvamp[.]co[.]uk/blog/coding/graphical-css-rollover-menu/#example I've been developing a content management system, and one of the final things I have to clean up is a stylesheet problem involving the float property. I'm trying to position two boxes next to each other id: menu and id: content, but until I set the width property on content it would drop beneath menu. I want the content box to fill any remaining space to the right of the menu, with appropriate padding and spacing and such. Can anyone help make suggestions as to the best way of achieving this? Here is some of my css code which is also viewable on the website which is located at: 8< snip >8 Code:
#container
{
margin: 1em 4em 1em 4em;
/* width: 750px; dynamic width */
text-align: left;
background: #FFFFCC;
border: 2px solid black;
}
#menu
{
float: left;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 20px;
margin-right: 20px;
font-family: Verdana;
font-size: 12px;
width: 150px;
display: inline;
}
#content
{
float: right;
width: 20em;
margin-top: 0px;
margin-right: 20px;
margin-bottom: 0px;
/* margin-left: 170px; */
padding-top: 5px;
padding-left: 20px;
padding-bottom: 20px;
border-left: 2px solid black;
height: 100%;
}
Thanks for trying to help, I've been getting really frustrated trying to get css to work in both ie and firefox. BTW: I've been finding the Web Developer firefox extension very helpful for this kind of work. I've created my first attempt at a pure CSS drop-down menu using an AlistApart article as a guide. It works great in Firefox, but in IE the menu's are reloading the background image and the list bullet images each time you move to a new link in the drop down. The page is here Any ideas? Here is the CSS for the Menu (not cleaned up so pardon it's rag-tagness): Code: ul {
padding: 0;
margin: 0;
list-style: none;
}
/* First Level */
li {
float: left;
position: relative;
width: 10em;
}
li#first {
border-left-width: 2px;
}
li#last {
border-right-width: 2px;
}
/* Second Level -- Drop Downs */
li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background: url(../images/backgroundvert.gif) bottom left no-repeat;
padding: 3px 0 3px 8px;
border-right: solid 1px #777777;
}
/* Reset for all non-IE Browswers*/
li > ul {
top: auto;
left: auto;
}
/* Show Second Level when First Level is Rolled Over */
li:hover ul, li.over ul{ display: block; }
a {
text-decoration: none;
}
a:link {
color: #080;
}
a:visited {
color: #790;
}
a:active {
color: red;
}
a:hover {
text-decoration: underline;
}
#nav a {
font-weight: bold;
color: #149AF1;
font-size:13px;
}
#nav a {
text-decoration: none;
}
/* Drop Down Menu Links */
#nav li li a {
display: block;
font-weight: normal;
color: #149AF1;
padding: 0.2em 10px 0 15px;
background-image:url(../images/bullet.gif);
background-repeat:no-repeat;
}
#nav li li a:hover {
padding: 0.2em 10px 0 15px;
background-image:url(../images/bullet2.gif);
background-repeat:no-repeat;
text-decoration: underline;
}
#navs {
border:1px 0 0 0;
border-right: 0;
width: 100%;
padding-left:4px;
height:20px;
padding-top:3px;
}
.nonlink {
font-weight: bold;
color: #149AF1;
font-size:13px;
cursor:default;
}
Hi, I'm breaking my head over IE6.0: adjusted this page and it now works at least in IE 5.0, 5.5, Opera, Firefox but in IE6.0 the damn thing doesn't align vertical in a right way and the menu doesn't scroll with the page anymore. Anybody who can tell me what's upsetting IE6.0? I don't have a clue no more. Cheers, Ziggy Hello! I'm hoping someone can help me out here. I'm sure it's something simple I'm overlooking, but I've trialed-and-errored it enough and it's time to seek help! I'm trying to adjust the location of the "main menu" on this page he http://www.jeditemplearchives.com/hasbrodb/welcome.php Currently, it is set in reference to the side of the browser in this CSS code: Code: .menuContainer
{
position: absolute;
top:113px;
right:210px;
margin: 10px;
margin-top: 50px;
}
I've tried making the position relative but it really whacks out the page when I do that. I want to make it relative to the border of the content so that no matter what size resolution or if the browser is minimized it stays fixed and doesn't float left. I was able to do this to the links directly above it, but the same thing doesn't seem to work for this. Here's the code for the 'advanced' and 'login' links: Code: #header ul.headerLinks
{
list-style-type: none;
margin: 0px;
padding: 10px;
position: absolute;
right: 0px;
top: 95px;
white-space: nowrap;
}
Thanks for any suggestions anyone comes up with! Hello. After days of searching, I have found my ideal menu system. I am trying to mimic it with some minor changes, due to the layout I already have for my website. I think the biggest problem is the fact that my second level drop down menu needs to be contained inside my first level menu boxes. These boxes also expand based on screen width. Here is the barebones version of Stu Nicholl's 'Simple Drop Down Menu': Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Welcome!</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css">
/* remove the bullets, padding and margins from the lists */
.menu ul{
list-style-type:none;
padding:0;
margin:0;
}
/* make the top level links horizontal and position relative so that we can position the sub level */
.menu li{
float:left;
position:relative;
z-index:100;
}
/* use the table to position the dropdown list */
.menu table{
position:absolute;
border-collapse:collapse;
z-index:80;
left:-1px;
top:25px;
}
/* style all the links */
.menu a, .menu :visited {
display:block;
font-size:10px;
width:149px;
padding:7px 0;
color:#000;
background:#949e7c;
text-decoration:none;
margin-right:1px;
text-align:center;
}
/* style the links hover */
.menu :hover{
color:#444;
background:#d4d8bd;
}
/* hide the sub level links */
.menu ul ul {
visibility:hidden;
position:absolute;
width:149px;
height:0;
}
/* make the sub level visible on hover list or link */
.menu ul li:hover ul,
.menu ul a:hover ul{
visibility:visible;
}
</style>
</head>
<body>
<div class="menu">
<ul>
<li><a href="../menu/index.html">DEMOS<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>
<li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li>
<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
<li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
<li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>
<li><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></li>
<li><a href="../menu/bodies.html" title="fun with background images">fun backgrounds</a></li>
<li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li>
<li><a href="../menu/em_images.html" title="em size images compared">em sized images</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="index.html">MENUS<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
<li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
<li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
<li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
<li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
<li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
<li><a href="circles.html" title="circular links">circular links</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="../layouts/index.html">LAYOUTS<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li>
<li><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li>
<li><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li>
<li><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li>
<li><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="../boxes/index.html">BOXES<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
<li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
<li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
<li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
<li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
<li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
<li><a href="circles.html" title="circular links">circular links</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="../mozilla/index.html">MOZILLA<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li>
<li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li>
<li><a href="../mozilla/content.html" title="Using content:">content:</a></li>
<li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li>
<li><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li>
<li><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue</a></li>
<li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li>
<li><a href="../mozilla/splittext.html" title="Two tone headings">two tone headings</a></li>
<li><a href="../mozilla/shadow_text.html" title="Shadow text">shadow text</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
</body>
</html>
And here is my implementation of it. I was thinking the problem could be with the absolute positioning, but I really don't know anymore... Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Welcome!</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style>
html {
margin:0;
padding:0;
}
body {
margin: 0;
padding: 5px;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 76%;
background-color: #eee;
color: #000;
}
.clear {
clear:both;
font-size:0;
line-height:0;
}
/* Top Navigation */
#topNav {
margin: 10px 0px;
border: 1px solid #ff0;
}
#searchBox {
margin: 0;
padding: 0;
float: left;
width: 150px;
height: 125px;
border: 1px solid #000;
background: #fff;
text-align: center;
}
#nav {
margin: 0px 0px 0px 155px;
padding: 0;
border: 1px solid #0f0;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
}
#nav li {
margin-left: 8px;
float: left;
/*
position: relative;
z-index: 100;
*/
display: inline;
width: 23%;
height: 125px;
border: 1px solid #000;
background-color: #235;
background-repeat: no-repeat;
background-position: 50% 100%;
}
#nav table {
/*
position:absolute;
z-index:80;
*/
border-collapse: collapse;
left: -1px;
top:25px;
}
#nav a {
display: block;
font-size: 1.5em;
color: #FFF;
background: #c7013f;
text-decoration: none;
text-align: center;
}
#nav ul li:hover a, #nav ul a:hover {
background-color: #235;
}
#nav ul ul {
margin: 0;
padding: 0;
visibility: hidden;
border: 1px solid #0f0;
/*
position: absolute;
*/
}
#nav ul ul li {
margin: 0 auto;
height: 1em;
width: 95%;
}
#nav ul li:hover ul, #nav ul a:hover ul{
visibility: visible;
}
</style>
<!--[if lte IE 6]>
<style type="text/css">
#searchBox {
margin-right:-3px;
}
#nav {
margin-left:8px;
height:1%;
}
</style>
<![endif]-->
</head>
<body>
<div id="topNav">
<!-- Search Box -->
<div id="searchBox">
Welcome, <b>John Doe</b>!
[<a href="#">Admin</a>] [<a href="#">Sign Out</a>]
<form action="" name="search">
<input type="text" size="14" name="searchQuery" />
<input type="submit" value="Search" />
</form>
</div>
<div id="nav">
<ul>
<li>
<a href="#">Foundation<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li>
<a href="#">Charter</a>
</li>
<li>
<a href="#">Committee</a>
</li>
<li>
<a href="#">Schedule</a>
</li>
<div class="clear"> </div>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<a href="#">Volunteer<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li>
<a href="#">Charter</a>
</li>
<li>
<a href="#">Committee</a>
</li>
<li>
<a href="#">Schedule</a>
</li>
<div class="clear"> </div>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<a href="#">Submission<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li>
<a href="#">Charter</a>
</li>
<li>
<a href="#">Committee</a>
</li>
<li>
<a href="#">Schedule</a>
</li>
<div class="clear"> </div>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<a href="#">Recipients<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li>
<a href="#">Charter</a>
</li>
<li>
<a href="#">Committee</a>
</li>
<li>
<a href="#">Schedule</a>
</li>
<div class="clear"> </div>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<div class="clear"> </div>
</ul>
<div class="clear"> </div>
</div>
</div>
</body>
</html>
Sorry for the lengthy code, but it was the simplest way to explain my exact situation. Thanks for any help you can give me! I am having problems with my xhtml (css here). As you can see, the frog is pushing the menu (vert1 in the css) down. I am also told that the news (vert2) is being pushed down in IE6...can anyone help? Was referred to Suckerfish and find it very useful but I cannot figure out how to center the menu line on the screen (inside a table or not). Oddly, it automatically centers in IE but not Chrome or Firefox. Any suggestions? Thanks in advance!! I can post an example of what I mean but don't want to violate the new users guidelines. I would like to align left images so that they touch against each other. Here is a capture of my problem. dollhedz.com/test [CODE] <style type="text/css"> body{ background-color:#000033; color:#00cc33; } #wrapper{ background-color:#000000; margin:15px auto 0px; width:700px; height:800px; } #sitenav{ background-image:url(sitegrax/sitenavback.jpg); background-repeat: no-repeat; height:55px; padding-left:213px; border: 0px; margin:0px; text-align:left; } #one{ float:left; text-align:left; align:left; margin:0px; padding:0px; } </style> </head> <body> <div id="wrapper"> <div id="banner"><img src="sitegrax/banner.jpg" alt=" yellow Jacket dodging a 355 smoothbore slug" border="0" /> </div> <div id="sitenav" > <div id="one"><a href=""><img src="sitegrax/bt_game_nav.jpg" alt="site navigation games" border="1" /></a> <a href="" align="left"><img src="sitegrax/bt_history_nav.jpg" alt="site navigation history" border="1" /></a> <a href=""><img src="sitegrax/bt_pilot_nav.jpg" alt="site navigation pilot"border="1" /></a></div> </div> </div> </body> </code> Problem: There is a 5 to 6 pixel space between each image that I would like gone. The 1px border around each image is there to show the edge of each image. thank you for your time Hey guys, Here's my problem: http://www.3rdcoastpc.com/moonstoys/ Basically I want the menu in the rounded rectangle area, not underneath (outside) of it. You can see what's happening in the URL. If I use a span tag instead of a div in the head_content class, the background (the right corner of the rounded rectangle) doesn't show. I'm not sure what's going on here because in my HTML I'm putting the <ul> tags right after the logo image, so I would think that it would sit next to the logo and not underneath it. I'm just confused as this is my first attempt at doing a tableless design. Here's my css: http://www.3rdcoastpc.com/moonstoys/main.css and the HTML: http://www.3rdcoastpc.com/moonstoys/index.html Thanks in advance! Dustin I've been trying to make a "pop-up" window with CSS which works great for the most part, except in IE when there is a form pull-down menu behind it. For some reason in IE it just sticks right through the top z-indexed layer: Following sample is from http://www.code-couch.com/jeff/snippets/general/tektips-navigation-example.html is what I am trying to reference to create a template. But how do I how keep the state of Menu on each requested page any help is appreciated. The following menu is saved in a separate jsp file i.e. navs.jsp. I include this navigation jsp file in all of my files. Initially the drop down looks like: Code: . Ask.Jeeves . [+] Google.com . [+] Yahoo.com Now clicking [+] in front of Google.com will look like. Code:
. Ask.Jeeves
. [-] Google.com
. Google.co.ie
. Google.co.ie
. [+] Google.co.nz
. [+] Yahoo.com
Lets's say now if I click on Google.co.ie it takes me to sample.jsp and on this requested page (sample.jsp) how can I show the following menu hierarchy with Google.co.ie bold/underlined/colorchanged showing what menu content I clicked and am viewing the appropriate content i.e. Code:
. Ask.Jeeves
. [-] Google.com
. Google.co.ie
. Google.co.ie
. [+] Google.co.nz
. [+] Yahoo.com
Same way clicking Google.com or Yahoo.com or Ask.Jeeves shows you the following hierarchy on the requested page with higlight/bold/colored the link we just selected. i.e. Code: . Ask.Jeeves . [+] Google.com . [+] Yahoo.com Any time clicking on the menu takes me to some page but on that page I want to show th hierarchy of the menu all the way to which is recently clicked with different color setting. Here is the source for the above: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<meta http-equiv="content-language" content="en"/>
<title>Test Harness</title>
<style type="text/css">
ul li ul {display:none;list-style-type: none;}
#myNav li a:hover {
color: blue;
}
#myNav li a:active {
color: #FF0000;
background: #FFFFFF;
}
#myNav { list-style-image: url(page.GIF); }
</style>
<script type="text/javascript">
<!--
function initNav() {
var navObj = document.getElementById('myNav');
var ulCollection = navObj.getElementsByTagName('li');
for (var loop = 0; loop < ulCollection.length; loop++) {
if(ulCollection[loop].getElementsByTagName('ul').length > 0) {
/* we have an LI that contains a UL */
if (ulCollection[loop].getElementsByTagName('span').length > 0) {
/* there is at least one SPAN tag present */
ulCollection[loop].getElementsByTagName('span')[0].innerHTML = "[<a href=\"javascript://\" onclick=\"this.innerHTML=this.innerHTML=='+'?'-':'+';temp=this.parentNode.parentNode.getElementsByTagName('ul')[0].style;temp.display=temp.display=='block'?'none':'block';\">+</a>] ";
}
}
}
}
window.onload = initNav;
//-->
</script>
</head>
<body>
<ul id="myNav">
<li><a href="http://www.askjeeves.com">Ask.Jeeves</a></li>
<li><span></span><a href="http://www.google.com">Google.com</a>
<ul>
<li><a href="http://www.google.co.uk">Google.co.uk</a></li>
<li><a href="http://www.google.co.ie">Google.co.ie</a></li>
<li><span></span><a href="http://www.google.co.nz">Google.co.nz</a>
<ul>
<li>*3*</li>
<li>*4*</li>
</ul>
</li>
</ul>
</li>
<li><span></span><a href="http://www.yahoo.com">Yahoo.com</a>
<ul>
<li><a href="http://www.yahoo.co.uk">Yahoo.co.uk</a></li>
<li><a href="http://www.yahoo.co.nz">Yahoo.co.nz</a></li>
</ul>
</li>
</ul>
</body>
</html>
Any help is really appreciated thanks. EDIT:: Simplier way to write the question ^.^ :: When I scroll off the menu/link onto the first link in the submenu it stays, but when I mvoe down to the next item in the submenu it disappears. (My drop down is vertically aligned on the left.) (bits of the code that relate to the menu) PHP Code: .btn1 { position: absolute; left: 165px; top: 200px; } .btn2 { position: absolute; left: 165px; top: 240px; } .btn3 { position: absolute; left: 165px; top: 280px; } .btn4 { position: absolute; left: 165px; top: 320px; } .btn5 { position: absolute; left: 165px; top: 360px; } .btn6 { position: absolute; left: 165px; top: 400px; } .btn7 { position: absolute; left: 165px; top: 440px; } .btn8 { position: absolute; left: 165px; top: 480px; } .link1 { position: absolute; left: auto; top: 240px; } .link2 { position: absolute; left: auto; top: 280px; } .link3 { position: absolute; left: auto; top: 320px; } .link4 { position: absolute; left: auto; top: 360px; } .link5 { position: absolute; left: auto; top: 400px; } .link6 { position: absolute; left: auto; top: 440px; } .link7 { position: absolute; left: auto; top: 480px; } .link8 { position: absolute; left: auto; top: 520px; } .link9 { position: absolute; left: auto; top: 560px; } #nav, #nav ul { padding: 0; margin: 0; list-style: none; } #nav a { display: block; width: 100px; } #nav li { width: 100px; } #nav li ul { position: absolute; width: 100px; left: -9999px; display: none; top: 0; z-index: 3; } #nav li:hover ul { display: block; left: 266px; z-index: 3; } #nav li:over ul { display: block; left: 266px; z-index: 3; } PHP Code: <ul id="nav"> <li><a href="HOBmain.htm"><img class="btn1" src="../mainbtn.gif" width="100" height="38" alt="MainBtn"></a></li> <li><a href="HOBmain.htm"><img class="btn2" src="../blogbtn.gif" width="100" height="38" alt="BlogBtn"></a> <ul> <li class="link1"><a href=""><img src="../mbtn.gif" alt="bMainBtn"></a></li> <li class="link2"><a href="#"><img src="../anmbtn.gif" alt="bAnimeBtn"></a></li> <li class="link3"><a href="#"><img src="../mgabtn.gif" alt="bMangaBtn"></a></li> <li class="link4"><a href="#"><img src="../gmebtn.gif" alt="bGameBtn"></a></li> <li class="link5"><a href="#"><img src="../bookbtn.gif" alt="bBookBtn"></a></li> </ul> </li> <li><a href="HOBmuse.htm"><img class="btn3" src="../musebtn.gif" width="100" height="38" alt="MuseBtn"></a> <ul> <li class="link2"><a href="HOBmuse.htm"><img src="../mbtn.gif" alt="mMainBtn"></a></li> <li class="link3"><a href="HOBmuse.htm"><img src="../pmbtn.gif" alt="mPoemBtn"></a></li> <li class="link4"><a href="HOBmuse.htm"><img src="../stybtn.gif" alt="mStoryBtn"></a></li> <li class="link5"><a href="HOBmuse.htm"><img src="../drmbtn.gif" alt="mDreamBtn"></a></li> </ul> </li> <li><a href="HOBodd.htm"><img class="btn4" src="../oddbtn.gif" width="100" height="38" alt="ComicBtn"></a> <ul> <li class="link3"><a href="HOBodd.htm"><img src="../mbtn.gif" alt="cMainBtn"></a></li> </ul> </li> <li><a href="HOBart.htm"><img class="btn5" src="../artbtn.gif" width="100" height="38" alt="ArtBtn"></a> <ul> <li class="link4"><a href="HOBart.htm"><img src="../mbtn.gif" alt="aMainBtn"></a></li> <li class="link5"><a href="HOBart.htm"><img src="../recbtn.gif" alt="aRecentBtn"></a></li> <li class="link6"><a href="HOBart.htm"><img src="../gaibtn.gif" alt="aGaiaBtn"></a></li> </ul> </li> <li><a href="HOBpic.htm"><img class="btn6" src="../picbtn.gif" width="100" height="38" alt="PicsBtn"></a> <ul> <li class="link5"><a href="HOBpic.htm"><img src="../mbtn.gif" alt="pMainBtn"></a></li> <li class="link6"><a href="HOBpic.htm"><img src="../recbtn.gif" alt="pRecentBtn"></a></li> </ul> </li> <li><a href="HOBfaq.htm"><img class="btn7" src="../faqbtn.gif" width="100" height="38" alt="FaqBtn"></a></li> <li><a href="HOBcon.htm"><img class="btn8" src="../contactbtn.gif" width="100" height="38" alt="ContactBtn"></a> </li> </ul> <script type="text/javascript" src="drop_down.js"></script> the "nav" is referring to a bit of js, and this is in my header. Also not sure if it's correct, but I can worry about that later. link: The Page I'm helping these fine folks fix a few little issues with their site but this one I can't seem to quite figure out. If you roll over the main menu you will see the sub menu slide down on the left. For the life of me I can't get it to line up under the main nav. I've tried many, many things. Can anyone provide a few hints, tips, suggestions? Thanks so much!!! 98.214.188.71/life at excel.htm Code: /*******************menu starts********************/ #menu{float:left; width:100%; background:#ffffff;} #menu a{font-weight:bold; line-height:16px;} #menu table{float:left; width:100%; background:transparent;} #menu .menu01{width:147px;} #menu .menu01 a{float:left; /*width:149px;*/width:100%; height:26px; background:url(images/menu01.gif) no-repeat right 0; float:left; color:#fff; text-decoration:none; text-align:center; padding:10px 0 0 0} #menu .menu01 a.current{float:left; /*width:149px;*/width:100%; height:26px; background:url(images/menu01.gif) no-repeat right 0; cursor:pointer;} #menu .divider{width:.5%; height:36px; background:url(images/white_divider.gif) repeat-x 0 1px;} #menu .menu02{} #menu .menu02 a{display:block; background:url(images/menu02.gif) repeat-x right 0; padding:10px 0 0; height:26px; color:#fff; text-decoration:none; text-align:center} #menu .menu02 a.current{float:left; width:100%; background:url(images/menu02.gif) no-repeat right bottom; color:#fff; cursor:pointer;} #menu .menu03{} #menu .menu03 a{display:block; background:url(images/menu03.gif) repeat-x right 0; padding:10px 0 0; text-align:center; height:26px; color:#fff; text-decoration:none;} #menu .menu03 a.current{float:left; width:100%; background:url(images/menu03.gif) no-repeat right bottom; height:26px; color:#fff; cursor:pointer;} #menu .menu04{width:152px; } #menu .menu04 a{float:left; /*width:152px;*/width:100%; background:url(images/menu04.gif) no-repeat right 0; padding:10px 0 0; text-align:center; height:26px; color:#fff; text-decoration:none;} #menu .menu04 a.current{float:left; /*width:152px;*/width:100%; background:url(images/menu04.gif) no-repeat right bottom; height:26px; color:#fff; cursor:pointer;} #menu .menu05{width:143px;} #menu .menu05 a{float:left; /*width:143px;*/ width:100%;background:url(images/menu05.gif) no-repeat right 0; padding:10px 0 0; text-align:center; height:26px; color:#fff; text-decoration:none;} #menu .menu05 a.current{float:left; /*width:143px;*/width:100%; background:url(images/menu05.gif) no-repeat right -43px; height:26px; color:#fff; cursor:pointer;} .exp{ display:none; clear:both; text-align:center; background:#BA8747; z-index:4; } #menu DIV.sub-mlinks A { color:#000; background:none; font-weight:bold; padding-top:2px; padding-bottom:0px; display:block; height:auto; } #menu DIV.sub-mlinks A:hover{ color:#FFF; } /*******************menu ends********************/ <div id="menu"> <table align="center" border="0" cellpadding="0" cellspacing="0" width="970"><tbody><tr> <td style="width: 19.6%;" id="item1" class="menu01"><a href="http://www.excelfoundry.net/lifeatexcel/">Home</a></td> <td class="divider"> </td> <td style="width: 19.6%;" id="item2" class="menu02" onmouseover="expand(this.id, 'menu2');" onmouseout="collapse(this.id, 'menu2');" onmouseleave="collapseIE(this.id, 'menu2');"><a href="http://www.excelfoundry.net/lifeatexcel/">Excel Tools</a><div id="menu2" class="exp" onmouseout="collapse('item2', this.id);" onmouseleave="collapseIE('item2', this.id);"><div class="sub-mlinks"><a href="http://www.excelfoundry.net/improvement" target="_new" class="menuitem">Continual Improvement</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/service" target="_new" class="menuitem">Crusher Service (FLSP)</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/xlu" class="menuitem">Excel University</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/crm/data" target="_new" class="menuitem">Excelerator CRM</a></div><div class="sub-mlinks"><a href="http://ezlmwc.adp.com/" target="_new" class="menuitem">EZLabor</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/First%20Article/First%20Article%20Parts.xls" class="menuitem">First Article Parts</a></div><div class="sub-mlinks"><a href="https://login.postini.com/exec/login" class="menuitem">FLS Spam Filter Login</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/ecr/" target="_new" class="menuitem">FLSP ECR</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=excel-tools/forms" class="menuitem">Forms Library</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=excel-tools/iso9001" class="menuitem">ISO 9001 Procedures</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/helpdesk" target="_new" class="menuitem">IT Help Desk</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=excel-tools/machine-info" class="menuitem">Machine Info</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/Manu_Memos/Memos.html" target="_new" class="menuitem">Manufacturing Memos</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=excel-tools/metrics" class="menuitem">Metrics</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/msq" target="_new" class="menuitem">MSQ Editor</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=excel-tools/manuals" class="menuitem">Parts Manuals</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/parts" target="_new" class="menuitem">Parts Search</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/po" target="_new" class="menuitem">PO Tool</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=excel-tools/flows" class="menuitem">Process Flows</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/revSupport" target="_new" class="menuitem">Revision Support</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=excel-tools/routing" class="menuitem">Routing Guide</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=excel-tools/safety" class="menuitem">Safety & Training</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/docs/QRM%20Schedule.xlsx" class="menuitem">QRM Schedule</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/training" class="menuitem">Training Request System</a></div><div class="sub-mlinks"><a href="http://my.concureworkplace.com/default.asp?companyid=excet5jvd2telbgk" target="_new" class="menuitem">Travel Expense (EFM)</a></div><div class="sub-mlinks"><a href="http://my.concureworkplace.com/default.asp?companyid=smid5gr1t0br0czj" target="_new" class="menuitem">Travel Expense (FLSP)</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/xcalibur" target="_new" class="menuitem">Xcalibur</a></div></div></td> <td class="divider"> </td> <td style="width: 19.6%; color: black;" id="item3" class="menu03" onmouseover="expand(this.id, 'menu3');" onmouseout="collapse(this.id, 'menu3');" onmouseleave="collapseIE(this.id, 'menu3');"><a href="http://www.excelfoundry.net/lifeatexcel/">Our People</a><div style="top: 168px; left: 376px; width: 183px; position: static; visibility: hidden; display: none;" id="menu3" class="exp" onmouseout="collapse('item3', this.id);" onmouseleave="collapseIE('item3', this.id);"><div class="sub-mlinks"><a href="https://login.fidelity.com/ftgw/pages/fesco/html/NBParticipantLogout.html" target="_new" class="menuitem">401k Login</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-people/classifieds" class="menuitem">Classifieds</a></div><div class="sub-mlinks"><a href="http://excelfoundry.net/lifeatexcel/?q=our-people/hr/directory" class="menuitem">Employee Directory</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-people/eu" class="menuitem">Excel University</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-people/insite" class="menuitem">FLSmidth Insite</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.com/about-excel/company-history" class="menuitem">History of Excel</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-people/hr" class="menuitem">Human Resources</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-people/dates" class="menuitem">Important Dates</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-people/jobs" class="menuitem">Job Openings</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-people/mlb" class="menuitem">MLB Standings</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-people/phone" class="menuitem">Phone Directory</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=node/380" class="menuitem">Quality and Mission Statement</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/docs/EFM%20HR%20XLU%20Servant%20Leadership%20Academy.pdf" class="menuitem">Servant Leadership Academy Info</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/training" target="_new" class="menuitem">Training Request System</a></div></div></td> <td class="divider"> </td> <td style="width: 19.6%;" id="item4" class="menu04" onmouseover="expand(this.id, 'menu4');" onmouseout="collapse(this.id, 'menu4');" onmouseleave="collapseIE(this.id, 'menu4');"><a href="http://www.excelfoundry.net/lifeatexcel/">Departments</a><div id="menu4" class="exp" onmouseout="collapse('item4', this.id);" onmouseleave="collapseIE('item4', this.id);"><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/accounting" class="menuitem">Accounting & Administration</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/support" class="menuitem">Customer Support</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/engineering" class="menuitem">Design Engineering</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/foundry" class="menuitem">Foundry</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/hr" class="menuitem">Human Resources</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/it" class="menuitem">IT</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/machine" class="menuitem">Machine Shops</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/maintenance" class="menuitem">Maintenance</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/mktg_wo" class="menuitem">Marketing</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/materials" class="menuitem">Materials</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=node/193" class="menuitem">Manufacturing Engineering</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=node/192" class="menuitem">Production Control</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/quality" class="menuitem">Quality Engineering</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=node/187" class="menuitem">Sales</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/toolcrib" class="menuitem">Tool Crib</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/warehouse" class="menuitem">Warehouse</a></div></div></td> <td class="divider"> </td> <td style="width: 19.6%; color: black;" id="item5" class="menu05" onmouseover="expand(this.id, 'menu5');" onmouseout="collapse(this.id, 'menu5');" onmouseleave="collapseIE(this.id, 'menu5');"><a href="http://www.excelfoundry.net/lifeatexcel/">Our Customers</a><div style="top: 168px; left: 752px; width: 183px; position: static; visibility: hidden; display: none;" id="menu5" class="exp" onmouseout="collapse('item5', this.id);" onmouseleave="collapseIE('item5', this.id);"><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-customers/highlights" class="menuitem">Customer Highlights</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-customers/equipment" class="menuitem">Equipment Profiles</a></div></div></td> </tr></tbody></table> </div>
Hi all, I've got a horizontal menu that is working just fine in every browser but IE 6 and 7. In IE it's almost there, except that the submenus will only appear one level deep. The menu is created with nested lists. The :hover functionality is simulated via JavaScript for IE 6. The IE developer toolbar shows the 3rd level menu is correctly being changed to display: block when its parent is hovered, and the border the dev toolbar draws even puts it in the correct place, it just doesn't actually appear. You can find the page he http://www.perceptes.com/topdog/ The CSS and JS (uses jQuery) can be found he http://www.perceptes.com/topdog/css/screen.css http://www.perceptes.com/topdog/css/ie.css (loaded with a conditional comment) http://www.perceptes.com/topdog/js/tdps.js http://www.perceptes.com/topdog/js/ie.js (loaded with a conditonal comment) For a specific example of what I'm talking about, try hovering over the second item, Filters & Parts. This will give you another level with four choices. Each of those also has child elements, but when hovered over, the next level doesn't appear. Try it in something other than IE 6 or 7 to see how it's supposed to look. Thanks very much in advance! |
|||||||