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/
![http://africanamericanart.si.edu/themes/fromscratch/images/bg.gif"](http://africanamericanart.si.edu/themes/fromscratch/images/bg.gif"){kind=link}
![http://africanamericanart.si.edu/themes/fromscratch/images/left.gif"](http://africanamericanart.si.edu/themes/fromscratch/images/left.gif"){kind=link}
![http://africanamericanart.si.edu/themes/fromscratch/images/right.gif"](http://africanamericanart.si.edu/themes/fromscratch/images/right.gif"){kind=link}