• twitter image
  • facebook image
  • youtube image
  • linkedin image
Language: CMS Made Simple Czech CMS Made Simple France CMS Made Simple Spain CMS Made Simple Hungary CMS Made Simple Russia CMS Made Simple Netherlands

All times are UTC




Post new topic Reply to topic  [ 5 posts ] 
Author Message
 Post subject: [solved] How do I remove an unwanted image appearing in my dropdown menu?
PostPosted: Wed Mar 31, 2010 9:59 am 
Offline
Forum Members
Forum Members

Joined: Tue Oct 25, 2005 4:50 pm
Posts: 206
Location: Tenerife, Spain
Have a look at my page HERE.

I have customised the shadow menu, but I have a blue image that appears on the sub menu hover.

I have tracked the image down to navblueright.gif, but I can't for the life of me figure out how to stop it appearing on the sub menus without taking it off the primary menu.  ???

Can any CSS gurus out there give me a hint?

I would be ecstatic if you could!  ;D


Last edited by djkirstyjay on Wed Mar 31, 2010 11:49 am, edited 1 time in total.

Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: I have an unwanted image appearing in my dropdown menu. How do I remove it?
PostPosted: Wed Mar 31, 2010 11:41 am 
Offline
Forum Members
Forum Members

Joined: Tue Oct 25, 2005 4:50 pm
Posts: 206
Location: Tenerife, Spain
Sorry... forgot to say,

the CSS is as follows :

Code:

#menu_vert {

   margin: 0;
   padding: 0;
}
.clearb {
   clear: both;
}

#menuwrapper {
/* IE6 Hack */
   height: 1%;
   width: auto;
   border-top: 0;
   margin: 0px 18px;
   padding: 0;
}
ul#primary-nav {
   list-style-type: none;
   margin: 0px;
   padding-top: 10px;
   padding-left: 10px;
}
#primary-nav ul {
   list-style-type: none;
   width: 210px;
   margin: 0px;
   padding: 0px;
   position: absolute;
   top: auto;
   display: none;
   padding-top: 9px;
   background: url(uploads/mvi-blue-style/ultopup.png) no-repeat left top;
}

/* IE6 hacks */
* html #primary-nav ul {
   padding-top: 13px;
   background: url(uploads/mvi-blue-style/ultopup.gif) no-repeat left top;
}
#primary-nav ul ul {
   margin-top: 0px;
   margin-left: -1px;
   left: 100%;
   top: -3px;
   background: url(uploads/mvi-blue-style/ultoprt.png) no-repeat left top;
}

/* IE6 hacks */
* html #primary-nav ul ul {
   margin-top: 0px;
   padding-left: 5px;
   left: 100%;
   top: -7px;
   background: url(uploads/mvi-blue-style/ultoprt.gif) no-repeat right top;
}

#primary-nav li {
   margin-left: 5px;
   float: left;
}

#primary-nav li li {
   margin-left: 8px;
   margin-top: -1px;
   float: none;
   position: relative;
}

/* IE6 hacks */
* html #primary-nav li li {
   margin-left: 6px;
   width: 171px;
}

ul#primary-nav li a {
   font-size: 1em;
   font-weight: normal;
   color: #fff;
   padding: 0px 11px 0px 0px;
   display: block;
   text-decoration: none;
}
ul#primary-nav li a span {
   padding: 12px 4px 12px 15px;
   display: block;
}
ul#primary-nav li a:hover {
   background-color: transparent;
}
ul#primary-nav li {
}
ul#primary-nav li span {
   font-weight: normal;
}
ul#primary-nav li li {
   background:  none;
}
ul#primary-nav li li span {
   background:  none;
   color: #fff;
   font-weight: normal;
}
ul#primary-nav li:hover,
ul#primary-nav li.menuh,
ul#primary-nav li.menuparenth {
}
ul#primary-nav li:hover span,
ul#primary-nav li.menuh span,
ul#primary-nav li.menuparenth span {
   font-weight: normal;
}

/* IE6 hacks */
ul#primary-nav li li.menuh {
   background:  none;
   font-weight: normal;
}
/* IE6 hacks */
ul#primary-nav li.menuparenth li span {
   background:  none;
   font-weight: normal;
}
/* IE6 hacks */
ul#primary-nav li.menuparenth li.menuparent span {
   background:  url(uploads/mvi-blue-style/parent.gif) no-repeat right center;
}
/* IE6 hacks */
ul#primary-nav li.menuparenth li.menuh span {
   background:  none;
   font-weight: normal;
}
/* IE6 hacks */
ul#primary-nav li.menuparenth li.menuparenth {
   background:  none;
   font-weight: normal;
}
ul#primary-nav li.menuactive a {
}
ul#primary-nav li a.menuactive span {
   font-weight: bold;
}
#primary-nav li li a {
   padding: 5px 10px;
   width: 165px;
   margin: 5px;
   background: none;
}
/* IE6 hacks */
* html #primary-nav li li a {
   padding: 5px 10px;
   width: 165px;
   margin: 0px;
}
#primary-nav li li:hover {
/* remove image set in first level */
   background: none;
}
#primary-nav li li a:hover {
}
#primary-nav li.menuparent li a:hover span {
}
ul#primary-nav li:hover li a span {
   font-weight: normal;
}
#primary-nav li li.menuactive a.menuactive, #primary-nav li li.menuactive a.menuactive:hover {
}
#primary-nav li li.menuactive a.menuactive span {
}
#primary-nav li li.menuactive a.menuactive:hover span {
}
/* IE6 hacks */
#primary-nav li li.menuparenth a.menuparent span {
   background:  url(uploads/mvi-blue-style/parent.gif) no-repeat right center;
}
/* IE6 hacks */
#primary-nav li li.menuparenth a.menuparent:hover span {
}
#primary-nav li li.menuparent a.menuparent span {
   background:  url(uploads/mvi-blue-style/parent.gif) no-repeat right center;
}
#primary-nav li.menuactive li a:hover span {
}
ul#primary-nav li li a.menuactive  span {
   background:  none;
   font-weight: normal;
}
#primary-nav li.menuactive li a {
   text-decoration: none;
   background: none;
}
#primary-nav li.menuactive li a:hover {
}
#primary-nav li.menuactive li a:hover span {
}
ul#primary-nav li:hover li a span, ul#primary-nav li.menuparenth li a span {
   padding: 0px;
   background:  none;
}
#primary-nav ul li.separator, #primary-nav .separator:hover {
   width: 210px;
   height: 9px;
   margin: 0px 0px -8px;
   background: url(uploads/mvi-blue-style/ulbtmrt.png) no-repeat left bottom;
}
#primary-nav ul ul li.separator, #primary-nav ul ul li.separator:hover {
   height: 9px;
   margin: 0px 0px -8px;
   background: url(uploads/mvi-blue-style/ulbtmrt.png) no-repeat left bottom;
}
/* IE6 hacks */
* html #primary-nav ul li.separator {
   height: 2px;
   background: url(uploads/mvi-blue-style/ulbtmrt.gif) no-repeat left bottom;
}
/* IE6 hacks */
* html #primary-nav ul li.separatorh {
   margin: 0px 0px -8px;
   height: 2px;
   background: url(uploads/mvi-blue-style/ultop.gif) no-repeat left top;
}
/* The magic - set to work for up to a 3 level menu, but can be increased unlimited, for fourth level add
#primary-nav li:hover ul ul ul,
#primary-nav li.menuparenth ul ul ul,
*/
#primary-nav ul,
#primary-nav li:hover ul,
#primary-nav li:hover ul ul,
#primary-nav li.menuparenth ul,
#primary-nav li.menuparenth ul ul {
   display: none;
}
/* for fourth level add
#primary-nav ul ul ul li:hover ul,
#primary-nav ul ul ul li.menuparenth ul,
*/
#primary-nav li:hover ul,
#primary-nav ul li:hover ul,
#primary-nav ul ul li:hover ul,
#primary-nav li.menuparenth ul,
#primary-nav ul li.menuparenth ul,
#primary-nav ul ul li.menuparenth ul {
   display: block;
}
/* IE Hacks */
#primary-nav li li {
   float: left;
   clear: both;
}
#primary-nav li li a {
   height: 1%;
}



/* COLOUR SPECIFIC CODE */

ul#primary-nav li { background:  url(uploads/mvi-blue-style/navblueright.gif) no-repeat right -51px;}

ul#primary-nav li span {
        background:  url(uploads/mvi-blue-style/navblueleft.gif) repeat-x left -51px;
   color: #fff;
}

ul#primary-nav li:hover,
ul#primary-nav li.menuh,
ul#primary-nav li.menuparenth {
   background:  url(uploads/mvi-blue-style/navblueright.gif) no-repeat right 0px;
}
ul#primary-nav li:hover span,
ul#primary-nav li.menuh span,
ul#primary-nav li.menuparenth span {
   background:  url(uploads/mvi-blue-style/navblueleft.gif) repeat-x left 0px;
   color: #000;
}

/* IE6 hacks */
ul#primary-nav li.menuparenth li span {
   color: #000;
}
/* IE6 hacks */
ul#primary-nav li.menuparenth li.menuparent span {
   color: #000
}
/* IE6 hacks */
ul#primary-nav li.menuparenth li.menuh span {
   color: #FFF;
}
/* IE6 hacks */
ul#primary-nav li.menuparenth li.menuparenth {
   color: #FFF;
}
ul#primary-nav li.menuactive a {
   background:  url(uploads/mvi-blue-style/navblueright.gif) no-repeat right 0px;
}
ul#primary-nav li a.menuactive span {
   background:  url(uploads/mvi-blue-style/navblueleft.gif) repeat-x left 0px;
   color: #000;
}

/* IE6 hacks */
* html #primary-nav li li a {
   color: #000;
}

#primary-nav li li a:hover {
   background:  url(uploads/mvi-blue-style/darknav.png) repeat-x left center;
   color: #FFF;
}
#primary-nav li.menuparent li a:hover span {
   color: #FFF;
}
ul#primary-nav li:hover li a span {
   color: #000;
}
#primary-nav li li.menuactive a.menuactive, #primary-nav li li.menuactive a.menuactive:hover {
   color: #000;
}
#primary-nav li li.menuactive a.menuactive span {
   color: #000
}
#primary-nav li li.menuactive a.menuactive:hover span {
   color: #000;
}
/* IE6 hacks */
#primary-nav li li.menuparenth a.menuparent span {
   color: #000
}
/* IE6 hacks */
#primary-nav li li.menuparenth a.menuparent:hover span {
   color: #FFF
}
#primary-nav li li.menuparent a.menuparent span {
}
#primary-nav li.menuactive li a:hover span {
   color: #000
}
ul#primary-nav li li a.menuactive  span {
}
#primary-nav li.menuactive li a {
   color: #0587A9;
}
#primary-nav li.menuactive li a:hover {
   background:  url(uploads/mvi-blue-style/darknav.png) repeat-x left center;
}
#primary-nav li.menuactive li a:hover span {
   color: #FFF;
}
ul#primary-nav li:hover li a span, ul#primary-nav li.menuparenth li a span {
}
#primary-nav ul li.separator, #primary-nav .separator:hover {
}
#primary-nav ul ul li.separator, #primary-nav ul ul li.separator:hover {
}
/* IE6 hacks */
* html #primary-nav ul li.separator {
}
/* IE6 hacks */
* html #primary-nav ul li.separatorh {
}



Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: I have an unwanted image appearing in my dropdown menu. How do I remove it?
PostPosted: Wed Mar 31, 2010 11:47 am 
Offline
Forum Members
Forum Members

Joined: Tue Oct 25, 2005 4:50 pm
Posts: 206
Location: Tenerife, Spain
Just found the answer... seeing the code on here made it easier to read!

I moved the

#primary-nav li li:hover {
/* remove image set in first level */
background: none;
}

into the colour specific code, as this is on a seperate stylesheet that comes AFTER the others and will be used to change the template colours. As it was being overwritten in the colour sheet, the original css to hide the image wasn't working.


Last edited by djkirstyjay on Wed Mar 31, 2010 11:49 am, edited 1 time in total.

Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: [solved] How do I remove an unwanted image appearing in my dropdown menu?
PostPosted: Fri Apr 09, 2010 9:46 pm 
Offline
Forum Members
Forum Members
User avatar

Joined: Tue Jun 12, 2007 12:55 pm
Posts: 122
Location: South Africa
I've never seen so many IE6 hacks for a drop down.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: [solved] How do I remove an unwanted image appearing in my dropdown menu?
PostPosted: Sat Apr 10, 2010 8:36 am 
Offline
Administrator
Administrator
User avatar

Joined: Thu Mar 09, 2006 5:32 am
Posts: 12664
Location: Arizona
Because IE6 doesn't understand li:hover so it uses JS to add h to things that already have a class and menuh to ones that don't, a simple drop down menu in CMS Made Simple doesn't require quite so many * html calls...

_________________
Check ver. CMSMS, PHP, server OS, in System Information page.
Default content http://multiintech.com/defaultcontent/
People are Wonderful
Business is Great
Life is Terrific
Ever wonder what happened to the Album module? Well it is alive and well.
http://album.multiintech.com/
Image


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 5 posts ] 

All times are UTC


Who is online

Users browsing this forum: No registered users


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
cron
Hosting Nation - Managed CMSMS Hosting