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] 9  3285 
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 thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: elad |
last post by:
Hi
The Menu doesn't work properly when I have 2 frame and the Menu popup
frame=document target frame, when I choose item in
the menu the doc opened and the menu get stuck.
Here is the code...
|
by: Chris Beall |
last post by:
Objective: Using an HTML list, create a horizontal nav menu with these
characteristics:
- All menu items have the same width at all times.
- When the window width is reduced, the menu items...
|
by: Randy Smith |
last post by:
Hi,
For some reason, I am unable to get the child entries to work in a
horizontal Menu control. Is there a property that I've failed to set?
The menu entries are supposed to look like this:...
|
by: Sergio E. |
last post by:
Hi group,
I write this post with the following question:
How can I to build an absolutely horizontal menu?, This is because I can't
find how can I configure the menu component of asp.net 2.0...
|
by: camphor |
last post by:
hi,
I have a single column webpage with a horizontal dropdown menu and am trying to make the nav bar fit across the page, the column is 800px, it looks ok in dreamweaver 8 but when I test it in...
|
by: jorislindhout |
last post by:
Dear Reader,
I'm trying to make a text-based menu which has a drop-shadow effect.
I've accomplished this through a list for which the items consist of
two p's: one for the normal text, and one...
|
by: milestogofromhere |
last post by:
It is late so this is probably something really obvious but I am not seeing it. Can someone please help?
Here is the page in question:
html - http://www.itsyourplate.com/index2.php
css -...
|
by: CloudSolutions |
last post by:
Introduction:
For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
|
by: Faith0G |
last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome former...
|
by: taylorcarr |
last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
|
by: Charles Arthur |
last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
|
by: ryjfgjl |
last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
by: Sonnysonu |
last post by:
This is the data of csv file
1 2 3
1 2 3
1 2 3
1 2 3
2 3
2 3
3
the lengths should be different i have to store the data by column-wise with in the specific length.
suppose the i have to...
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
| |
