CSS Drop Down Menu Suggestions...

Discussion in 'Web Design and Development' started by JackT06, Dec 23, 2010.

  1. JackT06 macrumors 6502

    JackT06

    Joined:
    Jul 24, 2009
    #1
    Hello,

    I would like to create a drop down menu, prefreblly just in CSS or using images i allready have.

    Attached is my nav bar menu. I would like to create a down down menu on the "Doing DofE" link.

    Could someone give me a hand please...?

    If you think i'm being rude by asking someone to help me out, than please just ignore this thread and move on.
     

    Attached Files:

  2. celticpride678

    Joined:
    Feb 15, 2009
    Location:
    Boston, MA
    #2
    Here is the HTML structure:

    <li><a href="LINK TO DOCUMENTS">Documents</a></li>
    <li id=""><a href="#">Doing DofE</a>
    <ul class="children" id="">
    <li><a href="LINK TO WHAT YOU WANT IN DROP-DOWN">Text</a></li>
    </ul>
    </li>
    <li><a href="LINK TO DOFE NEWS">DofE News</a></li>

    CSS Structure (copied and pasted from my website, modify to your needs):


    #nav{ letter-spacing:1px; } #nav, #nav ul { letter-spacing:1px; list-style: none; line-height: 1; } #nav a {display: block; text-decoration: none; border:none; } #nav a:hover { display: block; text-decoration: none; border:none; background:#30AAFF; color:#FFF } #nav li { background:#EEE; float: left; list-style:none; margin-right:10px} #nav a{ display:block; font-weight:600; color: #000; padding:6px 12px; } #nav a:active, .current_page_item a, #home .on { text-decoration:none } #nav li ul { position: absolute; left: -999em; height: auto; width: 174px; border-bottom: 1px solid #a9a9a9; } #nav li li { width: 172px; border-top: 1px solid #a9a9a9; border-right: 1px solid #a9a9a9; border-left: 1px solid #a9a9a9; background: #F5F5F5; } #nav li li a{ font-weight:normal; font-size:1em; color:#000; } #nav li li a:hover, #nav li li a:active { background:#bed261; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; } a.main:hover { background:none; }
     
  3. JackT06 thread starter macrumors 6502

    JackT06

    Joined:
    Jul 24, 2009
    #3
    Thanks for that! I have tried to do it on my site but not been very successfull see attached image...
    Code:
    <ul>
     
        <li<?php if ($pid == 'Home') { echo ' class="current_page_item"'; } ?>><a href="index.html">Home</a></li>
        <li><a href="Blog.html" <?php if ($currentPage=="Blog") echo 'class=\"current_page_item"'; ?>>Blog</a></li>
        <li><a href="Gallery.html" <?php if ($currentPage=="Gallery") echo 'class=\"current_page_item"'; ?>>Gallery</a></li>
        <li><a href="Documents.html" <?php if ($currentPage=="Documents") echo 'class=\"current_page_item"'; ?>>Documents</a></li>
        <li><a href="DoingDofE.html" <?php if ($currentPage=="DoingDofE") echo 'class=\"current_page_item"'; ?>>Doing DofE</a></li>
        <ul class="children" id="">
        <li><a href="Equipment.html">Equipment</a></li>
        </ul>
        <li><a href="DofE_News.html" <?php if ($currentPage=="DofENews") echo 'class=\"current_page_item"'; ?>>DofE News</a></li>
        <li><a href="ContactUs.html" <?php if ($currentPage=="ContactUs") echo 'class=\"current_page_item"'; ?>>Contact Us</a></li>
    </ul>
    I left the CSS as it was for now.
     

    Attached Files:

  4. celticpride678

    Joined:
    Feb 15, 2009
    Location:
    Boston, MA
    #4
    Link to the site, please?
     
  5. JackT06, Dec 24, 2010
    Last edited: Dec 24, 2010
  6. Eclipse278 macrumors regular

    Joined:
    Jan 21, 2007
    #6
    In your html file, try it without the <ul class="children" id=""> and also erase the closing </ul> tag that comes after the equipment list item. It seems to me like you want each thing to be an item in the list, so making a new ul subset is probably throwing it off and adding the spaces depending on your css.
     
  7. JackT06 thread starter macrumors 6502

    JackT06

    Joined:
    Jul 24, 2009
    #7
    Surely if i was to remove them two than it would go back to being the normall menu...?:confused:
     
  8. Dunmail macrumors regular

    Joined:
    Mar 27, 2009
    Location:
    Skipton, UK
    #8

Share This Page