IE7 visibility

Forum Moderators: not2easy

Message Too Old, No Replies

IE7 visibility

agsiegel

5:09 pm on Feb 25, 2009 (gmt 0)

I figured this was a common problem, but my search did not reveal any answers. Sorry if this has been solved before.

I am trying to create a simple CSS menu. What I have works perfectly in Firefox, but not IE7. I'd appreciate any guidance from this forum.

HTML

CSS

.menu {
margin: 0;
padding: 0;
list-style-type: none;
padding-right: 5px;
font-size: 10pt;
}

.menu a {
text-decoration: none;
color: #000000;
}

.menu a:hover {
background: #000099;
color: #ffffff;
}

.menu li ul {
background: #eeeeee;
position: absolute;
visibility: hidden;
width: 175px;
padding: 5px;
border-top: 1px solid #ffffff;
border-left: 1px solid #ffffff;
border-right: 1px solid #999999;
border-bottom: 1px solid #999999;
}

.menu li:hover ul {
visibility: visible;
}

sandblocks

8:27 am on Mar 7, 2009 (gmt 0)

This code works, but there are still some cross-browser alignment/position issues you'll need to work on:

<!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>
<style>
.menu {
margin: 0;
padding: 0;
list-style-type: none;
padding-right: 5px;
font-size: 10pt;
}

.menu a, .menu a:link, .menu a:visited {
text-decoration: none;
color: #000000;
display: block;
overflow: hidden;
}

.menu a:hover {
background: #000099;
color: #ffffff;
}

.menu li:hover ul {
visibility: visible;
}
</style>
</head>
<body>

IE7 visibility

agsiegel

sandblocks

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week