Dropdown Menus

mattadams84 · January 21, 2010, 10:14pm

Hello,

I am currently designing a site that uses a Javascript dropdown menu which uses CSS to style it. Previously i had wanted the menu to do the following and i thought this had to be done in javascript.

Basically i want the dropdown menu to do the following:

When you roll over the parent <li> i want it to retain the hover class (i.e light blue) when selecting an <li> in the child menu
Then when you roll over a child menu <li> i want it to retain the hover class (i.e light blue) of both the parent and the child
When i am in the grandchild menu i want it to retain the hover class (i.e light blue) of both the parent and the child as well as selecting the hover class of the <li> in the grandchild menu…

However, i was told that what I wanted could actually be done in CSS. I was told that the following would work:

.menu :hover > a, .menu ul :hover, .menu ul ul :hover > a {color:#000; background:#fff;}

I edited this to what i thought would work for my menu and sure enough it worked… almost…

The problem i am having is that as well as changing the colour of the <li> when hovered over there is also a small .gif arrow. At the moment i am basically stuck at the stage where the dropdown menu holds the hover class over in to the child and grand child menu but it also brings the arrow across from the parent <li> This dosnt work as on the child menu there are some <li> elements that dont have submenu’s so obviously i dont want an arrow on those links and when i go in to the grandchild menu the arrow also appears on that menu… Also on the child menu the arrow is facing a different way and when you go to the grandchild menu the arrow changes to the parent arrow (pointing down) I have tried multiple ways of fixing this and cannot fix it…

I basically want it to retain the hoverclass for each menu but also display the correct arrow (where needed) and i would like it to be browser friendly (ie6 friendly that is!!). You can see my problem at (sorry for the way i have to write the link!):

www
mattjadams
info

Hopefully you can see what i mean as i am sure what i am saying is very confusing!! if anyone has any ideas it would be most appreciated!

Thanks

Matt

PaulOB · January 22, 2010, 12:13pm

Hi,

I’m not sure if this is what you meant


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Website</title>
<link rel="stylesheet" href="css/style.css" type="text/css" / media="screen" />
<style>
@charset "UTF-8";
/* CSS Document */

body {
    margin:0px;
    font:11px Helvetica;
    text-align:center;
    background:#fff
}
ul.menu {
    list-style:none;
    margin:0;
    padding:0;
}
ul.menu * {
    margin:0;
    padding:0
}
ul.menu a {
    display:block;
    color:#FFF;
    text-decoration:none
}
ul.menu li {
    position:relative;
    float:left;
    margin-right:1px
}
ul.menu ul {
    position:absolute;
    top:28px;
    left:0;
    background:#f6f6f6;
    display:none;
    list-style:none
}
ul.menu ul li {
    position:relative;
    border:1px solid #aaa;
    border-top:none;
    width:110px;
    margin:0
}
ul.menu ul li a {
    display:block;
    padding: 6px 7px 5px;
    background-color:#f6f6f6;
    color:#333;
    text-align:left
}
ul.menu ul li a:hover {
    background-color:#7089bd;
    color:#FFF
}
ul.menu ul ul {
    left:110px;
    top:-1px
}
ul.menu .menulink {
    border:1px solid #aaa;
    padding: 7px 7px 7px;
    font-weight:bold;
    text-align:center;
    background:#3B5998;
    width:96px
} /*TOP MENU NO ARROW*/
ul.menu .menulink2 {
    border:1px solid #aaa;
    padding: 7px 7px 7px;
    font-weight:bold;
    text-align:center;
    background:#3B5998 url(http://www.mattjadams.info/images/whitearrowdown.gif) 96px 11px no-repeat;
    width:96px
} /* TOP MENU ARROW */
ul.menu .menuhover {
    background: #7089bd url(http://www.mattjadams.info/images/whitearrowdown.gif) 96px 11px no-repeat
} /* HOVER & HIGHLIGHT FOR DROPDOWN ARROWS */

ul.menu .sub {
    background:#f6f6f6 url(http://www.mattjadams.info/images/arrow.gif) 96px 8px no-repeat
}
ul.menu .sub:hover {
    background:#7089bd url(http://www.mattjadams.info/images/whitearrow.gif) 96px 8px no-repeat
}

ul.menu .menulink2:hover {
    background:#7089bd url(http://www.mattjadams.info/images/whitearrowdown.gif) 96px 11px no-repeat
}
ul.menu .menulink:hover {
    background:#7089bd
}

 /* HOVER & HIGHLIGHT  */
ul.menu .topline {
    border-top:1px solid #aaa
}
ul.menu li:hover li:hover a.sub{
    background:#7089bd url(http://www.mattjadams.info/images/whitearrow.gif) 96px 8px no-repeat;
    color:#fff;
}

 @charset "UTF-8";
/* CSS Document */

#headerbar {
    width:1015px;
    height: 80px;
    margin:0px auto;
    text-align:left;
    padding:0px;
    margin-top:5px;
    background: #3B5998;
    border:1px solid #aaa;
}
#adholdertop {
    width:468px;
    height: 60px;
    margin:536px;
    text-align:left;
    padding:0px;
    margin-top:9px;
    background: #FFFFFF;
    border:1px solid #aaa;
}
#topnav {
    width:1017px;
    margin:0px auto;
    text-align:left;
    padding:0px;
    margin-top:5px
}
#rss1 {
    width:200px;
    height:200px;
    margin:0px auto;
    text-align:left;
    padding:0px;
    margin-top:200px;
    background: #FFFFFF;
    border:1px solid #aaa;
}
.rssheadline {
    font:12px helvetica;
    font-weight:bold;
    color:#222;
}
.rssbody {
    font:11px helvetica;
    font-weight: normal;
    color:#333;
}
</style>
<link rel="stylesheet" href="css/laf.css" type="text/css" / media="screen" />
<script type="text/javascript" src="http://www.mattjadams.info/javascript/script.js"></script>
<link rel="help" href="rssReplayProxy.asp" type="text/javascript" />
<script language="JavaScript1.2" src="http://www.mattjadams.info/rssReplay.js" type="text/javascript"></script>
<script language="JavaScript1.2" type="text/javascript">
<!-- hide script from non-js browsers
//<![CDATA[ hide for xml strict dtd

// RSS Replay v 1.6.3 by RNSoft
// MethodName:AJAX-Proxy-ASP
// RSS Replay event control
function rrpAddEvent(obj, evType, fn){
   if (obj.addEventListener){
      obj.addEventListener(evType, fn, false);
      return true;
   } else if (obj.attachEvent){
      var r = obj.attachEvent("on"+evType, fn);
      return r;
   } else { 
      return false;
   }
}

// ReplayItem:BBC
// SettingName:Headlines w Stories (25 Word Stories w UL)
function rrpBBC() {
   rssReplayFeed("BBC",
   3,
   "<ul>",
   "<li><span <<headlineclass>>><a href=\\"<<link>>\\"><<headline>></a><br /></span>"+"\
"+
"",
   "",
   "<span <<storyclass>>><<trim_25w_story>></span></li>"+"\
"+
"",
   "",
   "</ul><p style=\\"font-size:80&#37;\\"><<madewithrssreplay>></p>"+"\
"+
"",
   rrpBuildSourceList("newsrs1|http://newsrss.bbc.co.uk/rss/sportonline_uk_edition/football/rss.xml"),
   true,
   -1,
   false,
   "d-date")
}
rrpAddEvent(window, 'load', rrpBBC);
// EndReplayItem:BBC

// end hide xml strict dtd ]]>
// end hide of script -->
</script>
</head>
<body>
<div id="headerbar">
    <div id="adholdertop"></div>
</div>
<div id="topnav">
    <ul class="menu" id="menu">
        <li><a href="#" class="menulink2">Dropdown 1</a>
            <ul>
                <li><a href="#">navigation 1</a></li>
                <li> <a href="#" class="sub">navigation 2</a>
                    <ul>
                        <li class="topline"><a href="#">navigation 1</a></li>
                        <li><a href="#">navigation 2</a></li>
                        <li><a href="#">navigation 3</a></li>
                        <li><a href="#">navigation 4</a></li>
                    </ul>
                </li>
                <li> <a href="#" class="sub">navigation 3</a>
                    <ul>
                        <li class="topline"><a href="#">navigation 1</a></li>
                        <li><a href="#">navigation 2</a></li>
                        <li><a href="#">navigation 3</a></li>
                        <li><a href="#">navigation 4</a></li>
                    </ul>
                <li> <a href="#" class="sub">navigation 4</a>
                    <ul>
                        <li class="topline"><a href="#">navigation 1</a></li>
                        <li><a href="#">navigation 2</a></li>
                        <li><a href="#">navigation 3</a></li>
                        <li><a href="#">navigation 4</a></li>
                    </ul>
            </ul>
        </li>
        <li><a href="#" class="menulink">Non-Dropdown</a></li>
        <li> <a href="#" class="menulink2">Dropdown Two</a>
            <ul>
                <li><a href="#">Navigation Item 1</a></li>
                <li> <a href="#" class="sub">Navigation Item 2</a>
                    <ul>
                        <li class="topline"><a href="#">Navigation Item 1</a></li>
                        <li><a href="#">Navigation Item 2</a></li>
                        <li><a href="#">Navigation Item 3</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li> <a href="#" class="menulink2">Dropdown Three</a>
            <ul>
                <li><a href="#">Navigation Item 1</a></li>
                <li><a href="#">Navigation Item 2</a></li>
                <li><a href="#">Navigation Item 3</a></li>
                <li><a href="#">Navigation Item 4</a></li>
                <li><a href="#">Navigation Item 5</a></li>
                <li> <a href="#" class="sub">Navigation Item 6</a>
                    <ul>
                        <li class="topline"><a href="#">Navigation Item 1</a></li>
                        <li><a href="#">Navigation Item 2</a></li>
                    </ul>
                </li>
                <li><a href="#">Navigation Item 7</a></li>
                <li><a href="#">Navigation Item 8</a></li>
                <li><a href="#">Navigation Item 9</a></li>
                <li><a href="#">Navigation Item 115</a></li>
            </ul>
        </li>
        <li><a href="#" class="menulink">Non-Dropdown</a></li>
        <li><a href="#" class="menulink">Non-Dropdown</a></li>
        <li><a href="#" class="menulink">Non-Dropdown</a></li>
        <li><a href="#" class="menulink">Non-Dropdown</a></li>
        <li><a href="#" class="menulink">Non-Dropdown</a></li>
        </li>
    </ul>
</div>
<script type="text/javascript">
    var menu=new menu.dd("menu");
    menu.init("menu","menuhover")
        </script>
<div id="rss1">
    <!-- RSS Replay Block: Start -->
    <span id="BBC">RSS Content</span>
    <!-- RSS Replay Block: End -->
</div>
</body>
</html>

Dr_John · January 22, 2010, 1:33pm

Nice.

On the mattjadams.info site, the items within a drop-down that have no drop-down (fly-out) of their own show a drop-down arrow on mouseover, while the sample above does not. Is this an error in one of the two sets of code?

Why does the number 1 of the first item in each drop-down fade in while the others all appear instantly?

PS Look how generous sitepointers are! Someone asks a question, and Paul buys a domain name, web hosting and codes a page, just to answer the question…

PaulOB · January 22, 2010, 1:50pm

On the mattjadams.info site, the items within a drop-down that have no drop-down (fly-out) of their own show a drop-down arrow on mouseover, while the sample above does not. Is this an error in one of the two sets of code?

If I understood correctly I assumed that the down arrow was to be removed as it made no sense on items that are not flyouts.

Why does the number 1 of the first item in each drop-down fade in while the others all appear instantly?

They all seem to slide out for me although with some sort of inertia trickery applied.

Dr_John · January 22, 2010, 2:11pm

In my case it is the actual number that fades in after the rest of the drop down has been displayed. It’s most noticable on Dropdown Three

I did think your version above was more logical than the online one, as I did start waiting and then clicking for a fly-out to appear. Affordability rules.

mattadams84 · January 22, 2010, 5:33pm

Thats perfect! Thank you so much for your help, it is very much appreciated!