Drop Down Menu Not Acting Right... Need Help

[chien_fu]

I'm trying to create a drop-down menu and I want the whole thing to be "small-caps" ...always.. never anything but "small-caps"...When I hover over a menu item my "small-caps" goes away.I've put in "font-variant:small-caps;" everywhere I can.I'm pretty new to CSS so I'm admittedly floundering a bit.This is my modified code that I originally got from http://purecssmenu.com/ul.cssMenu ul{display:none}ul.cssMenu li:hover>ul{display:block}ul.cssMenu ul{position: absolute;left:-1px;top:98%;}ul.cssMenu ul ul{position: absolute;left:98%;top:-2px;}ul.cssMenu,ul.cssMenu ul { margin:0px; list-style:none; padding:0px 2px 2px 0px; background-color:#1B3F95; background-repeat:repeat; font-variant:small-caps;}ul.cssMenu table {border-collapse:collapse}ul.cssMenu { display:block; zoom:1; float: left;}ul.cssMenu ul{ width:200px; font-variant:small-caps;}ul.cssMenu li{ display:block; margin:2px 0px 0px 2px; font-size:0px; font-variant:small-caps;}ul.cssMenu a:active, ul.cssMenu a:focus { outline-style:none; font-variant:small-caps;}ul.cssMenu a, ul.cssMenu li.dis a:hover, ul.cssMenu li.sep a:hover { display:block; vertical-align:middle; background-color:#1B3F95; border-width:0px; border-color:#6655ff; border-style:solid; text-align:left; padding:4px; _padding-left:0; font:14px Verdana; font-variant:small-caps; color: #cccccc; text-decoration:none;}ul.cssMenu span{ overflow:hidden;}ul.cssMenu li { float:left;}ul.cssMenu ul li { float:none;}ul.cssMenu ul a { text-align:left; font-variant:small-caps; white-space:nowrap;}ul.cssMenu li.sep{ text-align:center; font-variant:small-caps; padding:0px; line-height:0; height:100%;}ul.cssMenu li.sep span{ float:none; padding-right:0; width:5; height:16; display:inline-block; background-color:#AAAAAA; background-image:none;}ul.cssMenu ul li.sep span{ width:80%; height:3;}ul.cssMenu li:hover{ position:relative; font-variant:small-caps;}ul.cssMenu li:hover>a{ background-color:#607cbc; border-color:#665500; border-style:solid; font-variant:small-caps; font:14px Verdana; color: #ffffff; text-decoration:none;}ul.cssMenu li a:hover{ position:relative; background-color:#607cbc; border-color:#665500; border-style:solid; font-variant:small-caps; font:14px Verdana; color: #ffffff; text-decoration:none;}ul.cssMenu li.dis a { color: #AAAAAA !important; font-variant:small-caps;}ul.cssMenu img {border: none;float:left;_float:none;margin-right:4px;width:16px;height:16px;}ul.cssMenu ul img {width:16px;height:16px;}ul.cssMenu img.over{display:none}ul.cssMenu li.dis a:hover img.over{display:none !important}ul.cssMenu li.dis a:hover img.def {display:inline !important}ul.cssMenu li:hover > a img.def {display:none}ul.cssMenu li:hover > a img.over {display:inline}ul.cssMenu a:hover img.over,ul.cssMenu a:hover ul img.def,ul.cssMenu a:hover a:hover ul img.def,ul.cssMenu a:hover a:hover a:hover ul img.def,ul.cssMenu a:hover a:hover img.over,ul.cssMenu a:hover a:hover a:hover img.over,ul.cssMenu a:hover a:hover a:hover a:hover img.over{display:inline}ul.cssMenu a:hover img.def,ul.cssMenu a:hover ul img.over,ul.cssMenu a:hover a:hover ul img.over,ul.cssMenu a:hover a:hover a:hover ul img.over,ul.cssMenu a:hover a:hover img.def,ul.cssMenu a:hover a:hover a:hover img.def,ul.cssMenu a:hover a:hover a:hover a:hover img.def{display:none}ul.cssMenu a:hover ul,ul.cssMenu a:hover a:hover ul,ul.cssMenu a:hover a:hover a:hover ul{display:block}ul.cssMenu a:hover ul ul,ul.cssMenu a:hover a:hover ul ul{display:none}ul.cssMenu span{ display:block; background-image:url(./images/arrv_anim_1.gif); background-position:right center; background-repeat: no-repeat; font-variant:small-caps; padding-right:11px;}ul.cssMenu li:hover>a>span{ background-image:url(./images/arrv_anim_1o.gif);}ul.cssMenu a:hover span{ _background-image:url(./images/arrv_anim_1o.gif)}ul.cssMenu ul span,ul.cssMenu a:hover table span{background-image:url(./images/arr_double_1.gif)}ul.cssMenu ul li:hover > a span{ background-image:url(./images/arr_double_1o.gif);}ul.cssMenu table a:hover span,ul.cssMenu table a:hover a:hover span,ul.cssMenu table a:hover a:hover a:hover span{background-image:url(./images/arr_double_1o.gif)}ul.cssMenu table a:hover table span,ul.cssMenu table a:hover a:hover table span{background-image:url(./images/arr_double_1.gif)}

[thescientist]

could you just write your text in caps and then just style it with font-size? (you could use ems and then it would scale)

[Ingolme]

This is your problem:

font-variant:small-caps;font:14px Verdana;

The font declaration resets everything font-related, including the font-variant.What you need to do is to separate it into different declarations:Instead of font: 14px Verdana; use font-size: 14px; font-family: Verdana;By the way, I have two recommendations:

1. Use relative font size units, like % and em
2. You must always specify one of the generic fonts to fall back upon of the selected font cannot be found. These can be serif, sans-serif, cursive, fantasy or monospace.http://www.w3.org/TR/CSS2/fonts.html#generic-font-familiesSo write your CSS declaration like this:

   font-family: Verdana, sans-serif;

[dsonesuk]

ACTUALLY! you can shorthand the font css usingfont: small-caps 14px Verdana, sans-serif;you just have to make sure that font 'size' and 'family' a declared at the end, in this order.Note: if font weight and style are not declared, they will be reset to the default setting.