Jump to content

Dropdown Tab Navigation


Guest Tim Wiseman

Recommended Posts

Guest Tim Wiseman

Hello,I am really struggling with how to make all of the parent items in the navigation show the grey tab, regardless if they have children or not. You can see the site I am working on here: http://www.babcox.com/site - Our Brands shows a full tab, Our Markets does not.I appreciate any help or words of advice, thanks!TimBelow is an example of the code:.sf-menu li:hover ul, .sf-menu li.sfHover ul { top: 2.5em; z-index: 400; }ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul { top: -999em; z-index: 400; }ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul { top: 0; }ul.sf-menu li li:hover li ul, ul.sf-menu li li.sfHover li ul { top: -999em; }ul.sf-menu li li li:hover ul, ul.sf-menu li li li.sfHover ul { top: 0; } .sf-menu { position: relative; margin: 0; padding: 0; list-style: none;clear:both; float: left; margin-top: 12px; padding-left: 9px; margin-bottom: 1em; /* background: url('images/menu_bg.png') no-repeat; */ height: 58px; width: 957px; z-index: 400; }.sf-menu ul { position: absolute; top: -999em; margin-top: 20px; width: 212px; left: 7px; -moz-box-shadow: 3px 6px 8px 1px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 3px 6px 8px 1px rgba(0, 0, 0, 0.3); background-image: url('images/dropdown_top.png'); background-repeat: no-repeat; background-position: top; padding-top: 8px; z-index: 400; }.sf-menu a { display: block; position: relative; text-decoration:none; color: #333333; padding: 23px 20px 0px 20px; height: 30px; text-decoration: none; font-weight: normal; float :left; }.sf-menu li { float: left; position: relative; font-family: Arial, Helvetica, sans-serif; background-position: right 5px; }.sf-menu li ul li ul { left: 212px; margin-top: 0px;}.sf-menu li li { background: #afb0b0 url('images/submenu_li.gif') no-repeat; background-position: 24px 15px; height: 36px ; margin: 0px; float: left; width: 212px; z-index: 10; } .sf-menu > li a:hover { background: transparent url('images/parent_link_left.png') no-repeat; background-position: 7px 11px; z-index: 200; }.sf-menu > li a:hover > a { color: #000; background: transparent url('images/parent_link_right.png') no-repeat; background-position: right 11px; z-index: 301; } /* .sf-menu li a:hover { border-bottom:4px solid #0062af; } */.sf-menu li:hover, .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active { background: #e1e1e1; outline: 0; }.sf-menu > li.sfHover.sf-ul { background: transparent url('images/parent_link_left.png') no-repeat; background-position: 7px 11px; z-index: 200; }.sf-menu li.sfHover li a:hover, .sf-menu li ul li.sfHover a, .sf-menu li ul li ul li.sfHover a { background: #e1e1e1 /* url('images/submenu_li_hover.gif') no-repeat; */ background-position: 11px 0px; }.sf-menu li.sfHover li a, .sf-menu li.sfHover li ul li a, .sf-menu li.sfHover li ul li ul li a { background: url('images/submenu_li_hover.gif') no-repeat ; background-position: -100px -100px; width: 172px; color: #404040; margin: 0px; padding: 14px 0px 0px 40px; } .sf-menu > li.sfHover.sf-ul > a { color: #000; background: transparent url('images/parent_link_right.png') no-repeat; background-position: right 11px; z-index: 301; }

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...