No replies
yedidel
Offline
newbie
Last seen: 10 years 36 weeks ago
Timezone: GMT+2
Joined: 2010-03-17
Posts: 1
Points: 2

Hello,

I am using the arthemia theme in wordpress.

The dropdown menus for some reason work good in FF and appear below the menu title, but in IE when hovering the menu appears starting on the left edge of the title and not below, I have tried almost everything but it doesn't work.

The CSS:

/* Navigation Bar*/
#navbar {
	margin:0 auto;
	margin-top:15px;
	padding:0px 10px;
	text-transform:uppercase;
	background:#2c2c2c url(images/navbar.png);
	}
 
#page-bar {
	width:722px;
 
	}
 
#page-bar ul {
	list-style: none;
	}
 
#page-bar li {
	float:right;
	list-style:none;
	cursor: pointer;
	display:block;
	border-right:1px solid #333;
 
	}
 
#page-bar li:hover {
	background: #3c78a7;
	}
 
 
#page-bar a, #page-bar a:visited {
	margin: 0px;
	padding:10px 16px;
	font-weight:bold;
	color:#FFF;
	display:block;
	}
 
#page-bar a:hover {
	text-decoration:none;
	display:block;
	}
 
 
/* Dropdown Menus */		
#page-bar li {
	float: right;
	margin: 0px 0;
	padding: 0px 0;
	}
 
#page-bar li li {
	float: right;
	margin: 0px 0;
	padding: 0px 0;
	width: 122px;
	text-transform:none;
	}
 
#page-bar li li a, #page-bar li li a:link, #page-bar li li a:visited {
	background: #2B2B2B;
	width: 122px;
	float: none;
	margin: 0px;
	padding: 5px 10px 5px 18px;
	border-top: 1px solid #C0C0C0;
	}
 
#page-bar li li a:hover, #page-bar li li a:active {
	background: #666666;
	padding: 5px 10px 5px 18px;
 
	}
 
#page-bar li ul {
	position:absolute;
	width: 10em;
	display:none;
 
	}
 
#page-bar li:hover ul {
	left:auto;
	display: block;
 
	}
 
#page-bar li:hover ul, #page-bar li.sfhover ul {
	left:auto;
 
	}

Example of a menu bar HTML:

<div id="navbar" class="clearfloat">
 
<ul id="page-bar" class="right clearfloat">
 
 
<li><a href="#">
	Menu 1
	</a>
 
	<ul>
<li class="cat-item cat-item-24"><a href="#">option 1</a>
</li>
	<li class="cat-item cat-item-24"><a href="#">option 2</a>
</li>
<li class="cat-item cat-item-24"><a href="#">option 3</a>
</li>
<li class="cat-item cat-item-24"><a href="#">option 4</a>
</li>
</ul></li>
 
 
</ul>