I have a question about styling submenus differently from the primary menus of a dropdown menu. I've created styles for the dropdown menus, but at the moment these dropdowns are inheriting the tabbed look of my primary menus.
I'm experimenting with using the Superfish dropdown menu. Here's my html: <div id="primary-nav"> <div class="tab_navigation"> <ul class="sf-menu"> <li class="nav-introduction"><a href="#">Introduction</a> <ul> <li class="nav-about-oh-freedom"><a href="/intro">About Oh Freedom!</a></li> <li class="nav-faq"><a href="/faq">FAQ</a></li> <li class="nav-site-guide"><a href="/site_guide">Site Guide</a></li> <li><a href="mailto:africanamerican...@si.edu">Contact Us</a></li> </ul> </li> <li class="nav-explore-history-in-art"><a href=#">Explore History in Art</a> <ul> <li class="nav-timeline"><a href="/timeline">Timeline</a></li> <li class="nav-art"><a href="/art">Art</a></li> <li class="nav-artists"><a href="/artists">Artists</a></li> <li class="nav-collect"><a href="/myomeka/help">Collect</a></li> </ul> </li> <li class="nav-lesson-plans"><a href="#">Lesson Plans</a> <ul> <li class="nav-overview"><a href="/overview">Overview</a></li> <li class="nav-create-a-lesson-plan"><a href="/share">Create a Lesson Plan</a></li> <li class="nav-view-lesson-plans"><a href="/view">View Lesson Plans</a></li> <li class="nav-start-a-conversation"><a href="/discuss">Start a Conversation</a></li> </ul> </li> <li class="nav-more-resources"><a href="#">More Resources</a> <ul> <li class="nav-curriculum-standards"><a href="/standards">Curriculum Standards</a></li> <li class="nav-teacher-bibliography"><a href="/teacher_bibliography">Teacher Bibliography</a></li> <li class="nav-student-bibliography"><a href="/student_bibliography">Student Bibliography</a></li> <li class="nav-general-bibliography"><a href="/general_bibliography">General Bibliography</a></li> <li class="nav-glossary"><a href="/glossary">Glossary</a></li> <li class="nav-subject-index"><a href="/subject_index">Subject Index</a></li> </ul> </li> </ul> </div><!-- close tab-navigation --> </div><!-- close primary-nav --> And here's my css: #primary-nav { float:left; width:750px; padding-left: 170px; margin-top: 10px; background: url("http://africanamericanart.si.edu/themes/fromscratch/images/bg.gif") repeat-x bottom; font-family:calibri, helvetica, verdana, san-serif; font-size:20px; line-height:normal; } #primary-nav ul { margin:0; padding:10px 10px 0; list-style:none; } #primary-nav li { float:left; background:url("http://africanamericanart.si.edu/themes/fromscratch/images/left.gif") no-repeat left top; margin:0; padding:0 10px 0 9px; } #primary-nav a { float:left; display:block; background:url("http://africanamericanart.si.edu/themes/fromscratch/images/right.gif") no-repeat right top; padding:2px 13px 4px 4px; text-decoration:none; font-weight:bold; color:#000; } #primary-nav a:hover { color:#333; } /* Superfish Dropdowns */ /* ESSENTIAL STYLES */ .sf-menu, .sf-menu * { margin: 0; padding: 0; list-style: none; } .sf-menu { line-height: 1.0; } .sf-menu ul { position: absolute; top: -999em; width: 10em; /* left offset of submenus need to match (see below) */ } .sf-menu ul li { width: 100%; } .sf-menu li:hover { visibility: inherit; /* fixes IE7 'sticky bug' */ } .sf-menu li { float: left; position: relative; } .sf-menu a { display: block; position: relative; } .sf-menu li:hover ul, .sf-menu li.sfHover ul { left: 0; top: 26px; /* match top ul list item height */ z-index: 99; } ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul { top: -999em; } ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul { left: 10em; /* match ul width */ 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 { left: 10em; /* match ul width */ top: 0; } /*Style of dropdowns*/ .sf-menu li li { float: left; margin-bottom: 1em; } /* borders dropdown menus */ .sf-menu li li a { border-left: 1px solid #fff; border-top: 1px solid #000; padding: .75em 1em; text-decoration:none; } /* link color for dropdowns */ .sf-menu li li a, .sf-menu li li a:visited { /* visited pseudo selector so IE6 applies text colour*/ color: #000; } /*background dropdown menus */ .sf-menu li li { background: #fff; } /* hover background for dropdown menus */ .sf-menu li li:hover, .sf-menu li li.sfHover, .sf-menu li li a:focus, .sf-menu li li a:hover, .sf-menu li li a:active { background: #ff0000; outline: 0; } The primary-nav style creates tabbed main menu items. However, the dropdowns are inheriting this style. I want the dropdowns to be simple boxes underneath the tabs. I realize the styles on the primary-nav id are taking precedence. I'd like to know the correct strategy for creating css so that I can style the dropdowns differently. The URL for the development site is: http://africanamericanart.si.edu/intro Thanks, Jeff ______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/