Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Css Pop Up Menu - need help!

    Hi!

    I'm new to CSS and have been trying for the past day to figure out how to make a pop up menu. I've managed to make the menu, but I can't figure out how to make the submenus only pop up when the main menu link is hovered over. What I've marked in bold is what I think should make the submenu area disappear, but it hasn't worked. Can anyone help me?

    Thanks!

    So far, I have this for my css file:

    /* Left sidebar and menu */

    }


    #leftside {clear:left; float:left; margin:0 0 10px; padding:0; width:150px;}
    #leftside ul.avmenu {list-style:none; margin:0 0 18px; padding:0; width:150px;}
    #leftside ul.avmenu li {display:inline; padding:0; width:150px;}
    #leftside ul.avmenu li a {background:url(img/menubg.gif) repeat-x bottom left #f4f4f4; border-bottom:1px solid #d8d8d8; border-left:4px solid #ccc; border-right:1px solid #d8d8d8; border-top:1px solid #d8d8d8; color:#505050; float:left; font-size:1em; font-weight:700; margin-bottom:5px; padding:5px 1px 5px 5px; text-decoration:none; width:138px;}

    #leftside ul.avmenu li a:hover,
    #leftside ul.avmenu li a.current {background:url(img/menubg2.gif) repeat-x bottom left #eaeaea; border-bottom:1px solid #b0b0b0; border-left:4px solid #505050; border-right:1px solid #b0b0b0; border-top:1px solid #b0b0b0; color:#505050;}
    #leftside ul.avmenu ul {font-size:0.9em; margin:0 0 0 15px; padding:0 0 5px 0; width:133px;}
    #leftside ul.avmenu ul a {padding:3px 1px 3px 5px; width:123px;}
    #leftside ul.avmenu ul ul {font-size:1em; width:120px;}
    #leftside ul.avmenu ul ul a {width:108px;}

    #leftside ul.avmenu ul li ul {list-style: none; position: absolute; left: 140px; top: 0; display: none; width: 125px;border-left:1px solid #FFF;}
    #leftside ul.avmenu ul li a:hover ul {display: block;}


    #leftside h2 {font-size:1.5em; font-weight:400;}

  • #2
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Oh, and my Html code is as follows:

    <div id="leftside">
    <h2 class="hide">Site menu:</h2>
    <ul class="avmenu">
    <li><a class="current" href="../../andreas00-v2.0/andreas00-v2.0/index.html">Campus Y </a></li>
    <li><a href="../../andreas00-v2.0/andreas00-v2.0/styles.html">About Us </a></li>
    <ul>
    <li><a href="gallery1.html">Gallery 1</a></li>
    <li><a href="gallery2.html">Gallery 2</a></li>
    <li><a href="gallery3.html">Gallery 3</a></li>
    <li><a href="gallery4.html">Gallery 4</a></li>
    </ul>
    <li><a href="../../andreas00-v2.0/andreas00-v2.0/styles.html">Volunteer!</a></li>
    <li><a href="../../andreas00-v2.0/andreas00-v2.0/styles.html">Calendar</a></li>
    <li><a href="../../andreas00-v2.0/andreas00-v2.0/2-columns.html">Programs </a></li>
    <li><a href="../../andreas00-v2.0/andreas00-v2.0/3-columns.html">Giving</a></li>
    <li><a href="../../andreas00-v2.0/andreas00-v2.0/3-columns.html">Suggestions</a></li>
    <li><a href="../../andreas00-v2.0/andreas00-v2.0/themes.html">Contact Us </a></li>
    <li><a href="../../andreas00-v2.0/andreas00-v2.0/3-columns.html">PL Section </a></li>
    </ul>

  • #3
    Regular Coder
    Join Date
    Feb 2007
    Location
    Seattle
    Posts
    153
    Thanks
    5
    Thanked 9 Times in 9 Posts
    These guys have done all the thinking for you; just copy the code and play with the look:

    http://sperling.com/examples/menuh/

    Gary

  • #4
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •