Forum Moderators: not2easy
I have a problem to get this working on Opera 7.x
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.0 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;padding: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>
