[solved] How do I remove an unwanted image appearing in my dropdown menu?

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Post Reply
djkirstyjay
Forum Members
Forum Members
Posts: 206
Joined: Tue Oct 25, 2005 4:50 pm

[solved] How do I remove an unwanted image appearing in my dropdown menu?

Post by djkirstyjay »

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.
djkirstyjay
Forum Members
Forum Members
Posts: 206
Joined: Tue Oct 25, 2005 4:50 pm

Re: I have an unwanted image appearing in my dropdown menu. How do I remove it?

Post by djkirstyjay »

Sorry... forgot to say,

the CSS is as follows :

Code: Select all


#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 {
}

djkirstyjay
Forum Members
Forum Members
Posts: 206
Joined: Tue Oct 25, 2005 4:50 pm

Re: I have an unwanted image appearing in my dropdown menu. How do I remove it?

Post by djkirstyjay »

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.
ironblaze94

Re: [solved] How do I remove an unwanted image appearing in my dropdown menu?

Post by ironblaze94 »

I've never seen so many IE6 hacks for a drop down.
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12709
Joined: Thu Mar 09, 2006 5:32 am
Location: Arizona

Re: [solved] How do I remove an unwanted image appearing in my dropdown menu?

Post by Dr.CSS »

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...
Post Reply

Return to “Layout and Design (CSS & HTML)”