SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Member cahura's Avatar
    Join Date
    Sep 2008
    Location
    London, England - UK
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Dropline Navigation Help!!

    I have been trying to work this one out for days.

    I am unable to make my CSS dropline (not dropdown) navigation display the 1st level child node on hover (i.e. the child node should display horizontally). I do not understand how to use the "li hover" e.t.c. tags. I have pasted my code below. Please,SOS.






    <style type="text/css">

    #navigation{
    width: 910px;
    height: 51px;
    }

    #menu_nav {
    background-image: url(system/images/main_nav_bg.jpg);
    width: 890px;
    height: 30px;
    margin: 0 11px 0 11px;
    z-index: 3;
    }

    ul#tabNav {
    list-style-type: none;
    background: transparent;
    position: absolute;
    top: 8px;
    left: 20px;
    margin: 0;
    padding: 8px 0 0 15px;
    font: bold 14px Verdana, Arial, Helvetica, sans-serif;
    }

    ul#tabNav li {
    float: left;
    height: 30px;
    }

    #tabNav ul li a:hover {

    }

    ul#tabNav a:link, ul#tabNav a:visited {
    display: block;
    text-decoration: none;
    color: #003F8F;
    }

    ul#tabNav a:hover, ul#tabNav a:active {
    color: #CC3300;
    }

    body#home li.home, body#about li.about, body#inspiration li.inspiration,
    body#events li.events, body#giving li.giving, body#branches li.branches, body#contact li.contact {
    color: #CC3300;
    }

    body#home li.home a:link, body#home li.home a:visited,
    body#about li.about a:link, body#about li.about a:visited,
    body#inspiration li.inspiration a:link, body#inspiration li.inspiration a:visited,
    body#events li.events a:link, body#events li.events a:visited,
    body#giving li.giving a:link, body#giving li.giving a:visited,
    body#branches li.branches a:link, body#branches li.branches a:visited
    body#contact li.contact a:link, body#contact li.contact a:visited {
    color: #CC3300;
    }
    /*Sub Nav*/

    #sub_nav {
    background-image: url(system/images/sub_nav_bg.jpg);
    width: 890px;
    height: 21px;
    margin: 0 11px 6px 11px;
    z-index: 4;
    }

    </style>

    </head>

    <body id="home">
    <!-- Navigation Menu Begins -->
    <div id="navigation">
    <div id="menu_nav">
    <ul id="tabNav">
    <li class="home"><a href="index.html" title="Home" >Home &nbsp;&nbsp; &nbsp;</a></li>
    <li class="about"><a href="about.html" title="About">About &nbsp;&nbsp; &nbsp;</a></li>
    <ul>
    <li><a href="#">introduction</a>&nbsp;&nbsp;&nbsp;</li>
    <li><a href="#">mission statement</a>&nbsp;&nbsp;&nbsp;</li>
    <li><a href="#">board of trustees</a>&nbsp;&nbsp;&nbsp;</li>
    <li><a href="#">organisational chart</a></li>
    </ul>
    <li class="inspiration"><a href="inspiration.html" title="Inspiration">Inspiration &nbsp;&nbsp; &nbsp;</a></li>
    <ul>
    <li><a href="#">blog</a>&nbsp;&nbsp;&nbsp;</li>
    <li><a href="#">sunday service</a>&nbsp;&nbsp;&nbsp;</li>
    <li><a href="#">bible study</a>&nbsp;&nbsp;&nbsp;</li>
    <li><a href="#">sunday school</a>&nbsp;&nbsp;&nbsp;</li>
    <li><a href="#">training sessions</a>&nbsp;&nbsp;&nbsp;</li>
    <li><a href="#">seminars</a>&nbsp;&nbsp;&nbsp;</li>
    <li><a href="#">pilgrims herald</a></li>
    </ul>
    <li class="events"><a href="events.html" title="Events">Events&nbsp;&nbsp; &nbsp;</a></li>
    <li class="ministry"><a href="ministry.html" title="Church Ministries">Ministries &nbsp;&nbsp; &nbsp;</a></li>
    <ul>
    <li><a href="#">wayfarer's fountain</a>&nbsp;&nbsp;&nbsp;</li>
    <li><a href="#">wayfarer's haven</a>&nbsp;&nbsp;&nbsp;</li>
    <li><a href="#">wayfarer's mutual exchange scheme</a>&nbsp;&nbsp;&nbsp;</li>
    <li><a href="#">projects</a>&nbsp;&nbsp;&nbsp;</li>
    <li><a href="#">youth</a>&nbsp;&nbsp;&nbsp;</li>
    <li><a href="#">young adults</a>&nbsp;&nbsp;&nbsp;</li>
    <li><a href="#">memorial</a></li>
    </ul>
    <li class="giving"><a href="giving.html" title="Giving">Giving &nbsp;&nbsp; &nbsp;</a></li>
    <ul>
    <li><a href="#">tithes</a>&nbsp;&nbsp;&nbsp;</li>
    <li><a href="#">offerings</a>&nbsp;&nbsp;&nbsp;</li>
    <li><a href="#">donations</a>&nbsp;&nbsp;&nbsp;</li>
    <li><a href="#">special projects</a></li>
    </ul>
    <li class="contact"><a href="contact.html" title="Title">Contact</a></li>
    <ul>
    <li><a href="#">salvation</a>&nbsp;&nbsp;&nbsp;</li>
    <li><a href="#">faq </a>&nbsp;&nbsp;&nbsp;</li>
    <li><a href="#">branches</a>&nbsp;&nbsp;&nbsp;</li>
    <li><a href="#">find us</a>&nbsp;&nbsp;&nbsp;</li>
    <li><a href="#">contact us</a></li>
    </ul>
    </ul>
    </div>
    <!-- Navigation Menu Ends -->

    <!-- Secondary Navigation Begins -->
    <div id="sub_nav">
    </div>
    </div>
    <!-- Secondary Navigation Ends -->



    </body>
    </html>

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hhi, can you post a link where this is happening? It'll make debugging much easier since we can see the images

    But to answer your question, when you have a dropdown (or dropline, same concept) you have to nest the inner <ul> inside the <li>
    e.g.
    Code:
    <ul id="nav">
    <li><a href="#">Text</a>
      <ul>
        <li><a href="#">Dropdown</a></li>
      </ul>
    </li>
    </ul>
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Member cahura's Avatar
    Join Date
    Sep 2008
    Location
    London, England - UK
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank-you for your comment.

    I have been unable to post a link in the forum, as there is spam policy preventing me from submitting a link.

    What are my options?

  4. #4
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    just replace the . with the word dot like this:

    wwwdotmysitedotcom....

    we'll do the rest
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  5. #5
    SitePoint Member cahura's Avatar
    Join Date
    Sep 2008
    Location
    London, England - UK
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ofcourse, thanks alot. I have provided the link below:

    stagedotchristianpilgrimschurchdotorgdotuk/main-indexdothtml

  6. #6
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Here is one that works for you to study if you'd like.

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    stage.christianpilgrimschurch.org.uk/main-index.html

    Hi, the HTML for the dropline (the <ul> list) you posted, and the code on the site are different. There isn't even code for the dropline. THere's nothing to "dropline" lol
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  8. #8
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi cahura, Welcome to SitePoint!

    I guess RyanReese does not realize that you are in the process of building the dropline and that the reason you came here is because you need help with it.

    Your main list items on your site are close enough to the code you posted to realize that it is in fact the same menu.

    Let's start by cleaning up your html and getting rid of all those &nbsp; tags you were using for spacing. We will just set side paddings on the anchors to create the spacing.

    The trick with any dropdown or dropline menu is to set the sub ul as position:absolute; and then hide it off screen with a large negative margin.
    Code:
    #nav li ul {
        position:absolute;
        width:100&#37;;
        height:25px;
        left:0;
         top:30px;
        margin-left:-999em;
        background:#EEF;
    }
    Now the part that you mentioned you did not understand was li:hover, that is actually what we will use to reveal the sub ul when hovering on the main list items. IE6 does not support li:hover and it needs a little help from javascript to make it work. (That is what the .sfhover class below is for)
    Code:
    #nav li:hover ul,
    #nav li.sfhover ul {
        margin-left:0;/*show the sub ul on hover*/
    }
    Here is a complete test case that should get you pointed in the right direction.

    Hope that helps

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Dropline Navbar</title>
    
    <style type="text/css">
    body {
        background: #fff;
        font-size:100%;
    }
    #menu_nav {
        width:890px;
        height:30px;
        margin:0 auto;
        background:#E3E0FF url(http://stage.christianpilgrimschurch.org.uk/system/images/main_nav_bg.jpg);
        border-bottom:25px solid #EEF;/*preserve the space for the sub ul*/
    }
    ul#nav, ul#nav ul {
        width:890px;
        margin: 0;
        padding:0;
        list-style:none;
        background:transparent;
        font: bold 14px Verdana, Arial, Helvetica, sans-serif;
        position:relative;/*containing block for sub ul*/
    }
    #nav li, 
    #nav li a {float:left;}
    
    #nav li a {
        height:30px;
        line-height:30px;
        padding:0 10px;
        text-decoration: none;
    }
    #nav li ul {
        position:absolute;
        height:25px;
        left:0;
        top:30px;
        margin-left:-999em;
        background:#EEF;
    }
    #nav li:hover ul,
    #nav li.sfhover ul {
        margin-left:0;/*show the sub ul on hover*/
    }
    #nav li li a {/*sub li "a" resets*/
        height:25px;
        padding:0 5px;
        font:bold 12px/25px Verdana, Arial, Helvetica, sans-serif;
    }
    
    #nav a:link, #nav a:visited {
    color: #003F8F;
    }
    #nav a:hover, #nav a:active {
    color: #CC3300;
    }
    
    #home li.home, #about li.about, #inspiration li.inspiration,
    #events li.events, #giving li.giving, #branches li.branches, #contact li.contact {
    color: #CC3300;
    }
    
    #home li.home a:link, #home li.home a:visited,
    #about li.about a:link, #about li.about a:visited,
    #inspiration li.inspiration a:link, #inspiration li.inspiration a:visited,
    #events li.events a:link, #events li.events a:visited,
    #giving li.giving a:link, #giving li.giving a:visited,
    #branches li.branches a:link, #branches li.branches a:visited
    #contact li.contact a:link, #contact li.contact a:visited {
    color: #CC3300;
    }
    </style>
    
    <!--[if IE 6]>
    <script type="text/javascript">// the Suckerfish script inserts class=sfhover on all li inside id=nav on mouseover
    sfHover = function() {
        var sfEls = document.getElementById("nav").getElementsByTagName("LI");
        for (var i=0; i<sfEls.length; i++) {
            sfEls[i].onmouseover=function() {
                this.className+=" sfhover";
            }
            sfEls[i].onmouseout=function() {
                this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
            }
        }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    </script>
    <![endif]-->
    
    </head>
    <body id="home">
    
    <div id="menu_nav"><!-- Navigation Menu Begins -->
        <ul id="nav">
        <li class="home"><a href="index.html" title="Home" >Home</a></li>
        <li class="about"><a href="about.html" title="About">About</a>
            <ul>
                <li><a href="#">introduction</a></li>
                <li><a href="#">mission statement</a></li>
                <li><a href="#">board of trustees</a></li>
                <li><a href="#">organisational chart</a></li>
            </ul>
        </li>
        <li class="inspiration"><a href="inspiration.html" title="Inspiration">Inspiration</a>
            <ul>
                <li><a href="#">blog</a></li>
                <li><a href="#">sunday service</a></li>
                <li><a href="#">bible study</a></li>
                <li><a href="#">sunday school</a></li>
                <li><a href="#">training sessions</a></li>
                <li><a href="#">seminars</a></li>
                <li><a href="#">pilgrims herald</a></li>
            </ul>
        </li>
        <li class="events"><a href="events.html" title="Events">Events</a></li>
        <li class="ministry"><a href="ministry.html" title="Church Ministries">Ministries</a>
            <ul>
                <li><a href="#">wayfarer's fountain</a></li>
                <li><a href="#">wayfarer's haven</a></li>
                <li><a href="#">wayfarer's mutual exchange scheme</a></li>
                <li><a href="#">projects</a></li>
                <li><a href="#">youth</a></li>
                <li><a href="#">young adults</a></li>
                <li><a href="#">memorial</a></li>
            </ul>
        </li>
        <li class="giving"><a href="giving.html" title="Giving">Giving</a>
            <ul>
                <li><a href="#">tithes</a></li>
                <li><a href="#">offerings</a></li>
                <li><a href="#">donations</a></li>
                <li><a href="#">special projects</a></li>
            </ul>
        </li>
        <li class="contact"><a href="contact.html" title="Title">Contact</a>
            <ul>
                <li><a href="#">salvation</a></li>
                <li><a href="#">faq </a></li>
                <li><a href="#">branches</a></li>
                <li><a href="#">find us</a></li>
                <li><a href="#">contact us</a></li>
            </ul>
        </li>
        </ul>
    </div><!-- Nav Ends -->
    
    </body>
    </html>

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    Hi cahura, Welcome to SitePoint!

    I guess RyanReese does not realize that you are in the process of building the dropline and that the reason you came here is because you need help with it.
    I would have assumed that had his code in the first post not contained the dropline HTML

    I assumed he hadn't uploaded hte correct page (or linked it wrong)
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  10. #10
    SitePoint Member cahura's Avatar
    Join Date
    Sep 2008
    Location
    London, England - UK
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EricWatson View Post
    Here is one that works for you to study if you'd like.
    I am definitely looking forward to study the code in link too. Many thanks.

  11. #11
    SitePoint Member cahura's Avatar
    Join Date
    Sep 2008
    Location
    London, England - UK
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    Hi cahura, Welcome to SitePoint!

    I guess RyanReese does not realize that you are in the process of building the dropline and that the reason you came here is because you need help with it.

    Thank you very much for your spot on help.

  12. #12
    SitePoint Member cahura's Avatar
    Join Date
    Sep 2008
    Location
    London, England - UK
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    Hi cahura, Welcome to SitePoint!

    Let's start by cleaning up your html ...

    The trick with any dropdown or dropline menu is ....

    Here is a complete test case that should get you pointed in the right direction.

    Hope that helps
    Are you kidding? I have a clear understanding now. You've made my world!!


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
  •