Avatar of breeze351
breeze351

asked on 

Problem with a menu being displayed across the top.

I'm having a problem with a menu display.  I'm sure this is going to easy.  I'm just out of the hospital and I can't think straight.

The menu has a black bar on top and doesn't display on the top of the page.

I'm attaching all the code.

If you want to look the site is http://joesplaceunion.com/
index.php
Joes.css
menu_inc.php
CSS

Avatar of undefined
Last Comment
Julian Hansen
Avatar of David S.
David S.
Flag of United States of America image

You've got a bad redirect active, which adds "www." before the "http://", so we can't see your site.
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

You have a style in your CSS (see below) that has a height of 8px - this is what is causing the problem. Either remove the :before style completely or change the height to 0 (or display; none). I would remove the style - if you are setting the height to 0 (or display; none) you are not using the style anyway so might as well remove it.
#cssmenu:before {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAICAIAAAC3eAIWAAAAA3NCSVQICAjb4U/gAAAAI0lEQVQImWPwj0hh+v//PxPD//9M////Z/rP8J/p//9/MD4AGUETB+SFfCsAAAAASUVORK5CYII=);
  background-color: #606a77;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #4f5864), color-stop(1, #49515b));
  background-image: -webkit-linear-gradient(top, #4f5864, #49515b);
  background-image: -moz-linear-gradient(top, #4f5864, #49515b);
  background-image: -o-linear-gradient(top, #4f5864, #49515b);
  background-image: linear-gradient(#4f5864, #49515b);
  -moz-box-shadow: inset 0 2px 0 #586270, inset 0 1px 0 #6b7888;
  -webkit-box-shadow: inset 0 2px 0 #586270, inset 0 1px 0 #6b7888;
  box-shadow: inset 0 2px 0 #586270, inset 0 1px 0 #6b7888;
  content: '';
  display: block;
  height: 8px;  /* <==== THIS IS WHERE THE LINE COMES FROM */
}

Open in new window

Alternatively you could add a new style to override the display (say .nolinebefore) and then add the .nolinebefore class to your cssmenu element.

#cssmenu.nolinebefore:before {
  display: none;
}

Open in new window

Avatar of breeze351
breeze351

ASKER

Got it.
The second question is, the question is how to change the color on the main menu when a sub is selected.
I am attaching the code for the menu and two screen prints.
menu_inc.php
Avatar of breeze351
breeze351

ASKER

Forgot to add the screen print
JoeScreen.doc
ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Blurred text
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
CSS
CSS

Cascading Style Sheets (CSS) is a language used for describing the look and formatting of a document written in a markup language. Usually used to change web pages and user interfaces written in HTML, it can also be applied to any kind of XML document. CSS is designed primarily to distinguish the content of a document from its presentation.

43K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
Ask the experts
Read over 600 more reviews

TRUSTED BY

IBM logoIntel logoMicrosoft logoUbisoft logoSAP logo
Qualcomm logoCitrix Systems logoWorkday logoErnst & Young logo
High performer badgeUsers love us badge
LinkedIn logoFacebook logoX logoInstagram logoTikTok logoYouTube logo