CSS Dropline Navigation Help!

HTML & CSS
1

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     </a></li>
<li class=“about”><a href=“about.html” title=“About”>About     </a></li>
<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 class=“inspiration”><a href=“inspiration.html” title=“Inspiration”>Inspiration     </a></li>
<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 class=“events”><a href=“events.html” title=“Events”>Events    </a></li>
<li class=“ministry”><a href=“ministry.html” title=“Church Ministries”>Ministries     </a></li>
<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 class=“giving”><a href=“giving.html” title=“Giving”>Giving     </a></li>
<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 class=“contact”><a href=“contact.html” title=“Title”>Contact</a></li>
<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>
</ul>
</div>
<!-- Navigation Menu Ends –>

<!-- Secondary Navigation Begins –>
<div id=“sub_nav”>
</div>
</div>
<!-- Secondary Navigation Ends –>

</body>
</html>

2

Hhi, can you post a link where this is happening? It’ll make debugging much easier since we can see the images :slight_smile:

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.


<ul id="nav">
<li><a href="#">Text</a>
  [b]<ul>
    <li><a href="#">Dropdown</a></li>
  </ul>[/b]
</li>
</ul>
3

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

just replace the . with the word dot like this:

wwwdotmysitedotcom…

we’ll do the rest :wink:

5

Ofcourse, thanks alot. I have provided the link below:

stagedotchristianpilgrimschurchdotorgdotuk/main-indexdothtml

6

Here is one that works for you to study if you’d like.

7

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 :slight_smile:

8

Hi cahura, Welcome to SitePoint! :slight_smile:

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   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.


#nav li ul {
    position:absolute;
    width:100&#37;;
    height:25px;
    left:0;
     top:30px;
    [B]margin-left:-999em;[/B]
    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)


#nav li:hover ul,
#nav li.sfhover ul {
    [B]margin-left:0;[/B]/*show the sub ul on hover*/
}

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

Hope that helps :slight_smile:

<!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

I would have assumed that had his code in the first post not contained the dropline HTML :wink:

I assumed he hadn’t uploaded hte correct page (or linked it wrong)

10

I am definitely looking forward to study the code in link too. Many thanks.

11

Thank you very much for your spot on help.

12

Are you kidding? I have a clear understanding now. You’ve made my world!!