Announcement

Collapse
No announcement yet.

~ css vertical menu with slide-out sub menu, requested by Pegasus ~

Collapse
This is a sticky topic.
X
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • #16
    Originally posted by coothead View Post
    It would have been relatively simple if we did not have to code for IE6.
    Amen

    Comment


    • #17
      What do I have to add and where to get the slide-outs to be level with the first choice? Do I have to remove the link/line that's got a CSS class of 'hidden'? I'm working in Safari on this. The page seems to come up okay when I see it in Firefox.
      Cat-herder Extraordinaire

      Comment


      • #18
        Hi there Peg,

        I am not really sure what you mean.

        I know that you are using Safari on a Mac but for me on the pc, Safari and Firefox look identical.

        Can you show me a screenshot?

        Of course, there is no guarantee that I will be able to solve this latest problem.


        ~ the original bald headed old fart ~

        Comment


        • #19
          Now that I've figured out how to take a screenshot with this computer.... *lol* I'm a bit slow on some things.

          Anyway, here you go. It does it with all the lists, drop one box down before it opens up. It's really hard to navigate that way, 'specially when you're as mouse-crippled as I am (darn thing never wants to go where I tell it to go on the first go round).
          Attached Files
          Cat-herder Extraordinaire

          Comment


          • #20
            I got it!!!!!

            .link .link .sub is now positioned top: -25px;
            Cat-herder Extraordinaire

            Comment


            • #21
              Oh dear, 4 more years of dealing with IE6 coding errors and problems? I'm just starting out! Why couldn't I have been born in 2001...

              Comment


              • #22
                I don't know if you found this or not, but...

                When you go to the first submenu, scroll to the last link in that submenu, then move your mouse over the next sub menu, the first submenu disappears (apologies for all the submenus)
                Attached Files

                Comment


                • #23
                  That's perfect, coot. Exactly what I was hoping for. Thanks!
                  ________________________________--
                  Last edited by Pegasus; 05-19-2010, 11:53 PM. Reason: sig removed - you can have one after 30 days membership AND 30 posts

                  Comment


                  • #24
                    Hi everyone,

                    I'm looking for some help in HTML and CSS coding.

                    Coothead, can you explain me this code:

                    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
                    <html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
                    <title>{ visibility: inherit; } CSS Flyout Menu </title>
                    <style type="text/css">
                    <!--
                    * {
                    margin:0;
                    padding:0;
                    }
                    body {
                    font-size:100%;
                    background:#ccc;
                    }
                    #nav {
                    list-style:none;
                    margin:20px;
                    width:150px;
                    }
                    #nav li {
                    width:150px;
                    float:left;
                    cursor:pointer;
                    position:relative;
                    background:#999;
                    text-align:center;
                    border:1px solid #000;
                    border-bottom:1px solid #000;
                    }
                    #nav .last {
                    border-bottom:1px solid #000;
                    }
                    #nav a {
                    display:block;
                    color:#000;
                    font-weight:bold;
                    text-decoration:none;
                    line-height:2em;
                    }
                    /* --------- Fly Out -------- */
                    #nav ul {
                    position:absolute;
                    left:-500em;
                    list-style:none;
                    }
                    #nav li:hover ul {
                    left:150px;
                    top:-1px;
                    }
                    -->
                    </style>
                    <!--[if IE 6]>
                    <style type="text/css">
                    body{behavior:url("csshover.htc");}
                    </style>
                    <![endif]-->
                    </head>
                    <body>

                    <ul id="nav">
                    <li><a href="#">HOME</a></li>
                    <li><a href="#">ABOUT</a>

                    <ul>
                    <li><a href="#">GENERAL</a></li>
                    <li><a href="#">BOOKS</a></li>
                    <li><a href="#">FINE ART</a></li>
                    <li><a href="#">READING</a></li>
                    <li class="last"><a href="#">WRITING</a></li>

                    </ul>
                    </li>
                    <li><a href="#">DIRECTIONS</a></li>
                    <li><a href="#">SUPPORT</a></li>
                    <li class="last"><a href="#">CONTACT</a></li>
                    </ul>

                    </body>

                    </html>

                    I know about the body code, that's what I know, and a bit of the CSS above, but I just can't figure everything out... If you can help me (at least with the part that goes #nav li:hover ul {...} - that's the part I realy don't understand).

                    Thanks in advance,

                    Aleksandar

                    Comment


                    • #25
                      posting

                      I'm trying to post something on here, but it's not saving it and posting.

                      Comment


                      • #26
                        Hi there conquer,

                        please start a new thread for your problem, this one is rather old,
                        and it was really written to include the now defunct IE6 browser.


                        ~ the original bald headed old fart ~

                        Comment


                        • #27
                          I hope NOT Coothead!

                          But if you are, can I have your awesome knowledge of CSS3? Please?

                          Comment

                          Working...
                          X