5 replies [Last post]
Zearin Galaurum
Zearin Galaurum's picture
Offline
Regular
Maryland, USA
Last seen: 15 years 41 weeks ago
Maryland, USA
Timezone: GMT-5
Joined: 2004-02-07
Posts: 34
Points: 0

I'm trying to do some pure CSS menu popups using lists. The attempt at making this is here:

http://www.health.umd.edu/menutest.html

I am unable to get it to work. Can anybody help?

(Just so you know, the only part where I am attempting to produce a popup menu is under the orange square, "General Information". When I get that working I'll make the other items have popups as well, but in just trying to get it to work I figured one is enough.)

Thanks for any and all help!

P.S.- I guess I should link to the stylesheet as well, huh?
http://www.health.umd.edu/stylesheet_menutest.css

-- Zearin Galaurum
http//tony.gonk.net

mkjoker
Offline
Regular
Dresden
Last seen: 18 years 4 weeks ago
Dresden
Timezone: GMT+1
Joined: 2004-09-01
Posts: 40
Points: 0

Pure CSS ul & li Popup Menus. NEED HELP!

I do it like this:

div.navi a span {display: none;}
div.navi a:hover span {
	display: block; border: 3px solid rgb(4,4,4); background: rgb(100,200,50); color:rgb(0,30,0);
	position: absolute; left: 0; top: 35px; width: 222px; 
}
div.navi div.block {position:relative; float:left; width:119px; top:1px;  margin: 2px;}

and th html:

<div class="navi">
	<div class="block">
          <a href="somewhere">somewhere
           <span>Why would you link to somewhere.</span>
          </a>
         </div>
         ...
</div>

You may have to assign a z-index to prevent the popups from becoming pop-unders. Assign it to the navi-div.

mkjoker
Offline
Regular
Dresden
Last seen: 18 years 4 weeks ago
Dresden
Timezone: GMT+1
Joined: 2004-09-01
Posts: 40
Points: 0

Pure CSS ul &amp; li Popup Menus. NEED HELP!

I've just had a look at your html and realised that you wanted to have a popup menu not just a pop-up info for the menu item.

The only working css example that I know can be found here:
http://www.stunicholls.myby.co.uk/menus/dropdownfun.html

Zearin Galaurum
Zearin Galaurum's picture
Offline
Regular
Maryland, USA
Last seen: 15 years 41 weeks ago
Maryland, USA
Timezone: GMT-5
Joined: 2004-02-07
Posts: 34
Points: 0

Progress...

Hmm... I am partially there.

Thanks for the linkage. I was loathe to implement a solution that didn't validate according to W3C standards, but you got me searching on Google for similar articles, and I found one...

I realized after a little reading that I was writing the CSS wrong. I was putting the <code>:hover</code> in the wrong spot. I forgot to read, "When hovering over object a, apply the following styles to object b." Simple in the end, but I had been missing it.

Trick is, it doesn't work in IE, because IE doesn't apply :hover to a friggin thing except links. I think I can write a workaround by using the :hover on the links in the 5 main items and doing things that way...we'll see.

w00t! I'm happy! Tongue

-- Zearin Galaurum
http//tony.gonk.net

anzlovar
Offline
Regular
Last seen: 18 years 3 weeks ago
Joined: 2004-09-09
Posts: 14
Points: 0

Working one:

Here's an example of drop down and "drop left" menus, which I have worked out myself. The drop-down works in IE6 too, and validates in w3.org. The "drop left" one has problems in IE still, but I am going to solve them eventually.

http://jezuiti.rkc.si/

Sorry about the language, but at list noone can get offended by the religious content Wink

eff
Offline
Regular
Berlin, Germany
Last seen: 18 years 3 weeks ago
Berlin, Germany
Timezone: GMT+1
Joined: 2004-09-10
Posts: 18
Points: 0

Re: Working one:

anzlovar wrote:
Here's an example of drop down and "drop left" menus, which I have worked out myself. The drop-down works in IE6 too, and validates in w3.org. The "drop left" one has problems in IE still, but I am going to solve them eventually.

http://jezuiti.rkc.si/

Sorry about the language, but at list noone can get offended by the religious content Wink

I am seeing a horizontal scrollbar on your site using Opera 7.54...

Fruits rock!