Hi,
I have a problem to get this working on Opera 7.x+. This does not need
to work on older Opera browsers
There are problems on rendering the sub-level navigation. It aligns
right on Firefox and IE 6.
Sometimes there are also some problems on IE 5 or IE 5.5.
I would like the navigation to work like this:
* The menu item width should not be defined because it differs on every
language.
* The sub navigation item should be aligned to the mainmenu containing
the menu item. The problem with Opera
comes if we have more than one subnavigation items. The items aren't
aligned next to each other. Instead they are
aligned one item per line.
Thanks in advance.
----------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test navigation</title>
<style type="text/css">
<!--
html {margin:0px;}
body {margin:0px;padding:0px;font-family: Arial, Helvetica,
sans-serif;font-size: 62.5%;}
#navwrapper{font-family: Arial, Helvetica,
sans-serif;font-size:1.2em;width:712px;height:48px;margin:0px 0px 10px
0px;}
#navleft,#navright {float:left;width:8px;height:48px;}
#navitems {position:relative;left:0;top:0;margin:0px 0px 0px 0px;}
#main_navi {margin:0;padding:0;list-style:none;display:inline;}
#main_navi li {margin:0px 0px 0px
0px;padding:0px;float:left;position:relative;}
#main_navi .divider,
#main_navi .divider:active
{float:left;text-decoration:none;font-weight:bold;display:block;margin:0px;padding:5px
6px 5px 6px;}
#main_navi .no_divider,
#main_navi .no_divider:active
{float:left;text-decoration:none;font-weight:bold;display:block;margin:0px;padding:5px
6px 5px 6px;}
#main_navi li.on{
color:#2C568B;background-color:#E7F0FF;height:25px;float:left;text-decoration:none;font-weight:bold;margin:0px;padding:0px;}
#sub_navi
{position:absolute;left:0px;top:25px;margin:0;padd ing:0;list-style:none;display:inline;
white-space:nowrap;}
#sub_navi li
{float:left;height:22px;text-decoration:none;font-weight:bold;margin:0px;padding:0px;display:inline; }
#sub_navi li.list_on
{height:22px;float:left;text-decoration:none;font-weight:bold;margin:0px;padding:0px;}
#sub_navi span.link_on
{color:#2C568B;float:left;text-decoration:none;font-weight:bold;
margin:0px;padding:4px 6px 4px 6px;}
#search {margin:0px 0px 0px 500px;padding:4px 0px 0px 3px;height:25px;}
#search_box{width:130px;height:18px;margin:0px 5px 0px 4px;border:1px
solid #A4ABB1;float:left;}
-->
</style>
</head>
<body>
<div id="navwrapper">
<div id="navleft"> </div>
<div id="navitems">
<ul id="main_navi">
<li><a href="#" class="divider">Menu 1</a></li>
<li class="list_on"><span class="divider">Menu 2</span>
<ul id="sub_navi">
<li><a href="#">Sub Menu 1</a></li>
<li class="list_on"><span class="link_on">Sub Menu 2</span></li>
</ul>
</li>
<li><a href="#" class="divider">Menu 3</a></li>
<li><a href="#" class="divider">Menu 4</a></li>
<li><a href="#" class="divider">Menu 5</a></li>
<li><a href="#" class="no_divider">Menu 6</a></li>
</ul>
<div id="navright"> </div>
</div>
<div id="search">
<form name="form1" id="form1" method="post" action="#">
<input type="Text" name="qt" id="search_box" />
<a href="javascript:document.form1.submit();">Search</a>
</form>
</div>
</div>
</body>
</html>
