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;
}
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.
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
bryanau wrote:just know that
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.
Tyssen wrote:bryanau
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.
PawnSuppliesDirect.com
PawnSuppliesDirect.com
Order Online
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!
Sorry, can't help you with
Sorry, can't help you with those CSSPlay menus.
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?
.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.


