Parent Menu Highlight Problem

HTML & CSS
1

Hello All, Im a beginner at sitepoint.

I need a little help here.
I’ve a css drop down menu in joomla:


<ul class="menu">
  <li id="current" class="active item1"><a href="http://localhost/"><span>HOME</span></a></li>
  <li class="parent item7"><a href="#"><span>ABOUT US</span></a>
    <ul>
      <li class="item9"><a href="#"><span>Board of Members</span></a></li>
      <li class="item10"><a href="#"><span>In the News</span></a></li>
      <li class="item11"><a href="#"><span>Announcements</span></a></li>
      <li class="item12"><a href="#"><span>Job Vacancies</span></a></li>
    </ul>
  </li>
  <li class="item13"><a href="#"><span>PARTNERS</span></a></li>
  <li class="item8"><a href="/Mission"><span>MISSION</span></a></li>
  <li class="parent item14"><a href="#"><span>LOGISTICS</span></a>
    <ul>
      <li class="item15"><a href="#"><span>Fright Transportation</span></a></li>
      <li class="item16"><a href="#"><span>Distinations</span></a></li>
      <li class="item18"><a href="#"><span>Routes</span></a></li>
    </ul>
  </li>
  <li class="item17"><a href="#"><span>CONTACT</span></a></li>
</ul>

And the CSS:


#mainmenu {
	background:url(../images/mainmenu-bg.png) repeat-x #FFF;
	height:67px;
	width:503px;
	float:right;
}
.menu {
	border:none;
	border:0px;
	margin:0px;
	padding:0px;
	font: 12px Arial, Helvetica, sans-serif bold;
	font-size:12px;
	font-weight:bold;
	list-style:none;
	height:67px;
}
.menu ul {
	height:67px;
	list-style:none;
	margin:0;
	padding:0;
}
.menu li {
	float:left;
	padding:0px;
}
.menu li a:hover {
}
.menu li a {
	background:url("../images/mainmenubg-sep.gif") center right no-repeat;
	color:#939393;
	display:block;
	font-weight:bold;
	line-height:35px;
	margin:0px;
	padding:16px 12px;
	text-align:center;
	text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a {
	background: #68af44 url("../images/mainmenu-bg-hover.png") repeat-x;
	color:#FFFFFF;
	text-decoration:none;
}
 .menu .parent:active, .menu .parent:hover, .menu .parent:active:hover, {
 background: #68af44 url("../images/mainmenu-bg-hover.png") repeat-x;
 color:#FFFFFF;
 text-decoration:none;
}
.menu li ul {
	background:#fff;
	display:none;
	height:auto;
	padding:0px;
	margin:0px;
	border:0px;
	position:absolute;
	width:200px;
	z-index:200;/*top:1em;
		/*left:0;*/
		}
.menu li:hover ul {
	display:block;
}
.menu li li {
	border-bottom:1px solid #e8e8e8;
	display:block;
	float:none;
	margin:0px;
	padding:0px;
	width:200px;
}
.menu li:hover li a {
	background:none;
}
.menu li ul a {
	display:block;
	height:35px;
	font-size:11px;
	font-style:normal;
	margin:0px;
	padding:0px 10px 0px 15px;
	text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a {
	background:#68af44 url("../images/mainmenu-bg-hover.png") bottom repeat-x;
	border:0px;
	color:#ffffff;
	text-decoration:none;
}
.menu p {
	clear:left;
}
.menu li.parent active a {
	color: #e32;
	background-color:#330;
}

So it gives me an output like this which is pretty annoying:

Please help.

2

Hi,

I’d really need to see the live page as I can’t see the effect without the images present. I’m guessing that it’s this line here that needs to address the top menu.


.menu li a:hover,[B] .menu ul li:hover a {[/B]
    background: url("../images/mainmenu-bg-hover.png") repeat-x;
    color:#FFFFFF;
    text-decoration:none;
}

To kepp the top menu highlighted it needs to be:


.menu li a:hover,[B] .menu li:hover a [/B]{
    background: url("../images/mainmenu-bg-hover.png") repeat-x;
    color:#FFFFFF;
    text-decoration:none;
}

Of course you’d need to address any issues on any nested children after that.

e.g.


.menu li:hover li a{color:#939393}
3

Thank you so much, it worked… I got it working finally
You saved my day!

:slight_smile: