4 {{ upvoteCount | shortNum }}
4 {{ upvoteCount | shortNum }}

Dropdown Menu not working in IE

by Oeshy
3 replies
  • WEB DESIGN
    • |
Hi guys.

I have been banging my head against the wall for days trying to fix this.

I have a dropdown menu in XTML and CSS. It works fine in browsers like Firefox but it will not work in IE.

Can someone help me fix it so that it works in IE? Without using Javascript?

If anyone can help me I will be eternally grateful.

Here is my HTML for one of my pages.

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" lang="en">

<!-- This is the head of the page -->
<head>

<!-- This links to my stylesheet style.css -->
<link type="text/css" href="style.css" rel="stylesheet" />

<!--This will display the website title in the browser tab-->
<title>Nak Muay For A Month</title>

</head>

<!-- This is the body of the page -->
<body>

<div id="container">


<div id="header">
<h1>
Nak Muay For A Month
</h1>
</div>

<div id="cssm1">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="2.Thailand/2.1thailand.html">Thailand</a>
<ul>
<li><a href="#">Culture</a></li>
<li><a href="#">Language</a></li>
<li><a href="#">Food</a></li>
<ul>
</ul>
</li>
</ul>
</li>
<li><a href="#">Muay Thai</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Training</a></li>
<ul>
</ul>
</li>
</ul>
</li>

<li><a href="#">Travel</a>
<ul>
<li><a href="#">Activities</a></li>
<li><a href="#">Transport</a></li>
<li><a href="#">Accomodation</a></li>
<ul>
</ul>
</li>
</ul>
</li>
</div>

<!-- This area contains the content of my pages -->
<div id="content">
<h2>

<!-- This code is linking to the image in my directory. The images were edited in photoshop to add some style to their edges. The alt text will be displayed if the image cannot load. This is useful so users can understand what the photo is if they cannot see it. It also is a useful aspect of SEO, making it easier for sites like google to rank my images. Descriptions for alt text are short and accurate. -->
<img src="muaythai.jpg" alt="Muay Thai" class="floatRightClear">

Welcome
</h2>



<p>
Welcome here
</p>

<p>
Information goes here
</p>

</div>

<!-- This div contains my footer. Currently the footer just has a link to the contact page. For the final version of the website I plan to improve the footer by adding a copyright and improving the text style of the contact link. -->
<div id="footer">
Copyright 2011
<a href="1.2contact.html">Contact</a>
</div>
</div>
</body>
</html>
The links in the HTML are not connected yet but the dropdown menu works fine. The site is not uploaded yet as I do not have a web host yet.

Here is the CSS.

Code:
#container
{
margin: 0 30px;
background: #ffffff;
}


#header
{
background: url('thailand-header.jpg');
no-repeat;
border-bottom: none;
padding: 50px;
font-weight:bold;
}

#header h1 
{ 
margin: 0;
text-align: center;
color: #ffffff;
font-family: arial, sans-serif;
font-size: 400%
}

/* I used different shades of yellow for the navigation and rollover. This gels well to create a cohesive theme of design. */

#cssm1 
{
position: absolute;
z-index: 99;
margin: 0 auto;
line-height: 20px; 
}

#cssm1 *
{
padding:0;
margin: 0;
font: 1em arial;
}

#cssm1 * li
{
background: #a68d00;
}

#cssm1 * li:hover  
{
background: #f2cf01; 
}

#cssm1 a 
{ 
display: block; 
border: 1px solid #ffffff;  
color: #ffffff;
font-family: arial, sans-serif;
text-decoration: none; 
padding: 3px 10px; 
}

#cssm1 a:hover 
{
}

#cssm1 ul li, 

#cssm1 ul li ul li  
{ 
width: 120px; 
list-style-type:none; 
}

#cssm1 ul li 
{ 
float: left; 
width: 120px; 
}

#cssm1 ul li ul, 

#cssm1:hover ul li ul, 

#cssm1:hover ul li:hover ul li ul
{ 
display:none;
list-style-type:none; 
width: 120px;
}

#cssm1:hover ul, 
#cssm1:hover ul li:hover ul, 
#cssm1:hover ul li:hover ul li:hover ul 
{ 
display:block; 
}

#cssm1:hover ul li:hover ul li:hover ul 
{ 
position: absolute;
margin-left: 120px;
margin-top: -20px;
}

#content
{
clear: left;
padding: 40px;
}

/* I made the text for the page headings 260% so they were large and immediatly caught the attention of readers */
#content h2
{
color: #000;
font-family: arial, sans-serif;
font-size: 260%;
margin: 0 0 .5em;
}

/* This is for sub headings so I only used a size of 120% */
#content h3
{
color: #000;
font-family: arial, sans-serif;
font-size: 120%;
margin: 0 0 .5em;
}

#footer
{
background: #a68d00;
text-align: right;
font-family: arial, sans-serif;
color: #ffffff;
padding: 20px;
height: 1%;
}

/* This following code is for the image placement. */
img.floatRightClear 
{ 
float: right; 
clear: right; 
margin-top:0px;
margin-bottom:10px;
margin-right:5px;
margin-left:5px;
}

img.floatLeft 
{ 
float: left; 
margin: 4px; 
}

img.floatRight 
{ 
float: right; 
margin: 5px; 
}
#dropdown #menu #working

Trending Topics