CSS - Css Not Working Properly In Safari

Ok i have a header and it has a SWF file on it. WHat i want to do is put the links on the same SWF file to the side but to the top of it i.e. using Z-index? but i cant get it to work?

CSS
Code:

#header {
	position:relative;
	z-index:-1;
	float:left;
	width:100%;
	clear:both;
}	
			
#links {
	border:1px solid black;
	position:absolute;
	z-index:100;
	top:10px;
	right:20px;
}

HTML
Code:

<div id="header">
            	<object width="550" height="400">
                    <param name="movie" value="/resourcebank/images/Final_banner.swf">
                    <embed src="/resourcebank/images/Final_banner.swf" width="100% height="20%">
                    </embed>
                </object>
<span id="links">
               random links 			
</span>
            </div>

Hi,

I'm using C++ to create a single .cgi script. I'm now trying to incorperate some more CSS. I have added this line:

<style>body { font-family: times-roman; font-size: 16px; font-weight: bolder; }</style>

Now sometimes it works and sometimes it doesn't.
I will keep on clicking the refresh button and it is about 1 out of 10 that there are not any fonts on the page and the table sizes jump.

Does anyone know why this is possibly happening?

Mike

I'm trying to get a dropdown menu to work properly (with IE, it works fine in FF) in the sidebar, thus vertically not horizontally. This dropdown menu has worked fine before, but only when using it horizontally, across the top.

Basically, it prevents the user from clicking on the submenu options (I'm thinking it has something to do with z-index), but the parent menu options work fine. You can see the issue here with IE6 or 7:

http://www.groundedgroup.com/clients/NWR/

Here's the respective CSS:

Code:

/* Sidebar / Menu */

#sidebar {
	float: left;
	top: 16px;
	left: 2px;
	display: block;
	position: relative;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color:#FFFFFF;
	letter-spacing: 1px;
	text-align:right;
	z-index: 3;
}

#sidebar ul {
	list-style-type: none;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	z-index: 4;
}

#sidebar li {
	display: block;
	float: left;
	min-height: 20px;
	position: relative;
	text-align: left;
	padding: 5px 20px 4px 16px;
	margin: 0px 0px 0px 0px;
}

#sidebar h2 {
	font-size: 1.2em;
	padding: 0;
	margin: 0;
}

#sidebar li ul {
	width: 150px;
	height: auto;
	top: 100%;
	left: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	letter-spacing: 3px;
}

#sidebar li.LargeMenu ul {
	width: 200px;
	height: auto;
	top: 100%;
	left: 0px;
}

#sidebar li ul li {
	text-align: left;
	width: 118px;	
	height: auto;
	min-height: auto;
	display: block;
}

#sidebar li.LargeMenu ul li {
	text-align: left;
	width: 198px;	
	height: auto;
	min-height: auto;
	display: block;
}

#sidebar a {
	text-decoration: none;
	letter-spacing: 1px;
	}

#sidebar li li ul {
	top: 0;
	left: 0;
}

#sidebar li li:hover ul {
	left: 150px;
}

/* initialy hide all sub sidemenus */
#sidebar ul ul,
#sidebar ul li:hover ul ul,
#sidebar ul ul li:hover ul ul,
#sidebar ul ul ul li:hover ul ul,
#sidebar ul ul ul ul li:hover ul ul {
	position: absolute;
	display:none;
}

/* display them on hover */
#sidebar li:hover ul,
#sidebar ul li:hover ul,
#sidebar ul ul li:hover ul,
#sidebar ul ul ul li:hover ul,
#sidebar ul ul ul ul li:hover ul,
#sidebar ul ul ul ul ul li:hover ul {
 	 display: block;
}

#sidebar #PhpWebcontent {
	display:none;
}	

/* define the consecutive colors */

#sidebar {
	color: #FFFFFF;
}

#sidebar ul{
	-moz-opacity: 1; /* for mozilla */
	opacity: 1; /* for safari */
	khtml-opacity: 1/* for konquerer and older safari */
}

#feeds li {
  background: url(images/feed.png) top left no-repeat;
  padding-left: 18px;
}

#sidebar h2 {
	color: #FFFFFF;
}

#sidebar a {
	color: #ffffff;
	letter-spacing: 1px;
	}

#sidebar ul li:hover {
	background: #333333;
}

#sidebar ul li ul {

}

#sidebar ul li ul li {
	background: #333333;
}

#sidebar ul li ul li:hover {
	background: #666666;
}

#sidebar ul li ul ul li{
	background: #666666;
	
}

#sidebar ul li ul ul li:hover {
	background: #999999;
}
/* End Sidebar / Menu */

Any ideas on how to make this work properly when used on the side?

Thanks in advance.

I just tested my site with IE6 and it's very broken (although it's valid HTML 4.01 strict according to w3.org). Main problem I am having is the links. I have a left navigation box, and a list of links inside it, the links display is set to 'block'. When the user's cursor is on the same line as the link, I want the whole line to change BG color and be clickable. This works now with FF perfectly. In IE your mouse has to be ON the actual link for the background to change color, and there is space on the left of the link block.

Here is an example (not my site):
http://rmideas.com/menus/menutest/NavToBar.htm
The top right menu works like I want it to in FF, but in IE your cursor has to be on 'home'.

How can I get this to work properly in both FF and IE?

and I have overlapping problems, some code overlaps in one browser but looks fine in another.

gday

i have a bunch of tables that are only to be shown based on a javascript call, but for some reason, firefox is rendering the space of the table, where as IE 7 isn't..

eg.
<table style"display: none;"></table>

with a whole bunch of rows in it.. the webpage still loads blank space everywhere, rather than just empty space

thoughts?

Hi there,

I'm haing a problem getting my navigation to appear correctly in Mac IE 5.2 and Safari 2.0.1. The dates on the right are supposed to pop you down to the date in the central box.

It works correctly on a PC, all browsers.

I replaced NAME with ID.

Thanks for any help or suggestions!

http://www.cofc.edu/~finchj/timeline_not_template.html

http://www.cofc.edu/~finchj/style_timeline.css

Jannette

I have a map on an html page.

If you mouseover "Savannah" the color of "Savannah" will change. The same will happen for "Broad". The problem is that the color doesn't change on "Broad" until you mouseover the top right part of "Broad". (Savannah and Broad are the only two that are active at this time.)

You have seen this all over the web. I don't want to use Javascript. I want to do this using CSS.

I do not have something quite right in my CSS. I have checked and checked and nothing stands out. I have looked at examples of Stu Nichols code similar to this, but I can't see anything.

I thought it was a problem with the z-index, but nothing happens when I change the numbers.

What am I doing wrong?

Gayle


CSS code:

PHP Code:
#imap {
    display: block;
    width: 801px;
    height: 677px;
    background: url(Images/RiverBasinMap_DENR.jpg) 0 0 no-repeat;
    position: relative;
    /*margin : 0 auto 2em auto; */
margin: 0 0;
    background-image: url(Images/RiverBasinMap_DENR.jpg);
} 

#imap a { 
color: #000; 
font-family: arial, sans-serif; 
font-size: 1.2em; 
font-weight: bold; 
text-transform: uppercase; 
} 
a#title, a#title:visited { 
display: block; 
width: 801px; 
height: 0; 
padding-top : 260px; 
position : absolute; 
left: 0; 
top: 0; 
cursor: default; 
text-decoration: none; 
} 
* html a#title { 
height: 677px; 
height: 0; 
} 
#imap a#title:hover { 
background: transparent url(Images/RiverBasinMap_DENR.jpg) 0 0 no-repeat; 
overflow: visible; 
color: #c00; 
z-index: 10;
} 

/*BROAD*/

a#broad {
    display:block;
    width:141px;
    height:159px;
/*padding-top : 120px;*/
    overflow:hidden;
    position: absolute;
    left: 285px;
    top: 295px;
    overflow: hidden;
} 

* html a#broad { 
    height: 159px; 
    height: 0; 
} 

a#broad:hover { 
    background: transparent url(images/Broad_Over.gif) no-repeat 0 0; 
    overflow: visible; 
    z-index: 21;
}

/*SAVANNAH*/

a#savannah {
    display: block;
    width: 181px;
    height: 313px;
/*<!--    padding-top : 120px;-->*/
    overflow: hidden;
    position: absolute;
    left: 226px;
    top: 318px;
    overflow: hidden;
} 

* html a#savannah  { 
    height: 313px; 
    height: 0; 
}

a#savannah:hover { 
    background: transparent url(images/Savannah_Over.gif) no-repeat 0 0; 
    overflow: visible; 
    z-index: 20;
} 






HTML code:

PHP Code:
<body>
<dl id="imap" name="imap">
    <dt><a id="map" href="#nogo">Test Map</a></dt>
        <dd><a href="#" name="broad" title="Broad" id="broad"></a></dd>
        <dd><a href="#" name="savannah" title="Savannah" id="savannah"></a></dd>
</dl>
</body> 

Something I think I'm not doing.

I'm using something called niftyCorners and thought that was what was cauing the problem, but now I'm not so sure. I am trying to have this appear on a webpage for the reader to use:

<script language="JavaScript">
<!--
alert("Sample JavaScript alert box 1.");
alert("Sample JavaScript alert box 2");
alert("There you go, alert boxes \nTa da, and one with a new line!");
// -->
</script>

Now, I need to have the <pre> tag nested inside a div tag, but this doesn't validate. So, I nested the code tag inside the pre tag and it breaks my layout in IE 6.0.

Why am I nesting at all? niftyCorners doesn't work very well when you put padding or margin on any div you want to have rounded corners. So, I'm trying to put a div round my pre tag, so I can round the div and I can use the pre tag to control margin/padding.

If anyone has any ideas, I'd appreciate it.

I am working on this website babeside dot be
Everything is going as I want it in all browsers, except IE.
When opening the website in IE, and selecting a babe, the babe-part is shown waaaaay underneath all the other parts of the site.
Can anyone help me how to fix this?

So basically here's the problem.... I'm using a jquery folder tree. By default, there is a plus and minus sign designating expanded or collapsed. If you click the sign only, would the menu expand/collapse. However, for my needs, I need the entire name beside the sign to be clickable as well. So I adjusted certain items and it works... in Opera, Firefox, Safari, Flock, and Chrome... (All latest versions I just downloaded today). It doesn't, however, work in IE6 (yes.. I still use IE6). Have not tested in IE7 or IE8...

I posted this in the CSS forum as it seems as though it's a CSS problem as opposed to Javascript or PHP...

Anyways... here's the CSS file:
Code:

.treeview, .treeview ul { 
	padding: 0;
	margin: 0;
	list-style: none;
}

.treeview ul {
	background-color: white;
	margin-top: 4px;
}

.treeview .hitarea {
	background: url(images/treeview-default.gif) -64px -25px no-repeat;
	height: 16px;
	width: 100px;
	margin-left: -16px;
	float: left;
	cursor: pointer;
}
/* fix for IE6 */
* html .hitarea {
	display: inline;
	float:none;
}

.treeview li { 
	margin: 0;
	padding: 3px 0pt 3px 16px;
}

.treeview a.selected {
	background-color: #eee;
}

#treecontrol { margin: 1em 0; display: none; }

.treeview .hover { color: red; cursor: pointer; }

.treeview li { background: url(images/treeview-default-line.gif) 0 0 no-repeat; }
.treeview li.collapsable, .treeview li.expandable { background-position: 0 -176px; }

.treeview .expandable-hitarea { background-position: -80px -3px; }

.treeview li.last { background-position: 0 -176px }
.treeview li.lastCollapsable, .treeview li.lastExpandable { background-image: url(images/treeview-default.gif); }  
.treeview li.lastCollapsable { background-position: 0 -111px }
.treeview li.lastExpandable { background-position: -32px -67px }

.treeview div.lastCollapsable-hitarea, .treeview div.lastExpandable-hitarea { background-position: 0; }

.treeview-red li { background-image: url(images/treeview-red-line.gif); }
.treeview-red .hitarea, .treeview-red li.lastCollapsable, .treeview-red li.lastExpandable { background-image: url(images/treeview-red.gif); } 

.treeview-black li { background-image: url(images/treeview-black-line.gif); }
.treeview-black .hitarea, .treeview-black li.lastCollapsable, .treeview-black li.lastExpandable { background-image: url(images/treeview-black.gif); }  

.treeview-gray li { background-image: url(images/treeview-gray-line.gif); }
.treeview-gray .hitarea, .treeview-gray li.lastCollapsable, .treeview-gray li.lastExpandable { background-image: url(images/treeview-gray.gif); } 

.treeview-famfamfam li { background-image: url(images/treeview-famfamfam-line.gif); }
.treeview-famfamfam .hitarea, .treeview-famfamfam li.lastCollapsable, .treeview-famfamfam li.lastExpandable { background-image: url(images/treeview-famfamfam.gif); } 


.filetree li { padding: 3px 0 2px 16px; }
.filetree span.folder, .filetree span.file { padding: 1px 0 1px 16px; display: block; }
.filetree span.folder { background: url(images/folder.gif) 0 0 no-repeat; }
.filetree li.expandable span.folder { background: url(images/folder-closed.gif) 0 0 no-repeat; }
.filetree span.file { background: url(images/file.gif) 0 0 no-repeat; }

Here's the relevant nav menu code:
Code:

if (mysql_num_rows($result) != '0') {
  while($row = mysql_fetch_array($result)) {
	  $string5= $row['string'];
	  $state3 = $row['state'];
	  $county3 = $row['county'];
	  $city3 = $row['city'];
          $item3 = $row['item'];
		if ($state2 != $state3) {
			if ($i != 1) {
		    $treeview .= "</ul></li></ul></li></ul></li>";			
		  }
		  $i++;
			$treeview .= "<li class=\"expandable\"><div class=\"hitarea expandable-hitarea\"><a href=\"#\" style=\"margin-left:20px;\">".$state3."</a></div><br />";
			$state2 = $state3;
			$j = 1;
		}
	  if ($county2 != $county3) {
			if ($j != 1) {
		    $treeview .= "</ul></li></ul></li></ul>";			
		  }
		  $j++;
		  $treeview .= "<ul style=\"display:none;\">";
		  $treeview .= "<li class=\"expandable\"><div class=\"hitarea expandable-hitarea\"><a href=\"#\" style=\"margin-left:20px;\">".$county3."</a></div><br />";
		  $county2 = $county3;
		}
		if ($city2 != $city3) {
      $treeview .= "<ul style=\"display:none;\">";
		  $treeview .= "<li class=\"expandable\"><div class=\"hitarea expandable-hitarea\"><a href=\"#\" style=\"margin-left:20px;\">".$city3."</a></div><br />";
			$city2 = $city3;
      $treeview .= "<ul style=\"display:none;\">";		
		}
		if ($item3) {
		  $treeview .= "<li>".$item3."</li>";
			$item2 = $item3;
		}
	} 
}
$treeview .= "</ul></li></ul></li></ul></li></ul>";

There are 3 lines of code that I have changed from when it works:
Code:

			$treeview .= "<li class=\"expandable\"><div class=\"hitarea expandable-hitarea\"><a href=\"#\" style=\"margin-left:20px;\">".$state3."</a></div><br />";
		  $treeview .= "<li class=\"expandable\"><div class=\"hitarea expandable-hitarea\"><a href=\"#\" style=\"margin-left:20px;\">".$county3."</a></div><br />";
		  $treeview .= "<li class=\"expandable\"><div class=\"hitarea expandable-hitarea\"><a href=\"#\" style=\"margin-left:20px;\">".$city3."</a></div><br />";

From the above 3 lines, the only thing I did which seemed to break the code was move the </div> from in front of <a href ...> to after </a>

So the original lines (where it worked) looked like:
Code:

			$treeview .= "<li class=\"expandable\"><div class=\"hitarea expandable-hitarea\"></div><a href=\"#\" style=\"margin-left:20px;\">".$state3."</a><br />";
		  $treeview .= "<li class=\"expandable\"><div class=\"hitarea expandable-hitarea\"></div><a href=\"#\" style=\"margin-left:20px;\">".$county3."</a><br />";
		  $treeview .= "<li class=\"expandable\"><div class=\"hitarea expandable-hitarea\"></div><a href=\"#\" style=\"margin-left:20px;\">".$city3."</a><br />";

EDIT: Ok... so not everything works in the other browsers either. Basically if I hit refresh with the new code, then collapse and expand seem to work in reverse....

So not sure how to correct this, but any help would be appreciated... Here is what it looks like (Screen shots):

Working Properly in FF

After a refresh in Firefox (This is after hitting collapse)

Working Properly in IE6 (Before making the changes mentioned above)

Not Working in IE6

The site is not currently accessible which is why I'm including screen shots. However, if you need to see them, let me know and I will make it live.... Heading out now, so was trying to get a post up at least before I left...

Thanks.. if you need further information or additional code, let me know.

Any help would, of course, be appreciated.

Hi. Having some trouble with IE (as per usual) and css.

I have a container with the id "text".

On a normal page, the styling for an unordered list is to use my own bullet point image and have a margin of 20px (as IE sees fit to hide the bullets off the left edge).

However, on my sitemap page, inside the text div, there is a div called sitemap and I have written the style of ul's in this div to have no list-style. Of course in ff and opera this works fine and the lists have no style, but IE persists in using the bullet image.

It seems like it's taking the rule:

div#text ul {

list-style: url(blah blah blah) etc.
}

to be the only ul styling rule, and anything which contradicts it is ignored:

div#text div#sitemap ul {

list-style: none;
}

Any help would be greatly appreciated,

Thanks

UPDATE:

Just fixed it, still haven't a clue as to why it's happening tho.

What I did was to say:

div#text div#sitemap ul {

list-style: url();
}

Can anyone enlighten me as to the cause?

http://s125392025.websitehome.co.uk/layout.html

I'm making a layout, in this layout(as you can see), I have a SubNav and a main body part. Both of those sections, have a header image and a footer image.

Well, my body footer image isn't aligning directly with the main body. It's off by about 1 or 2px. I tried using: position:absolute; With a few different types of top, and bottom, but the picture only dissappears. I used the exact same line code for the footer image for the subnav, and it has aligned just fine. Here's the script if it matters. Could anyone help please?
PHP Code:
<!DOCTYPE html PUBLIC>
<html>
<head>
<title>2 Box Layout Test</title>

<style type="text/css" media="screen">
/* Here is the main CSS */
body { background: #FFFFFF; }
div { background: #FFFFFF; }
h5 { text-align:center; }
#mid, #left { top:120px; }
#midcontainer
{
width:400px;
margin:0 auto;
position:relative;
left:35px;
top:44px;
}
#midheader { background:#000000 url(http://img.photobucket.com/albums/v237/The_Nyne/Site/head400.jpg) top left no-repeat;height:30px;z-index:-1; }
#midfoot { background:#000000 url(http://img.photobucket.com/albums/v237/The_Nyne/Site/foot400.jpg) top left no-repeat; height:30px; }
#leftheader { background:#000000 url(http://img.photobucket.com/albums/v237/The_Nyne/Site/head200.jpg) top left no-repeat;height:30px; }
#leftfoot { background:#000000 url(http://img.photobucket.com/albums/v237/The_Nyne/Site/foot200.jpg) top left no-repeat;height:30px; }

#midbody, #topbody, #leftbody { border:1px solid black;background: #a3a3a3; }
p.top1 { text-align:center; }
p.midheadtxt
{
font-weight:bold;
text-align:center;
position: absolute;
top:-5px;
left:180px;
}
p.leftheadtxt
{
font-weight:bold;
text-align:center;
position: absolute;
top:-5px;
left:50px;
}
#leftcontainer
{
width:200px;
position:absolute;
left:5px;
top:150px;
}

</style>

</head>
<body>

<!--This is the main site header properties-->
<div id="top">
  <div id="topbody">
    <h5>Main Site Header</h5>
    <p class="top1">This is where the main image, and TopNav will go.</p>
  </div>
</div>

<!--This is where the main body text goes for the page-->
<div id="mid">
  <div id="midcontainer">
    <div id="midheader">
      <p class="midheadtxt">News</p>
    </div>
      <div id="midbody">
        <h5>Middle</h5>
        <p>This is where the main section of the site is located.</p>
      </div>
    <div id="midfoot">
    </div>
  </div>
</div>

<!--This is the subnav area-->
<div id="left">
  <div id="leftcontainer">
    <div id="leftheader">
      <p class="leftheadtxt">Sub-Navigation</p>
    </div>
      <div id="leftbody">
        <p>This is where the subnav is located.</p>
      </div>
    <div id="leftfoot">
    </div>
  </div>
</div>

</body>
</html> 

Surprise, surprise...

[edit]link removed...[/edit]

In FF the list of links that represent the toon archive are dispayed as two columns just like I want, but IE isn't performing properly, showing it as one list right under the other...

[note]
The CSS is in the head, I haven't exported to a seperate file sheet yet since it's still in development.
[/note]

Alright.. I'm having a hard time trying to get this to work in the various browsers. Essentially what I'm doing is creating a navigational bar at the top, with one of the links containing a pure CSS drop down menu. Seems to work fine (in IE 6 and FF... need to test in IE7, NS, and Opera. I don't have IE7, so can't test there).
I have placed an image above the navigational bar as well. I'm trying to get the navbar centered on the page (can't seem to get it centered. I'm also trying to make the width of the navbar, say 700px or 80% or whatever.. but as long as it's centered in all the browsers...

Any ideas on making this right, or even cleaning up the code?

Thanks.

Here's the code for the HTML:
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">

<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href="menu5.css" />
<style>
body {background-color:#fdeadc;
		  text-align:center;
        .container {
background-image:url('images/navbar.jpg');
        }

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}			 				 			
</style>

</head>
<body>
<div class="logo">
  <img src="images/logo.jpg">
</div>
<div class="container clearfix">
<div class="navbar">
<ul class="menu5">
	<li><a href="#">Home</a></li>
	<li><a href="#">Company</a></li>
	<li><a class="drop" href="#">Services<!--[if IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
		<li><a href="#">Why Our Service</a></li>
		<li><a href="#">Why Our Site</a></li>
		<li><a href="#">How does it work</a></li>
		<li><a href="#">Message Analysis</a></li>
		<li><a href="#">Message Handling</a></li>
	</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	<li><a href="#">Trial</a></li>
	<li><a href="#">Support</a></li>
	<li><a href="#">Client Login</a></li>
	<li><a href="#">Partners</a></li>
	<li><a href="#">Contact Us</a></li>	
</ul>
</div>
</div>
</body>
</html>

CSS Code:
Code:

/* commom style for all browsers */

.menu5 {
width:625px; margin:auto; text-align:left; position:relative; padding:0; list-style-type:none;
}
.menu5 ul {
padding:0; margin:0; list-style-type:none; /* for Firefox */
}
.menu5 li {
float:left; position:relative; 
}
.menu5 li a, .menu5 li a:visited {
text-align: left; display:block; text-decoration:none; float:left; padding-right:1em; line-height:2.5em; height:2.5em; color:#dd0b14; 
}
.menu5 li ul {
visibility:hidden; position:absolute; left:0; height:0; overflow:hidden;
}
.menu5 table {
margin:-1px; border-collapse:collapse; /* font size for IE5.5 */
}

/* fist line style for IE7 and non-IE browsers and the second line for IE5.5 and IE6 */
.menu5 li:hover a,
.menu5 li a:hover {
text-decoration:underline; border:0; color:#dd0b14;
}
.menu5 li:hover ul,
.menu5 li a:hover ul {
visibility:visible; height:auto; background:#fff; border:1px solid #ddd; left:0; top:2.5em; overflow:visible;
}
.menu5 li:hover ul li a,
.menu5 li a:hover ul li a {
display:block; font-weight:normal; background:transparent; text-decoration:none; height:auto; line-height:1em; padding:0.5em;
}
* html .menu5 li a:hover ul li a {
width:10em; w\idth:9em; /* hack for IE5.5 */
}
.menu5 li:hover ul li ul,
.menu5 li a:hover ul li a ul {
visibility:hidden; position:absolute; height:0; overflow:hidden;
}
.menu5 li:hover ul li a:hover,
.menu5 li a:hover ul li a:hover {
text-decoration:underline;
}
.menu5 li:hover ul li:hover ul,
.menu5 li a:hover ul li a:hover ul {
visibility:visible; border:1px solid #ddd; height:auto; background:#fff;
} 
.menu5 li:hover ul li:hover ul li a,
.menu5 li a:hover ul li a:hover ul li a {
display:block; height:auto;
}
.menu5 li:hover ul li:hover ul li:hover a,
.menu5 li a:hover ul li a:hover ul li a:hover {
text-decoration:underline;
}