Jump to content

Drop Down Menu Not Acting Right... Need Help


chien_fu
 Share

Recommended Posts

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)}

Link to comment
Share on other sites

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;

Link to comment
Share on other sites

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.

Edited by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...