8 replies [Last post]
bryanau
bryanau's picture
User offline. Last seen 2 years 24 weeks ago. Offline
newbie
Joined: 2008-03-04
Posts: 10
Points: 0

So I got this menu to work well with style and the hover method works in IE6, but when you hover over the appropriate link, the hidden hover section only appears in one location and doesn't come out where the actual link is.

Heres the CSS:

/* CSS Document */

.menu{
font-family: arial, sans-serif;
width:100px;
height:100px;
position:relative;
font-size:10px;
margin:5px 5px 60px 5px;
z-index:100;
}
.menu ul {
padding:0;
margin:0;
list-style-type: none;
background-color:#000000;
width:100px;
height:180px;
}
.menu ul li ul {
visibility:hidden; position:absolute; height:0; overflow:hidden; top:0; left:85px;
}
.menu ul li {
float:left;
}
.menu ul li a, .menu ul li a:visited {
display:block;
float:left;
text-decoration:none;
color:#ffffff;
width:100px;
height:20px;
line-height:19px;
font-size:11px;
background:transparent;
padding-left:10px;
border-left:1px solid #5fb7dd;
}
* html .menu ul li a, * html .menu ul li a:visited {width:100px; w\idth:90px;}

.menu table {
border-collapse:collapse;
border:0;
margin:0;
padding:0;
font-size:1em;
position:absolute;
left:0;
top:0;
}

/* first line for IE7 and non-IE browsers - second line for IE5.5 and IE6 */
.menu ul li:hover a,
.menu ul li a:hover{
background:#5fb7dd; color:#fff;
}

.menu ul li:hover {position:relative; z-index:90;}
* html .menu2 ul li a:hover {position:relative; z-index:100;}

.menu ul li:hover ul,
.menu ul li a:hover ul {
visibility:visible;
position:absolute;
height:auto;
border-left:1px solid #5fb7dd;
background:#000;
overflow:visible;
top:0;
left:110px;
_left:101px;
}
.menu ul li:hover ul li a,
.menu ul li a:hover ul li a{
width:100px;
display:block;
background:transparent;
color:#fff;
line-height:15px;
padding:0px 0 5px 10px;
height:auto;
text-decoration:none;
}

.menu ul li:hover ul li:hover a,
.menu ul li a:hover ul li a:hover {
background:#5fb7dd; color:#ffffff;
}
.menu ul li:hover ul li ul,
.menu ul li a:hover ul li a ul {
visibility:hidden; position:absolute; height:0; overflow:hidden; top:0; left:85px;
}
.menu ul li:hover ul li:hover ul,
.menu ul li a:hover ul li a:hover ul {
visibility:visible; position:absolute; height:auto; color:#000; padding:0;
list-style-type:none;
background:#5fb7dd;
}
.menu ul li:hover ul li:hover ul li a,
.menu ul li a:hover ul li a:hover ul li a {
display:block; background:transparent; color:#ffffff;
}

.menu ul li:hover ul li:hover ul li:hover a,
.menu ul li a:hover ul li a:hover ul li a:hover {
background:#5fb7dd; color:#ffffff;
}

Tyssen
Tyssen's picture
User offline. Last seen 6 hours 18 min ago. Offline
rank Moderator
Moderator
Timezone: GMT+10
Joined: 2004-05-01
Posts: 7411
Points: 509

A look at some HTML would've

A look at some HTML would've been useful but in its absence my complete guess would be you need to add position: relative to the top level list items.

How to get help
Post a link. If you can't post a link, post ALL your code, both HTML & CSS. No server-side code; just the code sent to the browser.
Use tags.
My articles | CSS Reference

bryanau
bryanau's picture
User offline. Last seen 2 years 24 weeks ago. Offline
newbie
Joined: 2008-03-04
Posts: 10
Points: 0

The HTML has nothing to do

The HTML has nothing to do with this menu, just know that it's in a div on the main div on all the pages...its the actual flyout or hover portion that won't move along the left side links...i tried adding position:relative; to the hover parts that "flyout" and it did nothing. It has them all flyout but they all fly out next to the very first link the website is pawnsuppliesdirect.com the Order Online left nav bar

Tyssen
Tyssen's picture
User offline. Last seen 6 hours 18 min ago. Offline
rank Moderator
Moderator
Timezone: GMT+10
Joined: 2004-05-01
Posts: 7411
Points: 509

bryanau wrote:just know that

bryanau wrote:
just know that it's in a div on the main div on all the pages

Just know that the forum rules state that you must post ALL your HTML & CSS, not just snippets.

How to get help
Post a link. If you can't post a link, post ALL your code, both HTML & CSS. No server-side code; just the code sent to the browser.
Use tags.
My articles | CSS Reference

Ed Seedhouse
Ed Seedhouse's picture
User offline. Last seen 12 hours 3 min ago. Offline
rank Guru
Guru
Timezone: GMT-7
Joined: 2005-12-14
Posts: 3336
Points: 429

Tyssen wrote:bryanau

Tyssen wrote:
bryanau wrote:
just know that it's in a div on the main div on all the pages

Just know that the forum rules state that you must post ALL your HTML & CSS, not just snippets.

And that there is a very good reason for that rule.

Ed Seedhouse

Wrangellia, on the shores of the Salish sea.
Posting Guidelines

bryanau
bryanau's picture
User offline. Last seen 2 years 24 weeks ago. Offline
newbie
Joined: 2008-03-04
Posts: 10
Points: 0

PawnSuppliesDirect.com

PawnSuppliesDirect.com

Order Online

Welcome to PawnSuppliesDirect.com where we have tons of the best supplies you can buy at the lowest price. We have items from books to expand your knowledge with, to watch batteries for any type of watch you could own. Feel free to browse our order online catagories located on the left and if you have any payment questions, they might be answered under the Our Guarentee page.

Daily Specials & Discounts

Check back here for daily specials and discounts!

Tyssen
Tyssen's picture
User offline. Last seen 6 hours 18 min ago. Offline
rank Moderator
Moderator
Timezone: GMT+10
Joined: 2004-05-01
Posts: 7411
Points: 509

Sorry, can't help you with

Sorry, can't help you with those CSSPlay menus.

How to get help
Post a link. If you can't post a link, post ALL your code, both HTML & CSS. No server-side code; just the code sent to the browser.
Use tags.
My articles | CSS Reference

Stomme poes
Stomme poes's picture
User offline. Last seen 4 days 4 hours ago. Offline
rank Elder
Elder
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1807
Points: 321

I need a picture

Sorry, yeah, Stu's menus are really messy CSS (it works, but is difficult to debug). But I have wrestled with one (for about a year now) myself... could you link to an image or a site showing what exactly it's doing? It appears on :hover but not at the right place?? So where is it ending up? Or the clickable part isn't showing up??

Have you changed the position coordinates around to move the sub around?

Quote:
.i tried adding position:relative; to the hover parts that "flyout" and it did nothing.

I think Tyssen meant having position: relative on the parents of those flyout areas...

Also this:

.menu table {
border-collapse:collapse;
border:0;
margin:0;
padding:0;
font-size:1em;
position:absolute;
left:0;
top:0;
}

Can go. Those tables don't render anyway. I took mine out the moment I discovered they weren't doing anything.

I'm no expert, but I fake one on teh Internets

sarah_flash
sarah_flash's picture
User offline. Last seen 2 years 23 weeks ago. Offline
newbie
Joined: 2008-03-19
Posts: 2
Points: 0

i have a similar problem

This comment has been moved here.