7 replies [Last post]
Josh Connerty
Josh Connerty's picture
Offline
Enthusiast
Wiltshire, England
Last seen: 10 years 10 weeks ago
Wiltshire, England
Joined: 2008-10-17
Posts: 268
Points: 23

Basically what is happening is that when I hover over my menu my pop out box appears, then when I move away again it kind of disappears like the anchor but the box stays and when you hover over it again it goes weird.

Heres my docs don't worry about the images it doesn't change what happens.

CSS:

/* common styling */
 
#nav {
font-family: arial, sans-serif; 
width: 100px; 
height: 180px; 
position: relative; 
font-size: 11px; 
margin: 30px 0; 
z-index: 100;
left: 28%;
}
 
#nav ul {
padding: 0; 
margin: 0; 
list-style-type: none;
width: 200px; 
height: 180px;
}
 
#nav ul li ul {
visibility: hidden; 
position: absolute; 
height: 0; 
overflow: hidden; 
top: 0; 
left:85px;
}
 
#nav ul li {
float:left;
background: #ddf0d0;
border-left: thin solid #008000; 
border-right: thin solid #008000; 
border-top: thin solid #008000; 
}
 
#nav ul li a, #nav ul li a:visited {
display:block; 
float:left; 
text-decoration:none; 
width:90px; 
height:30px; 
line-height:29px; 
font-size:11px; 
padding-left:10px;
font-size: 14px;
font-weight: bold;
font-variant: small-caps;
}
 
* html #nav ul li a, * html #nav ul li a:visited {
width:100px; 
w\idth:90px;
color: #008000;
}
 
#nav ul li a, #nav ul li a:visited {
width:100px; 
w\idth:90px;
color: #008000;
}
 
#nav table {
border-collapse:collapse; 
border:0; 
margin:0; 
padding:0; 
font-size:1em; 
position:absolute; 
left:0; 
top:0;
}
 
#nav .border {
border-bottom: solid thin #008000;
}
 
/* first line for IE7 and non-IE browsers - second line for IE5.5 and IE6 */
#nav ul li:hover a,
#nav ul li a:hover{
}
 
#nav ul li:hover {
position:relative; 
z-index:90;
background-color: #c0c0c0;
}
 
* html #nav ul li a:hover {
position:relative; 
z-index:100;
}
 
#nav ul li:hover ul,
#nav ul li a:hover ul {
visibility:visible; 
position:absolute; 
height:auto;
overflow:visible;
}
 
#nav ul li:hover ul li a,
#nav ul li a:hover ul li a{
display:block;
line-height:15px; 
padding:5px 0 5px 10px; 
height:auto; 
text-decoration:none;
color: #008000;
}
 
#nav ul li:hover ul li:hover a,
#nav ul li a:hover ul li a:hover {
}
 
#nav ul li:hover ul li ul,
#nav ul li a:hover ul li a ul {
visibility:hidden; 
position:absolute; 
height:0; 
overflow:hidden; 
top:0; 
left:85px;
}
 
#nav ul li:hover ul li:hover ul,
#nav ul li a:hover ul li a:hover ul {
visibility:visible; 
position:absolute; 
height:auto;
padding:0;
list-style-type:none;
}
 
#nav ul li:hover ul li:hover ul li a,
#nav ul li a:hover ul li a:hover ul li a {
display:block; 
background:transparent;
}
 
#nav ul li:hover ul li:hover ul li:hover a,
#nav ul li a:hover ul li a:hover ul li a:hover {
}

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="menu.css" type="text/css" rel="stylesheet" />
<link href="style.css" type="text/css" rel="stylesheet" />
<title>Template</title>
</head>
 
<body>
<div id="main_wrapper">
	<div id="banner">
		<img src="data\banner\banner.png" />
	</div>
 
    <div id="left_column_wrapper">
	<div id="menu">
		<span id="nav">
        <ul>
        	    	<li><a href="">Home</a></li>
 
            	    <li><a href="">Tutorials</a>
                		<ul>
                    		<li><a href="">HTML</a></li>
                        	<li><a href="">CSS</a></li>
                        	<li class="border"><a href="">PHP</a></li>
                  	  </ul>
               	 	</li>
 
                	<li><a href="">Subdomains</a>
                    	<ul>
                        	<li><a href="">Sign Up</a></li>
                            <li><a href="">Packages</a></li>
                            <li class="border"><a href="">Terms &amp; Conditions</a></li>
                        </ul>
                    </li>
 
            	    <li><a class="notready" href="">Forums</a>
                    	<ul>
                        	<li><a href="">Sign In</a></li>
                            <li class="border"><a href="">Register</a></li>
                        </ul>
                    </li>
 
       	        	<li><a href="">Support</a></li>
                	<li class="border"><a href="">Contact</a></li>
        </ul>
		</span>
	</div>
 
    <div id="news">
    	NEWS:
        This is the news section.
    </div>
    </div>
 
</div>
</body>
</html>

If anyone fancies the challenge be my quest. Thanks for reading and replying guys.

Josh Connerty
Josh Connerty's picture
Offline
Enthusiast
Wiltshire, England
Last seen: 10 years 10 weeks ago
Wiltshire, England
Joined: 2008-10-17
Posts: 268
Points: 23

Also.....

If you would rather see it working on a url then go to www.htmltutoronline.co.uk/template.html

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 17 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Josh validate your code

Josh validate your code before going any further.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Josh Connerty
Josh Connerty's picture
Offline
Enthusiast
Wiltshire, England
Last seen: 10 years 10 weeks ago
Wiltshire, England
Joined: 2008-10-17
Posts: 268
Points: 23

Ok

Ok

Josh Connerty
Josh Connerty's picture
Offline
Enthusiast
Wiltshire, England
Last seen: 10 years 10 weeks ago
Wiltshire, England
Joined: 2008-10-17
Posts: 268
Points: 23

Ooops

Ooopsey :bigoops: . the validator said that I had a

    out of place, then I realised you can't put a
      in a span tag.

:bigoops:

So thanks Hugo problem solved. I will use a validator instead next time :thumbsup:

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 17 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Yep it's your best friend,

Yep it's your best friend, and even comes as a plugin for FF Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Josh Connerty
Josh Connerty's picture
Offline
Enthusiast
Wiltshire, England
Last seen: 10 years 10 weeks ago
Wiltshire, England
Joined: 2008-10-17
Posts: 268
Points: 23

Really?

Shock Does it validate CSS and HTML?

Do you have a link?

Laughing out loud

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 17 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Um shouldn't really have to

Um shouldn't really have to google links for people Smile it's an extension so it's found via the 'addons' under the tools menu

https://addons.mozilla.org/en-US/firefox/addon/249

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me