SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member rharcott's Avatar
    Join Date
    Mar 2004
    Location
    Abbotsford
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post Taming Dropdowns (or rather flyouts)

    I am managing to frustrate myself all over the board.

    I have this CSS for my menu
    UL#mainmenu{
    margin: 0;
    padding: 0;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    list-style:none;
    font-size: 10px;
    font-style: normal;
    font-weight: bolder;
    font-variant: normal;
    text-transform: none;
    display: block;
    color: #a7a7a7;
    text-decoration:none;
    }
    UL#mainmenu LI {
    border-top-width:1px;
    border-top-style:solid;
    border-top-color: #999999;
    }
    UL#mainmenu li a, UL#mainmenu li a:link, UL#mainmenu li a:visited {
    font-size: 10px;
    color: #000;
    text-decoration:none;
    display:block;
    width: 96%;
    padding: 4px 2%;
    }
    UL#mainmenu li a:hover, UL#mainmenu li a:focus {
    font-size: 10px;
    color: #fff;
    text-decoration:none;
    font-weight: bolder;
    display: block;
    width: 96%;
    background-color: #006055;
    }
    UL#mainmenu li a:active{
    font-size: 10px;
    color: #006055;
    text-decoration:none;
    }

    I would like to create a fly-out to the right side menu
    <div id="menumain">
    <ul id="mainmenu">
    <li><a href="index.asp">Home</a></li>
    <li><a href="overview.asp">Products</a></li>
    <ul>
    <li><a href="faq.asp">FAQ</a></li>
    <li><a href="pricing.asp">Pricing</a></li>
    </ul>
    <li><a href="support.asp">Support</a></li>
    <li><a href="company.asp">Company</a></li>
    <li><a href="partners.asp">Partners</a></li>
    <li><a href="contact.asp">Contact</a></li>
    </ul>
    </div>

    I've been attempting to modify the suckerfish demo and failed miserably.
    I need this to be a vertical menu with the submenu going out to the right and down, not horizontal going down and then right. I just can't seem to wrap my head around this without breaking it altogether.
    Can anyone point me to an example of a working vertical menu that accomplishes this?
    TIA in advance

  2. #2
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  3. #3
    SitePoint Member rharcott's Avatar
    Join Date
    Mar 2004
    Location
    Abbotsford
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Got that

    ok - got that thanks

    I have a 2 column layout, with the left column floated which is where I wanted this menu to go.

    I can't seem to figure out how to get this menu to go to the left of the left float.

    And the menu works well in IE but not at all in Firefox. Should it work in both?

  4. #4
    SitePoint Member rharcott's Avatar
    Join Date
    Mar 2004
    Location
    Abbotsford
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    oops

    Menu:
    <div id="menumain">
    <br>
    <br>
    <ul id="nav">
    <li><a href="index.asp">Home</a></li>
    <li><a href="overview.asp">Products</a></li>
    <li><a href="products.asp">Pricing</a></li>
    <ul>
    <li><a href="faq.asp">FAQ</a></li>
    </ul>
    <li><a href="products.asp">Free Trial</a></li>
    <li><a href="products.asp">Support</a></li>
    <li><a href="products.asp">Company</a></li>
    <li><a href="products.asp">Partners</a></li>
    <li><a href="contact.asp">Contact</a></li>
    <li></li>
    </ul>
    </div>

    MenuMain (inside a wrapper)

    #menumain {
    float: left; margin-left:3px; margin-top:15px; width:139px; height:205px;
    }


Bookmarks

Posting Permissions

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