www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 18

Thread: IE not showing drop-down menu

  1. #1
    Join Date
    Feb 2006
    Posts
    17

    IE not showing drop-down menu

    I made a vertical drop-down menu based on this tutorial:
    http://www.seoconsultants.com/css/menus/tutorial/

    I copied and pasted the the code (CSS), only deleting what I wouldn't need.

    The menu works in FF and Opera 9. But in IE, the menu doesn't work.

    According to DWMX2004, the "behavior" property isn't supported by IE. Any fix for this?

    Here is the code:

    Code:
    <style type="text/css" media="screen">
    body {
    behavior: url(csshover.htc); /* call hover behaviour file */
    font-size: 100%; /* enable IE to resize em fonts */
    } 
    #menu ul li {
    float: left; /* cure IE5.x "whitespace in lists" problem */
    width: 100%;
    }
    #menu ul li a {
    height: 1%; /* make links honour display: block; properly */
    } 
    
    #menu a, #menu h2 {
    font: bold 0.7em/1.4em arial, helvetica, sans-serif; 
    /* if required use em's for IE as it won't resize pixels */
    } 
    </style>
    
    </head>
    
    <body>
    <div id="menu">
    <ul>
    <li>
        <ul>
          <li><a href="http://www.seoconsultants.com/tips/css/#cssmenus" title="SEO Consultants Directory"><img src="Graphics/company_up.gif"></a>
            <ul>
              <li><a href="http://www.tanfa.co.uk/css/examples/css-dropdown-menus.asp" title="tanfa Introduction"><img src="Graphics/sub_vision_up.gif" width="125" height="30"></a></li>
    		   <li><a href="http://www.tanfa.co.uk/css/examples/css-dropdown-menus.asp" title="tanfa Introduction"><img src="Graphics/sub_profile_up.gif" width="125" height="30"></a></li>
    </ul>
    </div>
    </body>
    </html>
    Also, but less important is that FF shows a border around the menu items while Opera doesn't. Any explanations/fixes?

  2. #2
    Join Date
    Oct 2005
    Posts
    232
    Throw this in your style.css or as a css script:
    Code:
    /* Fix IE. Hide from IE Mac \*/
    * html ul li { float: left; }
    * html ul li a { height: 1%; }
    /* End */

  3. #3
    Join Date
    Apr 2003
    Posts
    240
    You mean a CSS stylesheet?

    Personally, I would add this into the HTML page:
    HTML Code:
    <!--[if lte IE 6]>
    <style type="text/css">
    #menu li {
    	float: left;}
    #menu li a {
    	height: 1%;
    }
    </style>
    <![endif]-->
    Or better yet, put the style rules that are in the conditional comment into their own stylesheet and link THAT inside the conditional comment:
    HTML Code:
    <!--[if lte IE 6]>
    <link rel="stylesheet" type="text/css" href="/styles/fixmsie.css" media="screen" />
    <![endif]-->

  4. #4
    Join Date
    Feb 2006
    Posts
    17

    Still not working

    I did different menu based on this:
    http://www.alistapart.com/articles/horizdropdowns

    I even did direct Copy & Pastes.

    In FF and Opera, exactly as it should.

    In IE.......none of the submenus appear! Even after clearing my browser's cache...still no pop-out menu.

    Here is the code from top to bottom:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Menu Construct</title>
    <style type="text/css">
    ul {margin: 0; padding: 0; list-style: none; width: 125px}
    	#nav {margin: 0; padding: 0; list-style: none; width: 125px}
    ul li {position:relative}
    li ul {position:absolute; left: 124px; top: 0; display: none}
    ul li a {display: block; text-decoration: none; background-color:#CCCCCC}
    /* Fix IE. Hide from IE Mac \*/
    * html ul li {float: left}
    * html ul li a {height: 1%}
    /* End */
    li:hover ul {display: block}
    </style>
    <script type="text/javascript"><!--//--><![CDATA[//><!--
    startList = function() {
    	if (document.all&&document.getElementById) {
    		navRoot = document.getElementById("nav");
    		for (i=0; i<navRoot.childNodes.length; i++) {
    			node = navRoot.childNodes[i];
    			if (node.nodeName=="LI") {
    				node.onmouseover=function() {
    					this.className+=" over";
    				}
    				node.onmouseout=function() {
    					this.className=this.className.replace(" over", "");
    				}
    			}
    		}
    	}
    }
    window.onload=startList;
    
    //--><!]]></script>
    </head>
    
    <body>
    <ul id="nav">
    	<li><a href="#">Company</a>
    		<ul>
    			<li><a href="#">Vision</a></li>
    			<li><a href="#">Profiles</a></li>
    		</ul>
    	</li>
    	<li><a href="#">Projects</a>
    		<ul>
    			<li><a href="#">Current</a></li>
    			<li><a href="#">Future</a></li>
    		</ul>
      </li>
    	<li><a href="#">Sales</a>
    		<ul>
    			<li><a href="#">Prices</a></li>
    			<li><a href="#">Appointments</a></li>
    		</ul>
      </li>
    	<li><a href="#">Contact</a></li>
        <li><a href="#">Press</a></li>
    </ul>
    </body>
    </html>

    The fixes just don't seem to be working.

  5. #5
    Join Date
    Apr 2003
    Posts
    240
    At the very end of your style sheet (just above the closing <style> tag), change
    Code:
    li:hover ul {display: block}
    to
    Code:
    li:hover ul, li.over ul{
    	display: block;
    }
    That way, the script can reference it.

  6. #6
    Join Date
    Feb 2006
    Posts
    17
    Yea, I went back and re-read my code and the tutorial, and fixed it 5 seconds after posting.
    Me feeling like a "Teeteedee" (Carlos Mencia) is overshadowed by my relief.

  7. #7
    Join Date
    Apr 2003
    Posts
    240
    Oh God how I miss that show (I don't have a TV anymore). All I get to do are watch the clips online.

    "'Mind of Mencia' is being moved to Sundays. Why do I feel like I just got deported?" -- Carlos Mencia

    At least the lack of a TV gives me (a lot) more time to work online and help people solve their Web design/development problems .

  8. #8
    Join Date
    Feb 2006
    Posts
    17
    Yeah, YouTube is great.

    Well now that I have got my menus working, there is another problem (with IE, surprised?). No probs with my other browsers.

    http://www.alistapart.com/articles/horizdropdowns
    According to that article, there is a bug with IE6 which prevents you from clicking the sub-menus as soon as you mouseout from the main menu.

    Its under the "Mystery IE6 Bug:" section, near the end.

    I don't understand the fix. Do I have to create a new selector (
    Code:
    li a, else {background: white}
    )?

    --------------------

    Question #2:

    I've created new classes for my regular UL, but now (in IE only) the UL over laps with the suceeding list. Fix? Why?

    HTML:
    Code:
      <ul class="ulreg">
      <li>Bulleted List</li>
      </ul>
      <ol class="olreg">
      <li>Numbered List</li>
      <li>Second Item</li>
      </ol>
    CSS of regular lists:
    Code:
    .ulreg {list-style-type:disc; font:Georgia, "Times New Roman", Times, serif; font-family:Georgia, "Times New Roman", Times, serif; font-size:12px; color:#000000}
    .olreg {font:Georgia, "Times New Roman", Times, serif; font-family:Georgia, "Times New Roman", Times, serif; font-size:12px; color:#000000}
    CSS of menu:
    Code:
    #nav {margin: 0; padding: 0; list-style: none; width: 125px}
    ul li {position:relative}
    li ul {position:absolute; left: 124px; top: 0; display: none}
    ul li a {display: block; text-decoration: none; background: white}
    /* Fix IE. Hide from IE Mac \*/
    * html ul li {float: left}
    * html ul li a {height: 1%}
    /* End */
    li:hover ul, li.over ul {display: block}
    Javascript of menu (insert in <head>):
    Code:
    <script type="text/javascript"><!--//--><![CDATA[//><!--
    startList = function() {
    	if (document.all&&document.getElementById) {
    		navRoot = document.getElementById("nav");
    		for (i=0; i<navRoot.childNodes.length; i++) {
    			node = navRoot.childNodes[i];
    			if (node.nodeName=="LI") {
    				node.onmouseover=function() {
    					this.className+=" over";
    				}
    				node.onmouseout=function() {
    					this.className=this.className.replace(" over", "");
    				}
    			}
    		}
    	}
    }
    window.onload=startList;
    
    //--><!]]></script>

  9. #9
    Join Date
    Apr 2003
    Posts
    240
    sorry, it's getting late, and I have to be in bed in 30 minutes (so I can wake up and get my check by 9am). Could you copy/paste the entire page so I can copy it and look at it on my end?

  10. #10
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    As far as the Mystery IE6 bug goes, you should already have it covered with the background declaration in
    ul li a {display: block; text-decoration: none; background: white}

    For the other problem, shouldn't the <ol and </ol> be ul ?

    Cheers
    Graeme

  11. #11
    Join Date
    Feb 2006
    Posts
    17
    ok albatross here is what you need:

    Code:
    HTML code, top to bottom:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Titus Development Group</title>
    <link rel="stylesheet" type="text/css" href="estate_css1.css">
    <script type="text/javascript"><!--//--><![CDATA[//><!--
    startList = function() {
    	if (document.all&&document.getElementById) {
    		navRoot = document.getElementById("nav");
    		for (i=0; i<navRoot.childNodes.length; i++) {
    			node = navRoot.childNodes[i];
    			if (node.nodeName=="LI") {
    				node.onmouseover=function() {
    					this.className+=" over";
    				}
    				node.onmouseout=function() {
    					this.className=this.className.replace(" over", "");
    				}
    			}
    		}
    	}
    }
    window.onload=startList;
    
    //--><!]]></script>
    </head>
    
    <body>
    <div class="container">
      <div align="center"><img src="Graphics/titus-header.jpg" width="700" height="155"></div>
      <div id="spacer3"></div>
      <div id="mainnav">
      <ul id="nav">
    	<li><a href="#"><img src="Graphics/company_up.gif"></a>
    		<ul>
    			<li><a href="#"><img src="Graphics/sub_vision_nav.gif"></a></li>
    			<li><a href="#">Profiles</a></li>
    		</ul>
    	</li>
    	<li><a href="#"><img src="Graphics/projects_up.gif"></a>
    		<ul>
    			<li><a href="#">Current</a></li>
    			<li><a href="#">Future</a></li>
    		</ul>
      </li>
    	<li><a href="#"><img src="Graphics/sales_up.gif"></a>
    		<ul>
    			<li><a href="#">Prices</a></li>
    			<li><a href="#">Appointments</a></li>
    		</ul>
      </li>
    	<li><a href="#"><img src="Graphics/contact_up.gif"></a></li>
        <li><a href="#"><img src="Graphics/press_up.gif"></a></li>
    </ul>
      </div>
      <div id="contentleft"><h1>Welcome!</h1>
      <h2>We're 10 times better than Related Group!</h2>
      <p>Below is a list, bulleted and numbered:</p>
      <p>The following is a link: <a href="http://www.yahoo.com" target="_blank">Yahoo!</a></p>
      <ul class="ulreg">
      <li>Bulleted List</li>
      </ul>
      <ol class="olreg">
      <li>Numbered List</li>
      <li>Second Item</li>
      </ol>
      </div>
    <div id="footer">&copy; 2006 Daniel Sone. All rights reserved.</div>	
    </div>
    </body>
    </html>
    CSS code, all:

    Code:
    /* CSS Code for Titus Development Group, LLC */
    
    /*TEXT*/
    p {font:Georgia, "Times New Roman", Times, serif; font-family:Georgia, "Times New Roman", Times, serif; font-size:12px; color:#000000}
    h1, h2, h3, h4, h5, h6 {font:Georgia, "Times New Roman", Times, serif; font-family:Georgia, "Times New Roman", Times, serif; color:#584938;}
    /*LIST*/
    .ulreg {list-style-type:disc; font:Georgia, "Times New Roman", Times, serif; font-family:Georgia, "Times New Roman", Times, serif; font-size:12px; color:#000000}
    .olreg {font:Georgia, "Times New Roman", Times, serif; font-family:Georgia, "Times New Roman", Times, serif; font-size:12px; color:#000000}
    /*LINKS*/
    a:link {color:#584938; text-decoration:none}
    a:visited {color:#584938}
    a:hover {color:#584938; text-decoration:underline}
    a:active {color:#584938}
    /*IMAGES*/
    
    /*LAYOUT*/
    .container {margin: 0 auto; width: 750px; height: 800px;}
    	#mainnav {float:left; width: 130px}
    	#contentleft {float:right; margin: 5px 20px 5px 20px; width: 550px}
    	#contentright {float:inherit}
    	#footer {margin: 3px; text-align:center; font:Arial, Helvetica, sans-serif; font-family:Arial, Helvetica, sans-serif;
    			font-size:9px; color:#333333;
    			border-top:2px dotted gray; float:left; width: 750px}
    	#spacer3 {height: 3px; width: 750px}
    
    body {background-image:url(titus logo-bw.jpg);color:#FFFFFF; background-position:right; background-repeat:no-repeat; background-attachment:fixed}
    
    /*POP-OUT MENU*/
    img {border: none; background: white}
    #nav {margin: 0; padding: 0; list-style: none; width: 125px}
    ul li {position:relative}
    li ul {position:absolute; left: 124px; top: 0; display: none}
    ul li a {display: block; text-decoration: none; background: white}
    /* Fix IE. Hide from IE Mac \*/
    * html ul li {float: left}
    * html ul li a {height: 1%}
    /* End */
    li:hover ul, li.over ul {display: block}

  12. #12
    Join Date
    Apr 2003
    Posts
    240
    I played around with the code for a few hours (how ironic that I didn't have to work today) and couldn't quite figure out what was causing your problem. Though I do suspect it has something to do with your positioning of the elements. I couldn't quite put my finger on it, so I re-wrote it from the ground up. This one works, though keep in mind the background color, color and margins on the header ID are for demonstration purposes, since I don't have the actual images you were planning on using for the site. Same with the menu (the images). I don't know if the link images were purely images (text embedded and all) or if you had planned on using text for the actual link text and then images for the background, so I went with an all text option.

    The page I developed is below (100% valid XHTML 1.0 Transitional--though I could have just as easily used Strict instead--and CSS). Tested on Internet Explorer, Gecko (FireFox) and Opera.
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Titus Development Group</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    * {
    	margin: 0;
    	padding: 0;
    }
    body {
    	background: #FFFFFF url(titus_logo-bw.jpg) right no-repeat fixed;
    	color: #000000;
    	font: 16px/1.2 Arial, Verdana, Helvetica, sans-serif;
    	height: 800px;
    	margin-left: auto;
    	margin-right: auto;
    	width: 750px;
    }
    h1, h2, h3, h4, h5, h6 {
    	font-family: Georgia, "Times New Roman", Times, serif;
    }
    p {
    	padding: 0.25em;
    }
    a:link {
    	background-color: #FFFFFF;
    	color: #584938;
    	text-decoration: none;
    }
    a:visited {
    	background-color: #FFFFFF;
    	color: #584938;
    }
    a:hover {
    	background-color: #FFFFFF;
    	color: #584938;
    	text-decoration: underline;
    }
    a:active {
    	background-color: #FFFFFF;
    	color: #584938;
    }
    
    /* THe following style rules are for the header area only */
    #header {
    	background: #CCC url(Graphics/titus-header.jpg) center no-repeat;
    	color: inherit;
    	height: 155px;
    	margin-left: auto;
    	margin-right: auto;
    	width: 720px;
    }
    #header h1 {
    	visibility: hidden;
    }
    
    /* The following style rules are for the navigational area only */
    #navigation {
    	float: left;
    	width: 11em;
    }
    #skipper {
    	visibility: hidden;
    }
    
    	/* The following style rules are for the  menu only */
    	#menu {
    		border-top: 1px solid #000000;
    		border-right: 1px solid #000000;
    		border-bottom: 0;
    		border-left: 1px solid #000000;
    		list-style: none;
    		margin-left: 1em;
    		width: 10em;
    	}
    	#menu li {
    		background-color: #FFFFFF;
    		border-bottom: 1px solid #000000;
    		color: inherit;
    		padding-left: 0.33em;
    		padding-right: 0.33em;
    		position: relative;
    	}
    	#menu li a {
    		background-color: #FFFFFF;
    		color: #0000FF;
    		display: block;
    		text-decoration: none;
    		width: 100%;
    	}
    	#menu li ul {
    		border-top: 1px solid #000000;
    		border-right: 1px solid #000000;
    		border-bottom: 0;
    		border-left: 1px solid #000000;
    		display: none;
    		position: absolute;
    		top: 0;
    		left: 10em;
    		list-style: none;
    		margin-top: -1px;
    		width: 10em;
    	}
    	#menu li:hover ul, #menu li.over ul {
    		display: block;
    	}
    
    /* The following rules are for the content area only */
    #content {
    	margin-top: 1em;
    	margin-left: 12em;
    }
    #content h2 {
    	font-size: 1.75em;
    }
    #subTitle {
    	font-size: 1.25em;
    	margin-top: 1.5em;
    }
    #content li {
    	margin-left: 2em;
    }
    
    /* The following rules are for the footer area only */
    #footer {
    	border-top: 2px dotted #666666;
    	clear: both;
    	margin: 0.3em;
    	text-align: center;
    }
    </style>
    <!--[if lte IE 6]>
    <style type="text/css">
    #menu li {
    	float: left;}
    #menu li a {
    	height: 1%;
    }
    </style>
    <![endif]-->
    <script type="text/javascript">
    <!--//--><![CDATA[//><!--
    startList = function() {
    	if (document.all&&document.getElementById) {
    		navRoot = document.getElementById("menu");
    		for (i=0; i<navRoot.childNodes.length; i++) {
    			node = navRoot.childNodes[i];
    			if (node.nodeName=="LI") {
    				node.onmouseover=function() {
    					this.className+=" over";
    				}
    				node.onmouseout=function() {
    					this.className=this.className.replace(" over", "");
    				}
    			}
    		}
    	}
    }
    window.onload=startList;
    //--><!]]>
    </script>
    </head>
    <body>
    <div id="header">
    	<h1>Web Site Title</h1>
    </div>
    <div id="navigation">
    	<a href="#content" id="skipper"><strong>Skip to Content</strong></a>
    	<ul id="menu">
    		<li><a href="#">Company</a>
    			<ul>
    				<li><a href="#">Vision</a></li>
    				<li><a href="#">Profiles</a></li>
    			</ul>
    		</li>
    		<li><a href="#">Projects</a>
    			<ul>
    				<li><a href="#">Current</a></li>
    				<li><a href="#">Future</a></li>
    			</ul>
    		</li>
    		<li><a href="#">Sales</a>
    			<ul>
    				<li><a href="#">Prices</a></li>
    				<li><a href="#">Appointments</a></li>
    			</ul>
    		</li>
    		<li><a href="#">Contact</a></li>
    		<li><a href="#">Press</a></li>
    	</ul>
    </div>
    <div id="content">
    	<h2>Welcome!</h2>
    	<div id="subTitle">
    		<p><strong>We&acute;re 10 times better than the other group!</strong></p>
    	</div>
    	<p>The following is a link: <a href="http://www.yahoo.com" target="_blank">Yahoo!</a></p>
    	<p>Below is a list, bulleted and numbered:</p>
    	<div>
    		<ul>
    			<li>Bulleted List</li>
    		</ul>
    	</div>
    	<div>
    		<ol>
    			<li>Numbered List</li>
    			<li>Second Item</li>
    		</ol>
    	</div>
    </div>
    <div id="footer">
    	<p>&copy; 2006 Daniel Sone. All rights reserved.</p>
    </div>
    </body>
    </html>

  13. #13
    Join Date
    Feb 2006
    Posts
    17
    I was using images instead of text links for my menu.

    I don't want to be the bearer of bad news since you've spent hours on it, but the menu still doesn't work in IE6. You did resolve the list overlapping problem though. Also, if I maximize my IE browser, the menu stays fixed to the left edge while the top & right borders shift with the main content and header.

    None of the coding seems to be working on my IE browser. It sucks that I can't verify my own work in the most pervasive browser.

    Attached is a screen shot of what I see.


    Thanks for your help.
    Attached Images Attached Images

  14. #14
    Join Date
    Apr 2003
    Posts
    240
    I got it to work in my copy of Internet Explorer 6. Did you turn off scripting in your browser and forget about it?

    As for the menu mucking up, placing the entire page content into a container <div> and giving that a width of 750px and a height of 800px should solve the problem. Currently those values are assigned to the <body> tag, which I believe is causing the problem.

    Also, using images without text is a major accessability problem. If the images are turned off (or dont load in the first place) how are your visitors going to even find their way around the site?

    Not only that, but they also increase the download time of the page as well.

    You can, however, create a CSS rollover of a background image that uses regular text to inform the user of what page the link goes to. Even if images are turned off, and/or CSS has been disabled or is not supported, the user can still use the link with no difficulty.

    Code:
    #img1 a {
    	display: block;
    	width: 200px;
    	height: 100px;
    	background-image: url(path/to/image1default.jpg);
    	background-position: top left;
    	background-repeat: no-repeat;
    }
    #img1 a:hover {
    	background-image: url(path/to/image1rollover.jpg);
    }
    HTML Code:
    <li id="img1"><a href="link.html">Descriptive Link Text</a></li>
    Simply assign an ID to each list item (or <div>, or whatever container you use) which contains a link you want to apply an image to. The above example assumes you are using a unique image for each link (let's say it's for a link banner). You can achieve the same effect (let's say you have one default and one rollover image for all the links) with two images. All you have to do is remove the ID attribute and reference the link through the stylesheet.
    Code:
    li a {
    	display: block;
    	width: 200px;
    	height: 100px;
    	background-image: url(path/to/imagedefault.jpg);
    	background-position: top left;
    	background-repeat: no-repeat;
    }
    li a:hover {
    	background-image: url(path/to/imagerollover.jpg);
    }
    HTML Code:
    <li><a href="link.html">Descriptive Link Text</a></li>
    Last edited by Albatross; 07-18-2006 at 01:12 AM.

  15. #15
    Join Date
    Feb 2006
    Posts
    17
    Umm, the only thing that pops up is a security bar warning me about Active X controls....I click "Allow blocked content...", then I click "Yes".

    Here is what is wierd:

    The menu works PERFECTLY when it is by itself,

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Menu Construct</title>
    <style type="text/css">
    img {border: none}
    ul {margin: 0; padding: 0; list-style: none; width: 125px}
    	#nav {margin: 0; padding: 0; list-style: none; width: 125px;}
    ul li {position:relative}
    li ul {position:absolute; left: 124px; top: 0; display: none}
    ul li a {display: block; text-decoration: none; background: white}
    /* Fix IE. Hide from IE Mac \*/
    * html ul li {float: left}
    * html ul li a {height: 1%}
    /* End */
    li:hover ul, li.over ul {display: block}
    </style>
    <script type="text/javascript"><!--//--><![CDATA[//><!--
    startList = function() {
    	if (document.all&&document.getElementById) {
    		navRoot = document.getElementById("nav");
    		for (i=0; i<navRoot.childNodes.length; i++) {
    			node = navRoot.childNodes[i];
    			if (node.nodeName=="LI") {
    				node.onmouseover=function() {
    					this.className+=" over";
    				}
    				node.onmouseout=function() {
    					this.className=this.className.replace(" over", "");
    				}
    			}
    		}
    	}
    }
    window.onload=startList;
    
    //--><!]]></script>
    </head>
    
    <body>
    <ul id="nav">
    	<li><a href="#"><img src="Graphics/company_up.gif"></a>
    		<ul>
    			<li><a href="#"><img src="Graphics/sub_vision_nav.gif"></a></li>
    			<li><a href="#">Profiles</a></li>
    		</ul>
    	</li>
    	<li><a href="#"><img src="Graphics/projects_up.gif"></a>
    		<ul>
    			<li><a href="#">Current</a></li>
    			<li><a href="#">Future</a></li>
    		</ul>
      </li>
    	<li><a href="#"><img src="Graphics/sales_up.gif"></a>
    		<ul>
    			<li><a href="#">Prices</a></li>
    			<li><a href="#">Appointments</a></li>
    		</ul>
      </li>
    	<li><a href="#"><img src="Graphics/contact_up.gif"></a></li>
        <li><a href="#"><img src="Graphics/press_up.gif"></a></li>
    </ul>
    </body>
    </html>
    but within the document I intend to use it, the submenu items disappear if I mouse out from the main menu item. Could it be some mess that if I leave my containing div, the overflow disappears?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles