No help?
OK, i found a solution for mozilla firefox, but it does not work with
IE. The first <ul> will work right-floated, but the second one won't.
I can't solve the problem. Please help!
Verob
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>css test</title>
<style type="text/css" media="screen">
div{
position:relative;
width:100%;
float:right;
text-align:right;
}
/*Nav bar styles*/
ul.nav,
..nav ul{
margin: 0;
padding: 0;
cursor: default;
list-style-type: none;
display: inline;
/*verob*/
float:right;
}
ul.nav{
display: table;
}
ul.block{
width: 100%;
table-layout: fixed;
}
ul.nav>li{
display: table-cell;
position: relative;
padding: 2px 6px;
}
/*
ul.nav>li:hover{
padding-right: 1px;
}*/
ul.nav li>ul{
display: none;
position: absolute;
max-width: 40ex;
margin-left: -6px;
margin-top: 2px;
}
ul.nav li:hover>ul{
display : block;
}
..nav ul li a{
display: block;
padding: 2px 10px;
}
/*Menu styles*/
ul.nav,
..nav ul,
..nav ul li a{
background-color: #fff;
color: #369;
}
ul.nav li:hover,
..nav ul li a:hover{
background-color: #369;
color: #fff;
}
ul.nav li:active,
..nav ul li a:active{
background-color: #036;
color: #fff;
}
ul.nav,
..nav ul{
border: 1px solid #369;
}
..nav a{
text-decoration: none;
}
/*Nav bar styles*/
ul.sub,
..sub ul{
margin: 0;
padding: 0;
cursor: default;
list-style-type: none;
display: inline;
/*verob*/
float:right;
}
ul.sub{
display: table;
}
ul.block{
width: 100%;
table-layout: fixed;
}
ul.sub>li{
display: table-cell;
position: relative;
padding: 2px 6px;
}
/*
ul.sub>li:hover{
padding-right: 1px;
}*/
ul.sub li>ul{
display: none;
position: absolute;
max-width: 40ex;
margin-left: -6px;
margin-top: 2px;
}
ul.sub li:hover>ul{
display : block;
}
..sub ul li a{
display: block;
padding: 2px 10px;
}
/*Menu styles*/
ul.sub,
..sub ul,
..sub ul li a{
background-color: #fff;
color: #369;
}
ul.sub li:hover,
..sub ul li a:hover{
background-color: #369;
color: #fff;
}
ul.sub li:active,
..sub ul li a:active{
background-color: #036;
color: #fff;
}
ul.sub,
..sub ul{
border: 1px solid #369;
}
..sub a{
text-decoration: none;
}
</style>
</head>
<body>
<div>
<ul class="nav">
<li>MainMenu1<ul class="sub">
<li>SubMenu1.1</li>
<li>SubMenu1.2</li>
<li>SubMenu1.3</li>
</ul>
</li>
<li>MainMenu2<ul class="sub">
<li>SubMenu2.1</li>
<li>SubMenu2.2</li>
<li>SubMenu2.3</li>
</ul>
</li>
<li>MainMenu3<ul class="sub">
<li>SubMenu3.1</li>
<li>SubMenu3.2</li>
<li>SubMenu3.3</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
