By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,727 Members | 766 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,727 IT Pros & Developers. It's quick & easy.

css horizontal list menu

P: n/a
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]
May 16 '06 #1
Share this Question
Share on Google+
9 Replies


P: n/a
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>
May 17 '06 #2

P: n/a
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
~~~~~~~~~~~~~~~
May 17 '06 #3

P: n/a
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
May 18 '06 #4

P: n/a
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. :-)
May 18 '06 #5

P: n/a
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?
May 18 '06 #6

P: n/a
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.
May 18 '06 #7

P: n/a
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

May 18 '06 #8

P: n/a
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.
May 19 '06 #9

P: n/a
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
~~~~~~~~~~~~~~~
May 22 '06 #10

This discussion thread is closed

Replies have been disabled for this discussion.