CSS - Css Dropdown From Link

Hello

is there a way to make it so hyperlinks are not decorated as the default blue? I have the following css which I've attempted to make it so the text '.com' is always white, but it defaults to the standard link color.

html:

<td class="nodecoration"><a class="nodecoration" href="http://www.somesite.com">.com</a></td>

css:

Code:

td.nodecoration {
	background-color: #003399; color: white; width: 120px; height: 30px; font-family: "Verdana", sans-serif; font-size: 25px; font-weight: bold; text-align:center;
}

A:link.nodecoration {text-decoration: none}
A:visited.nodecoration{text-decoration:none}
A:active.nodecoration{text-decoration:none}
a:hover.nodecoration{text-decoration:underline}

hello,

i was reading the well-known suckerfish dropdown tutorial and was trying to do something like it. i thought i had understood the logic behind it, but i can't get it to work.

the nested unordered lists appear like so:

ITEM1
subitem1 subitem2 subitem3
ITEM2
subitem1 subitem2 subitem3

i wanted them to appear like so:

subitem1____subitem1
subitem2____subitem2
subitem3____subitem3
ITEM1_______ITEM 2

the positioning isn't too relevant, all i really wanted was to pull the nested ul out of the flow...

i made sure that the li ul part was positioned absolutely, but i can't do anything with it (no styling, no anything). my css/code must be the problem, but i can't see what i'm doing wrong. here's the relevant code:

CSS:
Code:

#menu ul { 
position: relative;
margin: 8em 0 0 0;
float: left; 
background-color: #D60078;
list-style-type: none;
}

#menu li 	{ 
display: inline; 
padding: 0 2.5em 0 0;
position: relative; 
}

#menu li a:link, a:visited { 
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
color: #FFF;
}

#menu li a:hover, a:active 	{ 
text-decoration: underline;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
color: #FFF;
}

#menu li ul { position: absolute; 
left: 0; top: 0; 
background-color: #FFF;
display: block; 
} 

HTML:
Code:

<ul id="menu">
<li><a href="">ITEM1</a>
<!-- SUBMENU -->
<ul>
<li><a href="">subitem1</a></li>
<li><a href="">subitem2</a></li>
<li><a href="">subitem3</a></li>
</ul>
</li>

<li><a href="">ITEM2</a>
<!-- SUBMENU -->
<ul>
<li><a href="">subitem1</a></li>
<li><a href="">subitem2</a></li>
<li><a href="">subitem3</a></li>
</ul>
</li>

</ul>

i hope that made sense (after working on this for hours and trying everything that came to mind, i'm getting a little incoherent).

thanks for any help!

I made a drop down menu with css and I can't get it to work with IE6. Can anyone help?

You can view an example of what I have at the following url

mentalgameofmoney.co.uk/example.html

Here is the CSS
Code:

#menu {
position:absolute;
background-color:#FF0000;
overflow:hidden;
height:30px; 
width:91px;
top:0px;
left:0px;
}
#menu:hover{
overflow:visible;
}
#menu a:link{
text-decoration:none;
}
#spacer{
height:30px;
}
#link_box{
background-color:#cbbba2;
border-left:#c1ad90 solid 1px;
border-right:#c1ad90 solid 1px;
border-bottom:#c1ad90 solid 1px;
padding-left:5px;
color:#51351a;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:12px;
text-decoration:none;
text-align:left;
}
#link_box:hover{
background-color:#51351a;
color:#FFFFFF;
}

Here is the HTML
Code:

<div  id="menu">
  <a href="#">
  <div id="spacer"></div></a>
   <a  href="#"><div id="link_box">Link</div></a>
   <a href="#"><div id="link_box">Link</div></a>
   <a href="#"><div id="link_box">Link</div></a>
   <a href="#"><div id="link_box">Link</div></a>
   <a href="#"><div id="link_box">Link</div></a> 
   <a href="#"><div id="link_box">Link</div></a>
   <a href="#"><div id="link_box">Link</div></a>
   <a href="#"><div id="link_box">Link</div></a>
  </div>

I've developed a dropdown navigation menu from a tutorial. The basic menu works perfect in IE and FF. But I would like to change a few things that for the life of me I can't get to work. First would be that under each item in the dropdown menu I would like there to be a bottom border. So in my css file I added border-bottom to the li li {} section. Now I am faced with two problems.

First in firefox the border expends maybe 5px. Apon further investigation I found that for some reason FF has the <li> tags only about 5px wide all over the place! In IE it extends atleast below the text but won't will the entire <li> like it should! FF also doesn't give the border to all the links like it should.

The next problem is in the width of the elements. Instead of the dropdown part being a set width, I would like the the part that drops down to stretch so that each link is on one line. But the entire part that drops down would be still remain rectangular like it does now.
Code:

Ex:
[Link1][Link2][Link3]  *with the mouse over the link 1

|Url1      |
|Url2      |
|Much Longer|

instead of

[Link1][Link2][Link3]  *with the mouse over the link 1
|Url1 |
|Url2 |
|Much|
|Longer|

I think this has something to do with the width of the li, so I set the width to auto. No change.

To recap my lengthy post. Getting a bottom border on the li tags in the dropdown Getting FF to behave with the bottom border and widths Each link should be on only one line
I think that getting the <li> width to behave will solve most of my problems. I've attached the original css and html pages.

Hi,

I'm trying to solve a little CSS issue with, guess what!, IE6.

92 (dot) 48 (dot) 108 (dot) 113 (forward slash) ~anyjob

In FF all is good, but when viewed in IE the nav bar has been forced down to misalign with my background red strip.

Also the dropdowns don't work.

Could anyone point me in the right direction. I don't think this is a float issue and I've read up as much as possible but this is really confusing me. Any help would be very much appreciated.

Thanks,

Brian

i'm having a problem with a couple attributes for my CSS dropdowns.

view the page here
(both CSS and XHTML are on the same page)

specifically my .hoverBase:hover .hoverLaunch {} class
which reads as such:
Code:

.hoverBase:hover .hoverLaunch {
	display:block;
	position:absolute;
	top:15px;
	left:-3px;
	width:70px;
	border:3px solid #000000;
	text-align: center;
	z-index: 30;
}

the problem is that IE6 will not display the .hoverLaunch class like FireBird does, in fact, it does not display at all. Another awesome feature of IE6 is that the :hover i have applied on the .hoverbase does not work either. Any help is appreciated.

Thanks in advance.

Need some help with some dropdown menus.

I have been reading many of the tutorials on other sites.

I have come up with this code for my drop down menus:

Code:

.dropmenu {
   position: absolute;
   left: -1500px;
   visibility: visible;
   z-index: 101;
   float: left;
   width: 122px;

   border-width: 1px;
   border-style: solid;
   border-color: #BFBFBF;	
   background-color: #FFFFFF;
}
.dropmenu ul {
   margin: 0;
   padding: 0;
   list-style-type: none;
}
.dropmenu li {
   display: inline;
}
.dropmenu a, .dropmenu a:visited, .dropmenu a:active {
   display: block;
   width: 120px;

   padding: 2px;
   margin: 1px;
   font-family: Arial;
   font-size: 10px;
   font-weight: normal;
   text-align: center;
   text-decoration: none;

   color: #000000;
   background-color: #D4D4D4;
}
.dropmenu a:hover {
   padding: 2px;
   margin: 1px;
   font-family: Arial;
   font-size: 10px;
   font-weight: normal;
   text-align: center;
   text-decoration: none;

   color: #000000;
   background-color: #BFBFBF;
}

but no matter how much I adjust settings that I know, I cannot get the dropdowns to show up below my original buttons, they always show up to the right hand side.

Can someone here please point me in the right direction...

Hi all!


Been a while! A couple of quickies if people wouldn't mind!

1) my nested list menus break in FF3. They display OK in FF2, IE7 and IE8 beta!? Anyone know what might be wrong?

page is he

http://www.wellandpower.net Very strage!

Also, a seperate qustion you can set a div to display: table-cell; This works fine on FF2 and 3, but in IE it doesnt work.

You can see the difference he

http://www.xxl.me.uk

Hey all,

having a bit of trouble getting my drop down menu to display properly. It's modeled after the suckerfish menu, only modded a bit.

Here's the site...hover over 'machines' to see what i'm talking about (have to use FF, i haven't added the JS for IE yet).

The drop down is adopting the rollovers from the mainmenu, and I don't know what to change to make 'em different.

Here's the CSS for the menu:
Code:

#mainmenu {
width:780px;
height:41px;
margin:auto;
position:relative;
}

#mainmenu li.navigation {
width:78px;
height:41px;
float:left;
text-align:center;
background:#B8A488 url(images/mainmenu_roll.gif) no-repeat;
}

#mainmenu li.navigation a{
background:#66563D url(images/mainmenu_off.gif) no-repeat;
display:block;
text-decoration:none;
color:#F4F1E5;
height:31px;
padding-top:10px;
}

#mainmenu li.navigation a:hover {
background:transparent;
color:#66563D;
}

#mainmenu li#home {
background-image:url(images/home_roll.gif);
}

#mainmenu li#home a{
background-image:url(images/home_off.gif);
}

#mainmenu li#home a:hover {
background:transparent;
}


#mainmenu li#contact {
background-image:url(images/contact_roll.gif);
}

#mainmenu li#contact a {
background-image:url(images/mainmenu_off.gif);
}

#mainmenu li#contact a:hover {
background:transparent;
}

	/* BEGIN DROP DOWN MENU */
	
	li ul {
	  display: none;
	  position: absolute; 
	  top: 1px;
	  margin-left:-2px;
	  background-color:#B8A488;
	  border-left:1px solid #66563D;
	  border-bottom:1px solid #66563D;
	  padding:2px;
	  z-index:500;
	}
	
	* html li ul {
	top:26px;
	}
	
	/*
	li ul li {
	padding:0;
	}
	*/

	li > ul {
	top: auto;
	left: auto;
	}

	li:hover ul, li.over ul{ 
		display: block;
	}
	

Thanks!

My second level menu items are not showing in IE, but show fine in firefox.

Code:

#menucontainer {
	width: 100%;
	clear: both;
	position: relative;
	text-align: center;
	margin: 0 auto;
	padding-left:0px;
	padding-top:35px;
	padding-bottom:15px; }

#menu {
text-align: center;
display:table;
padding:5;
margin:0 auto;
list-style-type:none;
white-space:nowrap;
background: #eee;
}

#menu ul {
font: small-caps bold 12px/15px "lucida grande", tahoma, arial, verdana, sans-serif;
list-style: none;
margin: 0;
padding: 0;
width: 7em;
float: left;
}

#menu a {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb
margin: 0;
padding: 2px 3px;
}

#menu a {
color: #C7C7C7;
background: #000;
text-transform: small-caps;
}

#menu a:hover {
color: #fff;
background: #000000;
}

/* ********* secondary links ************** */

#menu li li a {
color: #C7C7C7;
background: #292A2C;
text-decoration: none;
}

#menu li li a:hover {
color: #FFF;
background: #292A2C;
}

#menu li:hover { z-index:1;}

#menu li {position: relative}

#menu ul ul {
position: absolute;
z-index:100;
left:0;
top:auto;
display:none;
}

div#menu ul ul,
div#menu ul li:hover ul ul
{display: none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul
{display: block;}

<!--[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(behavior.htc); /* call hover behaviour file */
font-size: 100%; /* enable IE to resize em fonts */
} 

}
#menu ul li a {
height: 1%; /* make links honour display: block; properly */
} 
</style>
<![endif]-->

I'm working on my first suckerfish dropdown for a site. I'm encountering two problems.

1) There is no background color on the subitems when i select the main item, making them hard to read

2) Internet Explorer displays the dropdown to the right of the main list item, rather than below. Netscape displays it correctly. Is this due to something I altered?

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Markey Home Remodeling</title>
<link href="main.css" rel="stylesheet" type="text/css">

<style title="text/css">
#container {
	width: 562px;
	background: #F4ECD9;
	text-align: left;
	
	margin: 0 auto;
}



#nav, #nav ul {
	float: left;
	width: 562px;
	list-style: none;
	line-height: 1;
	background: EAE3A3;
	font-weight: bold;
	padding: 0;

	margin: 0 0 1em 0;
}

#nav a {
	display: inline;
	width: 10em;
	w\idth: 6em;
	color: #7C6240;
	text-decoration: none;
	padding: 0.25em 2em;
}

#nav a.daddy {
	background: url(rightarrow2.gif) center right no-repeat;
}

#nav li {
	float: right;
	padding: 0;
	width: 10em;
	
}

#nav li ul {
	position: absolute;
	left: -999em;
	height: auto;
	width: 14.4em;
	w\idth: 13.9em;
	font-weight: normal;
	border-width: 0.25em;
	margin: 0;
	
	}

#nav li li {
	padding-right: 1em;
	width: 13em
	
}

#nav li ul a {
	width: 13em;
	w\idth: 9em;
}

#nav li ul ul {
	margin: -1.75em 0 0 14em;
	}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
	left: -999em;
	
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
	left: auto;
}

#nav li:hover, #nav li.sfhover {
	background: white;
}


</style>


<script type="text/javascript">

sfHover = function() 
{     
var sfEls = document.getElementById("nav").getElementsByTagName("LI");     
for (var i=0; i<sfEls.length; i++) {         sfEls[i].onmouseover=function() 
{             
this.className+=" sfhover";         
}         
sfEls[i].onmouseout=function() 
{             
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");         
}     
} 
} 
if (window.attachEvent) window.attachEvent("onload", sfHover); 

</script>


</head>

<body>

<table width="800" border="0" cellspacing="0" cellpadding="0" class="tableborder" align="center">
  <tr>
    <td colspan="2">&nbsp;</td>
  </tr>
  
  <tr>
    <td height="20" width="562" class="leftnav">

<div id="container">

<ul id="nav">    
 
  <li><a href="#">SIDING</a></li>  
 
 <li><a href="#">GUTTERS</a></li> 
 
 
  <li><a href="#">BASEMENTS</a></li>  

<li><a href="#">WINDOWS</a>         
  <ul>
  <li><a href="#">300 Series</a></li>  
  <li><a href="#">900 Series</a></li> 
  <li><a href="#">Sliding</a></li>
  <li><a href="#">Bay and Bow</a></li>
 </ul>     
 </li>     

  
<li><a href="#">DOORS</a>         
  <ul>
  <li><a href="#">Entry</a></li>  
  <li><a href="#">Patio</a></li> 
  <li><a href="#">Garage</a></li> 
  </ul>     
</li>         
  
</ul>

</div></td>
  
    <td class="rightnav">
	
	<div id=linkstyles>   &nbsp;   <a href="#">HOME</a>   &nbsp;   <a href="#">CONTACT US</a>
	</div></td></tr>
  
  <tr>
    <td>
	
	<table width="562" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><img src="images/mainimage.jpg"></td>
  </tr>
  <tr>
    <td><div align="center"><img src="images/whychoose.jpg"></div></td>
  </tr>
  <tr><td>
  
  <table width="98%" border="0" cellspacing="0" cellpadding="0" align="center" class="maincontenttable">
  <tr>
    <td width="50%">REPUTATION: A proven track record with thousands of 
delighted customers.
<br><br>
QUALITY: The highest quality products, the best trained 
window installers
*all A.W.D.I. (American Window and Door Installed) Certified.
<br><br>
PRICE: The lowest prices on the highest quality 
brand-name products. Period.
<br><br>
Factory Authorized Distribution, Factory Trained 
Employees.
<br><br>
Qualified, Courteous Salespeople treat you with 
professionalism and respect.
</td>
    <td width="355">&nbsp;</td>
  </tr>
</table>

  
  </td></tr>
</table>

	
	</td>
	<td valign="top" width="100%"  class="mainrighttable">
	<table width="230" border="0" cellspacing="0" cellpadding="0" align="left">
  <tr>
    <td><img src="images/pledge.jpg" hspace="5" vspace="5"></td>
  </tr>
  <tr>
    <td>
	
	<table border="0" cellspacing="0" cellpadding="0" align="right" class="rightcontenttable">
  <tr>
    <td>Our business has always been family owned 
and operated.  For more than 27 years, we 
have served our community with pride and 
integrity. Years ago, the best craftsmen always 
put their names on their work.
<br><br>
We still do.</td>
  </tr>
</table>
</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>

	
	<span class="style1"></span></td>
  </tr>
  
</table>

</body>
</html>

Thanks for your help

Link: http://cemtec.quicksites.co.za

CSS:
http://cemtec.quicksites.co.za/wp-c...grass/style.css

Hi

This dropdown menu on Products works in Firefox but when I goto IE7 I dont see anything at all. I have tried changing the div Class to a Div Id also without any change. Anybody have any clues to what I have todo?

L.

Hi there,

I'm trying to integrate some SEO friendly dropdown menus into an existing website design.

The trouble I'm experiencing so far is that the body of the design is aligned centre, and most of the examples I've seen thus far use absolute positioning of <div> elements (i.e. the design is left-aligned, so the designer knows to position the dropdown div X pixels).

Is there a good reference I can use for positioning my divs properly?

Thanks

I have been hunting around for an all CSS drop down menu that when you hover on the heading the menu expands down to show the heading 1 menu and if you hovered over the next menu item this expands to show that menu list instead a bit like the 'be the first to apply' on the right of this page, http://www.fish4.co.uk/iad/jobs
search for say 'admin' just to get to the results page as this is where the menu is.

the look is not important but the function is

BUT....

i wanted to have many links in the drop down not just the one as in this example.

this is the extracted code i have got so far that does what you see on this page.

Code:

<style>

#rightcolumn {
 float: right;
 width: 170px;
 text-align: center;
}

#leftcolumn {
 float: left;
 width: 545px;
 padding: 10px;
}

h3#bftahead {
	text-align:left;
	color:#c1001f;
	font-size:1.5em;
	font-weight:bold;
	margin:23px 0px 10px 0px;
	}

#bfta h4 {
	font-size:1.1em;
	margin:0em;
	padding:0.4em 0.1em 0.6em 0.1em
	}

#bfta {
	width:170px;
   	text-align:left;
   	padding:0px;
   	margin:0px 0px 10px 0px;
   	list-style-type:none;
   	height:47em;
   	overflow:hidden;
   	background:#ffffff url('images/bfta-background.jpg') bottom no-repeat;
	border-bottom:1px solid #cfcfcf;
   }

#bfta li {float:left;width:100%;}

#bfta li a {
   	padding:0.5em 3%;
   	display:block;
   	width:94%;
   	height:1.95em;
	margin-bottom:-0.4em;
   	overflow:hidden;
   	text-decoration:none;
   	background:transparent url('images/bfta-background.png') no-repeat;
   	color:#333333;
   	font-family:arial, sans-serif;
   }

#bfta li a#last, #bfta li a:hover {height:24em;}

#bfta-whitebrand {list-style:none;margin:0em 0em 1em 1em;padding:0px;}
#bfta-whitebrand li {padding:0em 0.4em;}	

</style>

<div id="leftcolumn">
<ul id="bfta">

	<li>
	<h4>a1</h4>
	a1
    </li>

	<li><a href="a2">
	<h4>a2</h4>
	a2</a>
    </li>

	<li><a href="a3">
	<h4>a4</h4>
	a3</a>
    </li>

</ul>
</div>

Hi,

I've put together a drop down menu based on the suckerfish demo which can be seen at http://wetherbyrunners.mdwebspace.co.uk. However it doesn't seem to be working in Internet Explorer. I've tried changing the z-index to a higher value for the drop down, but it hasn't worked. Does anyone have any ideas of how it could be sorted out?

Thanks in advance,

Matthew Dingley