CSS fly out menus.

hargi

hargi

hargi

Associate
Joined
19 Jul 2006
Posts
1,847
Looks ok in Firefox but not IE :( CSS fly out menus.

Im trying to make a fly out menu and seen some code over at http://www.cssplay.co.uk/menus/muti-line-flyout.html
but in all honesty im not to sure whats going on there.

My try :
Code: 
   <div id="sidecol">
                <ul id="mainnav">
                    <li><a href="#">Home</a></li>
                    <li><a class="fly" href="#">link1</a></li>
                    <ul class="level2">
                        <li><a href="#">flyoutlink</a></li>
                        <li><a href="#">flyoutlink</a></li>
                        <li><a href="#">flyoutlink</a></li>
                     </ul>
                    <li><a href="#">link </a></li>
                    <li><a href="#">link</a></li>
                    <li><a href="#">link</a></li>
                    <li><a href="#">link</a></li>
                </ul>
            </div><!-- end of side coloum -->
Code: 
#mainnav ul, #mainnav li {
    padding-top:15px;
    font-family:"American Typewriter", Arial, Calibri, sans-serif;
    list-style:none;
    text-align:center;
    font-size:20px;
    text-align:center;
}

ul li:hover {
    position:relative;
}

ul ul {
    position:absolute;
    left:-9999px;
}
:hover ul ul {
    left:160px;
    top:0px;
    background-color:#FE0000;
}

#mainnav a, #mainnav a:visited {
   text-decoration: none;
   color:#000;
}

#mainnav a:hover {
    color:#ffcc00;

I can either hide the flyout bit and not get it to display or have it out all the time. also using
#mainnav ul ul {
position:absolute;
left:-9999px;
}
Has no effect it has to be ul ul ?

TIA
 
Last edited:
I've only quickly scanned, but #mainnav ul ul doesnt work because there is only 1 ul beneath mainnav. #mainnav li ul should work.
 
gord said:
I must admit, Ive been very close to telling you just to use one of the many fine CSS menus already freely available. But if you are trying to learn then its good practice.
Click to expand...
Me personally? :p Did you see this thread then?

I'm not the most talented XTHML/CSS-er in the world and I won't ever be. But I can do stuff and I like to get my XHTML nice and valid, to the XHTML 1.0 Strict guidlines, which I think is a good angle on things. The website I want to re-do for work is quite poor in terms of navigation and just a simple dropdown menu would really improve things a lot.

And yeah I'd rather learn how to do a dropdown menu rather than nick one and not know what the CSS code does. I've taken the HTMLDog.com stuff and adapted it a bit for me. :)
 
Thank gord and MarcLister, I managed to get it working. Yeah im trying to learn, I dont mind using other peoples code if i know what is going on. To be honest this menu was done a lot by trial and error just changing the code to see what happened.

Some of the other problems were IE hacks that i had to put in. why cant people just use safari/opera :(
 
hargi said:
Thank gord and MarcLister, I managed to get it working. Yeah im trying to learn, I dont mind using other peoples code if i know what is going on. To be honest this menu was done a lot by trial and error just changing the code to see what happened.
Click to expand...
The reason I linked the HTMLDog.com stuff is that once you've made a list of the menu links you can add the CSS one step at a time and see what's happening with each iteration of the code. :)

hargi said:
Some of the other problems were IE hacks that i had to put in. why cant people just use safari/opera :(
Click to expand...
The last site I did, for a Uni project, I couldn't get to render identically on Opera/Firefox/IE7. The one I've done recently, or started on, for the school I work at does render identically across the three browsers, IE8 now mind.

Weirdly I found that Opera and IE rendered the page identically and that Firefox was 1px out in the dropdowns. I tried to fix it but I couldn't get Firefox to join in a menage a trois. :( I started looking for a way to get Firefox to use its own code for the troublesome bit of the CSS. All I could find was a Javascript, er, script to select browsers. I used a selector for FF3 and it worked!

I would say that I'd ignore IE when designing/coding a site but considering all the computers at school use IE (plan to sneakily Firefox 'em all in the New Year mind ;)) and that a large proportion of the parents probably use IE I need to include IE for this site.
 
yeah that sites for a school and like you say as much as we hate it most people do use IE so it has to work in that first. well done on the identical rendering on 3 browsers :)
I've ended up with a few if statements in there and work rounds for min-height
 
hargi said:
yeah that sites for a school and like you say as much as we hate it most people do use IE so it has to work in that first. well done on the identical rendering on 3 browsers :)
I've ended up with a few if statements in there and work rounds for min-height
Click to expand...
Yep. I'm struggling to think of a market/environment where the IE usage could be as high. :p

And thanks on the identical rendering. I was a bit miffed that I had to resort to some Javascript but both the XHTML and CSS validate so I'm happy. :)
 
You must log in or register to reply here.
Back
Top Bottom