<html>
<head>
<style type="text/css">
body {
margin:0px;
padding:0px;
background:#555555;
}
.innerMenu {
margin-top:20px;
}
ul.innerMenu li {
font-size:13px;
width:170px;
height:25px;
color:#fff;
font-weight:normal;
list-style:none;
background:url(/images/myarrow.png) right top no-repeat;
}
ul.innerMenu li:hover {
width:170px;
height:25px;
background:#252525 url(/images/myarrow.png) right top no-repeat;
}
ul.innerMenu li:hover .subMenu {
left:200px;
top:auto;
top:20px;
}
.submenu li {
width:165px;
height:30px;
padding:5px;
}
.submenu li:hover {
width:165px;
height:30px;
padding:5px;
}
.innerMenu li a:link {
color:#fff;
text-decoration:none;
}
.innerMenu li a:visited {
color:#fff;
}
.innerMenu li a:hover {
background:#252525;
}
.subMenu {
float: left;
left: -999em;/* Hide Div layers */
margin: 0px auto;
position: absolute;
text-align: left;
}
</style>
</head>
<body>
<!--Start menu -->
<ul class="innerMenu">
<li><a href="#">Main Item 1</a>
<div class='submenu'>
<ul>
<li><a href="#">Item2</a></li>
<li><a href="#">Item3</a></li>
<li><a href="#">Item4</a></li>
<li><a href="#">Item5</a></li>
</ul>
</div>
</li>
<!--End Menu Item -->
<!--Start Menu -->
<li><a href="#"> Main Item 2</a>
<div class='submenu'>
<ul>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</li>
<!--End Menu Item -->
<!--Start Menu -->
<li><a href="#"> Main Item 3</a>
<div class='submenu'>
<ul>
<li><a href="#">Item2</a></li>
<li><a href="#">Item3</a></li>
<li><a href="#">Item4</a></li>
<li><a href="#">Item5</a></li>
</ul>
</div>
</li>
<!--End Menu Item -->
<!--Start Menu -->
<li><a href="#"> Main Item 4</a>
<div class='submenu'>
<ul>
<li><a href="#">Item2</a></li>
<li><a href="#">Item3</a></li>
<li><a href="#">Item4</a></li>
<li><a href="#">Item5</a></li>
</ul>
</div>
</li>
<!--End Menu Item -->
<!--Start Menu -->
<li><a href="#"> Main Item 5</a>
<div class='submenu'>
<ul>
<li><a href="#">Item2</a></li>
<li><a href="#">Item3</a></li>
<li><a href="#">Item4</a></li>
<li><a href="#">Item5</a></li>
</ul>
</div>
</li>
<!--End Menu Item -->
</ul>
<!--End Menu -->
</body>
</html>
Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.
Have a better answer? Share it in a comment.
From novice to tech pro — start learning today.
Add a strict doctype to your page, and work from there.
That way most browsers will all show the same.
For example add above your <html> tag:
Open in new window
orOpen in new window