Home/ Questions/Q 7806915
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T02:41:08+00:00

I have created a drop down menu in css. The drop down menu is

  • 0

I have created a drop down menu in css.

The drop down menu is rendered correctly in Firefox, Chrome and IE8. But in IE8 I am not able to make the selection from the drop down. it immediately vanishes..

css file …

ul {
/*  font-family: Arial, Verdana;
  font-size: 14px;*/
  margin: 0;
  padding: 0;
  list-style: none;
 }
ul li {
  display: block;
  position: relative;
  float: left;
}
li ul { display: none; }
ul li a {
  display: block;
  text-decoration: none;
  color: #ffffff;
  border-top: 1px solid #ffffff;
  padding: 5px 15px 5px 15px;
  background: #2C5463;
  margin-left: 1px;
  white-space: nowrap;
}
ul li a:hover { background: #617F8A; }
li:hover ul {
  display: block;
  position: absolute;
  left:none;
}
li:hover li {
  float: none;
  font-size: 11px;
}
li:hover a { background: #617F8A; }
li:hover li a:hover { background: #95A9B1; }

~

HTML (php file here..)

<!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" xml:lang="en-gb" lang="en-gb" >
<HEAD>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<TITLE></TITLE>
<link rel="stylesheet" href="menu.css" type="text/css">
</HEAD>
<BODY>
<div id="header" class="top-bottom">
<ul id="menu">
  <li><a href="">Home</a></li>
  <li><a href="">Profile</a>
    <ul>
    <li><a href="./edit_profile.php">Edit Profile</a></li>
    <li><a href="">View Profile</a></li>
    <li><a href="">Add Education</a></li>
    </ul>
  </li>
  <li><a href="">My Connections</a></li>
  <li><a href="">Change Password</a></li>
</ul>
</div>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    A lot of your styles were being inherited by your submenu so you have to add a more specific selector in order to target your first level and sub menu properly. Also, you were positioning absolutely your submenu on hover, that should be set on the main declaration and not on a state. Here is a fixed version:

    CSS

    ul {
/*  font-family: Arial, Verdana;
  font-size: 14px;*/
  margin: 0;
  padding: 0;
  list-style: none;
 }
#menu > li { /* used the child selector here to properly target your first level menu items */
  position: relative;
  float: left;
}
#menu li ul {
    display: none;
    position: absolute; /* moved the positioning to the main declaration instead */
    left:0; /* fixed this propery, there is no left:none as you had it before */
    top:100%;
}

#menu a {
  display: block;
  text-decoration: none;
  color: #ffffff;
  border-top: 1px solid #ffffff;
  padding: 5px 15px 5px 15px;
  background: #2C5463;
  margin-left: 1px;
  white-space: nowrap;
}
#menu li a:hover { background: #617F8A; }

#menu li:hover ul {
  display: block;
}

#menu li:hover li {
  font-size: 11px;
}
#menu li:hover a { background: #617F8A; }
#menu li:hover li a:hover { background: #95A9B1; }
    • 0