On 3/04/2011 8:00 AM, Stephanie Robinson wrote:
I've now changed it over to div's and while part of the css is working
OK, the navigation drop downs and hovers quit working.
Hi - I'm slowly working my way though this css navigation and with Marc's
help, the drop downs are now showing up fine, but I still can't seem to get
the hover color change to work, even though it was working fine in the old
table-based page.
The menu I'm using was found here:
http://www.cssnewbie.com/easy-css-dropdown-menus/
I think it's line #165 that controls the hover color:
#navbar li li a:hover { background-color: #f0e281; }
Maybe it's not the best choice? I'm really not sure, but it seemed very
straight forward.
Is the hover color being suppressed or overwritten by another part of the
style sheet? Or do I need to add an addtional line for more information so
that it will work?
My html code all validates and the css validates except for the @font-face
that the client wanted. Could this be the problem?
The files are:
http://www.issw.com/hallmark/index_new.htm
http://www.issw.com/hallmark/designer_bio.htm
http://www.issw.com/hallmark/css/style.css
Any help is greatly appreciated,
Stephanie
Hello,
Delete this CSS.
#top_navigation {
width: 985px;
height: 30px;
background-color: #cadbe5;
padding-top: 10px;
}
Delete all instances of '#top_navigation' in the below CSS so the
specificity is correct.
/* These styles create the dropdown menus. */
#top_navigation #navbar {
width: 985px; /* WAS => 950 */
margin: 0;
padding: 0;
height: 1em;
}
#top_navigation #navbar li {
list-style: none;
float: left;
font-size: 11pt; /* main nav */
letter-spacing: 2px;}
#top_navigation #navbar li a {
display: block;
padding: 3px 8px;
background-color: #cadbe5;
color: #333;
text-decoration: none; }
/* subnavigation */
#top_navigation #navbar li ul {
display: none;
width: 10em; /* Width to help Opera out */
background-color: #cadbe5;
z-index: 9999;}
/* hover styling */
#top_navigation #navbar li:hover ul, #navbar li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0; }
#top_navigation #navbar li:hover li, #navbar li.hover li { float: none; }
#top_navigation #navbar li:hover li a, #navbar li.hover li a {
background-color: #cadbe5; /* subnav */
border-bottom: 1px solid #fff;
text-align: left;
font-size: 9pt; /* subnav */
color: #333; }
#navbar li li a:hover { background-color: #f0e281; }
#navbar li li {
width: 225px;
letter-spacing: 0px;}
/* end dropdown menus. */
Now make these changes for '#navbar'.
#navbar {
width: 985px; /* WAS => 950 */
margin: 0;
padding: 0;
padding:10px 0; /* ADD, create space above and below floated 'li' */
overflow:hidden; /* ADD, contains floated 'li' */
height:1%; /* ADD, contains floated 'li' in IE6- */
background-color: #cadbe5; /* ADD, give bgColor to 'ul' */
/* height: 1em; DELETE */
}
This now leave you with this element that is not needed.
<div id="top_navigation"></div> <!-- ===END #TOP_NAVIGATION === -->
--
Alan http://css-class.com/
Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
______________________________________________________________________
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/
