|
Hi everybody,
I am very happy to find this group. I am searching for a solution to
make a horizontal list menu with submenu on hover.
I found a lot of examples for horizontal lists which open vertical lists
on :hover i.e. http://phoenity.com/newtedge/horizontal_nav/
But what I am looking for is a horizontal list that opens another
horizontal list and both need to be right-floated.
<-- | menu4 | | menu3 | | menu2 | | menu1 |
<-- | menu2.3 - menu2.2 - menu2.1 |
[snip]
<ul class="nav">
<li>
<strong>menu1</strong>
</li>
<li>
<strong>menu2</strong>
<ul>
<li>
<a href="#">menu2.1</a>
</li>
<li>
<a href="#">menu2.1</a>
</li>
<li>
<a href="#">menu2.1</a>
</li>
</ul>
</li>
<li>
<strong>menu3</strong>
<li>
<strong>menu4</strong>
</li>
</ul>
[snip] | |
Share:
|
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> | | |
Verona Busch wrote: Hi everybody,
I am very happy to find this group. I am searching for a solution to make a horizontal list menu with submenu on hover.
I found a lot of examples for horizontal lists which open vertical lists on :hover i.e. http://phoenity.com/newtedge/horizontal_nav/
But what I am looking for is a horizontal list that opens another horizontal list and both need to be right-floated.
[snip]
Verona,
what you seem to be looking for is Javascript. You won't be able to realize
your navigation using CSS alone.
Here's a link that you may wish to check out: http://software.xfx.net/
The program is called DHTML Builder Light and seems to be the software you
may be after.
If you'd like to see how it works, look here: www.gymnasium-burgdorf.de
However, it's payware :-(
Mike
--
~~~~~~~~~~~~~~~ www.majaeger.de
~~~~~~~~~~~~~~~ | | |
Michael Jaeger wrote: Verona Busch wrote: Hi everybody,
I am very happy to find this group. I am searching for a solution to make a horizontal list menu with submenu on hover.
I found a lot of examples for horizontal lists which open vertical lists on :hover i.e. http://phoenity.com/newtedge/horizontal_nav/
But what I am looking for is a horizontal list that opens another horizontal list and both need to be right-floated.
[snip]
Verona,
what you seem to be looking for is Javascript. You won't be able to realize your navigation using CSS alone. Here's a link that you may wish to check out:
http://software.xfx.net/
The program is called DHTML Builder Light and seems to be the software you may be after. If you'd like to see how it works, look here:
www.gymnasium-burgdorf.de
However, it's payware :-(
Mike
Thank you very much. The biggest Problem seems to be the fact, that css
is not able to write the unordered lists from the right to the left. I
am asking myself, if it will figure out the problem by using
DIR-Attributs, CSS.direction and css.unicode-bidi.
I cannot use javascript in a navigation context. Think about users with
javascript turned off.
Thanks Vero | | |
Verona Busch wrote: Michael Jaeger wrote: Verona Busch wrote: Hi everybody,
I am very happy to find this group. I am searching for a solution to make a horizontal list menu with submenu on hover.
I found a lot of examples for horizontal lists which open vertical lists on :hover i.e. http://phoenity.com/newtedge/horizontal_nav/
But what I am looking for is a horizontal list that opens another horizontal list and both need to be right-floated.
[snip]
Verona,
what you seem to be looking for is Javascript. You won't be able to realize your navigation using CSS alone. Here's a link that you may wish to check out:
http://software.xfx.net/
The program is called DHTML Builder Light and seems to be the software you may be after. If you'd like to see how it works, look here:
www.gymnasium-burgdorf.de
However, it's payware :-(
Mike Thank you very much. The biggest Problem seems to be the fact, that css is not able to write the unordered lists from the right to the left. I am asking myself, if it will figure out the problem by using DIR-Attributs, CSS.direction and css.unicode-bidi.
I cannot use javascript in a navigation context. Think about users with javascript turned off.
Thanks Vero
Yes this is it. <ul dir="rtl">. It's that simple. Forget CSS here. :-) | | |
Also sprach Verona Busch: Thank you very much. The biggest Problem seems to be the fact, that css is not able to write the unordered lists from the right to the left.
Wouldn't li { float: right; } do that? | | |
Thomas Mlynarczyk wrote: Also sprach Verona Busch:
Thank you very much. The biggest Problem seems to be the fact, that css is not able to write the unordered lists from the right to the left.
Wouldn't li { float: right; } do that?
No. Well maybe, but I couldn't figure it out. Did not work. This always
right-floated the text but never the li or ul itself. ;-) I spend a lot
of nights on this. | | |
Also sprach Verona Busch: Wouldn't li { float: right; } do that? No. Well maybe, but I couldn't figure it out. Did not work. This always right-floated the text but never the li or ul itself. ;-) I spend a lot of nights on this.
The following produces
[Third ][Second ][First ]
li {
float: right;
}
a {
display: block;
width: 100px;
border: 1px solid red;
}
<ul>
<li><a href="#">First</a></li>
<li><a href="#">Second</a></li>
<li><a href="#">Third</a></li>
</ul>
Greetings,
Thomas | | |
Thomas Mlynarczyk wrote: Also sprach Verona Busch:
Wouldn't li { float: right; } do that? No. Well maybe, but I couldn't figure it out. Did not work. This always right-floated the text but never the li or ul itself. ;-) I spend a lot of nights on this.
The following produces [Third ][Second ][First ]
li { float: right; }
a { display: block; width: 100px; border: 1px solid red; }
<ul> <li><a href="#">First</a></li> <li><a href="#">Second</a></li> <li><a href="#">Third</a></li> </ul>
Greetings, Thomas
OK. Now try it on the submenu. | | |
Verona Busch wrote: Michael Jaeger wrote: Verona Busch wrote: Hi everybody,
I am very happy to find this group. I am searching for a solution to make a horizontal list menu with submenu on hover.
I found a lot of examples for horizontal lists which open vertical lists on :hover i.e. http://phoenity.com/newtedge/horizontal_nav/
But what I am looking for is a horizontal list that opens another horizontal list and both need to be right-floated.
[snip]
Verona,
what you seem to be looking for is Javascript. You won't be able to realize your navigation using CSS alone. Here's a link that you may wish to check out:
http://software.xfx.net/
The program is called DHTML Builder Light and seems to be the software you may be after. If you'd like to see how it works, look here:
www.gymnasium-burgdorf.de
However, it's payware :-(
Mike Thank you very much. The biggest Problem seems to be the fact, that css is not able to write the unordered lists from the right to the left. I am asking myself, if it will figure out the problem by using DIR-Attributs, CSS.direction and css.unicode-bidi.
I cannot use javascript in a navigation context. Think about users with javascript turned off.
For them you may wish to add a site map (as in www.gymnasium-burgdorf.de)
Mike
--
~~~~~~~~~~~~~~~ www.majaeger.de
~~~~~~~~~~~~~~~ | | This discussion thread is closed Replies have been disabled for this discussion. Similar topics
13 posts
views
Thread by elad |
last post: by
|
5 posts
views
Thread by Chris Beall |
last post: by
|
reply
views
Thread by Randy Smith |
last post: by
|
2 posts
views
Thread by Sergio E. |
last post: by
| |
1 post
views
Thread by jorislindhout |
last post: by
| | | | | | | | | | | |