2 replies [Last post]
soma56
soma56's picture
Offline
Regular
Last seen: 4 years 23 weeks ago
Timezone: GMT-5
Joined: 2008-07-25
Posts: 31
Points: 0

I have a drop down menu that works fine except I need to tweak 2 small things.

1. Is there a way to remove the background image from any items that show up beneath the menu? I just want to see the text.

2. How can I change the color of the text in the links in the drop down menu only? I want them to be white with an underline.

Here Is My CSS:

<style type="text/css">
 
.menu ul{
list-style-type:none;
padding:0;
margin:0;
}
/* make the top level links horizontal and position relative so that we can position the sub level */
.menu li{
float:left;
background-image:url(_img/nav_bg.jpg);
position:relative;
z-index:100;
}
 
/* use the table to position the dropdown list */
.menu table{
position:absolute;
border-collapse:collapse;
z-index:80;
left:-1px;
top:25px;
}
 
/* style all the links */
.menu a, .menu :visited {
display:block;
font-size:10px;
width:90px;
padding:7px 0;
color:#000;
background-image:none;
text-decoration:none;
margin-right:0px;
text-align:center;
font-family:verdana, sans-serif;
}
/* style the links hover */
.menu :hover{
color:#FFF;
}
 
/* hide the sub level links */
.menu ul ul {
visibility:hidden;
position:absolute;
width:90px;
height:0;
}
/* make the sub level visible on hover list or link */
.menu ul li:hover ul,
.menu ul a:hover ul{
visibility:visible;
}
 
 
</style>

Here Is My HTML:

<body style="background-color:#000;">
 
<div class="menu">
 
<ul>
<li><a href="../menu/index.html">MANAGEMENT<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
	<li><a href="#">LINK 1</a></li>
 
 
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
 
<li><a href="../menu/index.html">CONTENT<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
	<li><a href="#">FULL CONTACT POKER</a></li>
	<li><a href="#">LINK 2</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
 
<li><a href="index.html">SALES<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
	<li><a href="#">LINK 1</a></li>
	<li><a href="#">LINK 2</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
 
<li><a href="../layouts/index.html">CONSULTING<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
   	<li><a href="#">LINK 1</a></li>
	<li><a href="#">LINK 2</a></li>
 
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
 
<li><a href="../boxes/index.html">ABOUT<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
	<li><a href="#">LINK 1</a></li>
	<li><a href="#">LINK 2</a></li>
	<li><a href="#">LINK 3</a></li>
    <li><a href="#">LINK 4</a></li>
 
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
 
<li><a  href="../mozilla/index.html">CONTACT<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
	<li><a href="#">LINK 1</a></li>
	<li><a href="#">LINK 2</a></li>
	<li><a href="#">LINK 3</a></li>
 
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
 
</ul>
</div>
 
 
<br /><br />
 
</body>

Here's The Menu Online:
http://www.mibcomputers.ca/test/nav.html

Can anyone suggest which direction I should take :rolleyes:

flamenco
flamenco's picture
Offline
Enthusiast
US, East Coast
Last seen: 3 years 31 weeks ago
US, East Coast
Timezone: GMT-5
Joined: 2009-04-13
Posts: 240
Points: 144

Hi Soma, First question: if

Hi Soma,
First question: if I understand it correctly, this should leave you with an image for the top row of menu items, but none for the drop-downs:

.menu li ul li {
  background-image: none;
}

The other question - there are ways to make the lower hovers work differently from the top, but with the black background it's not quite clear to me exactly what you need.

Hope that helps, Dave

Heng Monorom
Offline
newbie
Last seen: 5 years 17 weeks ago
Joined: 2009-04-21
Posts: 1
Points: 0

help

please explain me the sentence below :

.........................
.........................
.........................

Thank you