CSS - Dropdown Menu Position

Hi,

I need to adjust only the 1st link(for 1st menu item) of my main menu. I have used pat pat template and have managed to apply a background image for the first item. Here is the css:

Code:

#first-suckerfish-vertical{
background:url(../images/menutop.jpg) no-repeat;
height:75px;
margin-top:-2.5px !important;
margin-top:-3px;
position:relative;
}

Now to apply style on the main menu item, i use a.mainlevel.
but i cant use the a.mainlevel..coz it will adjust all the links. I need to apply style only to the first link of my menu.

I am wondering if there's a way in css to access a class from another class or id. I already have this style(#first-suckerfish-vertical) for the 1st menu item. is it possible now to access the a.mainlevel from it..

Thx

I have seen this done but can't find any examples at the moment, but what I am looking to emmulate is have a page that required vertical scrolling. On either the left or right hand side is (for example) a square image and directly below it is a menu. When the user scrolls down the page the image goes off the top but the menu sticks to the top so is always visable. When the user scrolls back up as soon as the image starts to appear it pushes the menu back down so it is sat below the image. If i used position:fixed I can keep the menu in the same place when scrolling but I would like it to rise to the top of the browser when space is availble when scrolling.
Make sense?

I am not an expert on developing websites, but I've been able to get our site up and running without much challenge. I used a menu I found on www.dynamicdrive.com that allowed you to have our menu in a horizontal or verticle layout.

We don't use frames in our site but we wanted a frames-type look. So we use the menu in the vertical layout. What I'd like to do is find a way to keep the menu on the screen as people scroll down. I've seen other websites do this and have looked at a couple that were recommended from a previous post, but I can't figure out how to make it work propertly.

Our website is www.indyartistgroup.com. If someone could take a look at the site and suggest some ideas on how to make the menu on the left hand side stay on screen no matter how low you scroll I would appreciate it. I'm out of options at this point.

Thanks for the help.
John

Hi,

I am new to css and have written a code for a list menu in my page and i have added an image for instead of selecting the default bullets in css (ie. square, circle etc. so now my problem comes it looks perfect in Firefox browser but in IE 6 & 7 the position of the bullet image changes . In firefox it shows the bullet besides the text written and it is centered and perfect as i need but in IE 6 and 7 the image of the bullet moves up and sticks to the text instead of maintaining some distance with the text.

i am providing u the link of my page below:

r-interactive.net/clients/reed%5Fcss/

Also i am mentioning the css code which i have used for the list menu below :

Css :
Code:

ul#listmenu {
margin: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #959595;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
text-indent: 5px;
list-style-type: none;
list-style-image: url(../images/main_images/img_industry_bullet.gif);
list-style-position: inside;

}

ul#listmenu li {
list-style-image: url(../images/main_images/img_industry_bullet.gif);
margin-top: 0;
margin-right: 0;
margin-left: 0;
padding-top: 0.5em;
padding-right: 0;
padding-bottom: 0.5em;
padding-left: 0;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #207EC9;
clear: both;

}

Html :
Code:

<ul id="listmenu">
<li> Jewelry Industry</li>
<li> Aluminium Industry</li>
<li> Electronics Industry</li>
<li> Pharmaceutical Industry</li>
<li> Oil & Gas Industry</li>
<li> Cosmetics Industry</li>
</ul>

Help is always appreciated.

I have a vertical menu on the left-hand side of my website, everything appears correctly when the page is first loaded but when I click on a menu item the entire div appears to shift to the left (10px). If I refresh the page it also appears correctly, so it is only when I have clicked on a menu item.

I do know that there are plenty of problems with IE, but the menu does appear and function correctly in both IE and Opera. I am only having the problem with Mozilla.

I am thinking that it may be something to do with the link visited properties but am not sure what.

I have validated the css via the W3C website but there were no errors reported.

The css segment is as follows:

#subnavcontainer {
position: absolute;
left: 10px;
top: 0px;
margin-top:0px;
padding-top: 0px;
height: 700px;
width: 160px;
background: url("../images/bg_vert.gif") no-repeat;
}

#subnavcontainer ul
{
list-style-type: none;
color: #000;
margin-top: 0px;
margin-left: 0px;
padding-left: 0px;
padding-top: 0px;
font-family: Arial, Helvetica, sans-serif;
display: block;
width: 200px;
background-color: #D7D7D7;
}

#subnavcontainer li
{
padding-left: 0px;
margin-top: 1px;
}

#subnavcontainer ul li {
margin: 0 0 1px 0;
padding-left: 0px;
}

#subnavcontainer ul a
{
display: block;
padding: 0px 2px 2px 5px;
width: 160px;
color: #000;
background-color: #F0EFEE;
text-decoration: none;
border-left: 4px solid #B09292;
}

#subnavcontainer ul a:hover
{
color: #000;
background-color: #fff;
text-decoration: none;
border-left: 4px solid #FF0000;
}

The html segment is as follows:

<div id="subnavcontainer">
<ul>
<li>
<a href="../content/company/se_company_overview.htm" target="mainFrame">Overview</a>
</li>
<li>
<a href="../content/company/se_company_location.htm" target="mainFrame">Location</a>
</li>
<li>
<a href="../content/company/se_company_contact.htm" target="mainFrame">Contact</a>
</li>
</ul>
</div>

Hi all --

I've used plenty of CSS in the past, but I'm currently working on a dropdown menu that is more challenging than I had anticipated. A few things I need to fix that I just cannot figure out:

1) The last <li> in the dropdown seems to be overlapping my border

2) I want to put at least 10px of padding on the left hand side of the dropdown menu

3) I need to turn the carrot in front of each menu item to #ff9900

4) Whenever I try to increase or decrease the space between menu items, it seems as though white lines appear between my menu items.

In the interest of full disclosure, I found this CSS out somewhere on the web, and I've been trying to customize it since I didn't feel I had the knowledge to build it from scratch. Normally, I'd prefer to create something on my own, but limited time and knowledge prevented me from doing so this time around.

Attached below are my HTML and CSS code. I tried to post a link, but the forum will not allow me.

If you can offer any assistance, I would greatly appreciate it. Thanks in advance for your time!

HTML CODE:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Flyouts Page</title>
<link rel="stylesheet" type="text/css" href="menu/menu_style.css" />
<body>

<TABLE cellSpacing=0 cellPadding=0 width=610 border=0>
<TBODY>
<TR>
<TD width="200" valign="top">
<div id="outside">
	<ul id="navigation-1">
         <li><IMG src="test_graphic.jpg" border=0></A>

         <ul class="navigation-2">
             <li><a href="" title="Test 1" target="_self" ><strong>> Test 1</strong></a></li>
             <li><a href="" title="Test 2" target="_self" ><strong>> Test 2</strong></a></li>
             <li><a href="" title="Test 3" target="_self" ><strong>> Test 3</strong></a></li>
             <li><a href="" title="Test 4" target="_self" ><strong>> Test 4</strong></a></li>
             <li><a href="" title="Test 5" target="_self" ><strong>> Test 5</strong></a></li>

             <li><a href="" title="Test 6" target="_self" ><strong>> Test 6</strong></a></li>
             <li><a href="" title="Test 7" target="_self" ><strong>> Test 7</strong></a></li>
         </ul>
		</li>
    </ul>
</div></TD>
</TR>
</TBODY></TABLE>
</body>
</html>

CSS CODE:

Code:

#outside{
	border:0px solid #000000;
	background:#ffffff;
	}
#navigation-1 {
	padding:0px 0;
	margin:0px;
	list-style:none;
	width:200px;
	height:107px;
	border-top:0px solid #000000;
	border-bottom:0px solid #000000;
	font:normal 8pt Verdana, Arial, Helvetica;
	background:#ffffff;
}
#navigation-1 li {
	margin:0;
	padding:0;
	display:block;
	float:left;
	position:relative;
	width:200px;
	background:#ffffff;
}
#navigation-1 li a:link, #navigation-1 li a:visited {
	padding:4px 0;
	display:block;
	text-align:left;
	text-decoration:none;
	background:#ebf7f3;
	color:#000000;
	width:195px;
	background:#ffffff;
}
#navigation-1 li:hover a, #navigation-1 li a:hover, #navigation-1 li a:active {
	padding:4px 0;
	display:block;
	text-align:left;
	text-decoration:none;
	background:#ffffff;
	color:#000000;
	width:195px;
}
#navigation-1 li ul.navigation-2 {
	margin:0;
	padding:0px 0px 0;
	list-style:none;
	display:none;
	background:#ebf7f3;
	width:195px;
	position:absolute;
	top:110px;
	left:0px;
	border: 1px solid #cbccce;
}
#navigation-1 li:hover ul.navigation-2 {
	display:block;
	width:198px;
}

/*the individual menu items*/
#navigation-1 li ul.navigation-2 li {
	width:170px;
	height:18px;
	clear:left;
	font-size: 10px;
	font-family:Arial, Helvetica, sans-serif;
}

#navigation-1 li ul.navigation-2 li a:link, #navigation-1 li ul.navigation-2 li a:visited {
	clear:left;
	background:#ebf7f3;
	padding:4px 0px -4px 5px;
	width:170px;
	border:none;
	position:relative;
	z-index:1000;
}
#navigation-1 li ul.navigation-2 li:hover a, #navigation-1 li ul.navigation-2 li a:active, #navigation-1 li ul.navigation-2 li a:hover {
	clear:left;
	background:#ebf7f3;
	padding: 4px 0px 0-4px 5px;
	width:170px;
	position:relative;
	z-index:1000;
	color:#cbccce;
}
#navigation-1 li ul.navigation-2 li a span {
	position:absolute;
	top:0;
	left:132px;
	font-size:10pt;
	color:#000000;
}
#navigation-1 li ul.navigation-2 li:hover a span, #navigation-1 li ul.navigation-2 li a:hover span {
	position:absolute;
	top:0;
	left:190px;
	font-size:10pt;
	color:#cbccce;
}
.carrot{
	color:#ff9900;
}

Hi

I am trying to create a drop down menu on my existing design.

Code:

http://dfinnema.com/help

How would I add a drop down to Page 3 menu that looks like this:

Code:

http://dfinnema.com/help/images/dropdown_active.png

Without the menu:

Code:

http://dfinnema.com/help/images/dropdown.png

Any Ideas / Suggestions? :|

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 looking to add a drop down menu for my site but Instead of the menu dropping down i want it to go up and I found a few things about it but nothing really helped me I was wondering how can i get a css drop down to go up? sorry if this is the wrong forum to post on.. but i am clueless on this part i am going to be starting on the script soon just wanted to know how to code the script to make it go up

Thank you
Smackadoo

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 yall, i'm a quite newbie on css and i'm having an issue with my drop menu on the site i'm trying to do , with wordpress, multi level menu...i started from the code generated by the css generator and tried to fit it to my meeds.
but, i can't control the li li menu (categories), i want it to appear exactly at the end of the li categories.
2) the second issue is that i'm trying to add a margin to the main ul because it's to near from the top.
can someone help me plz?

here my code
Code:

#suckerfishnav,
#suckerfishnav ul {
  float: left;
  height: 2.98em;
  width: 960px;
  list-style: none;
  line-height: 1;
  background: white;
  font-weight: bold;
  margin: 0.1em 0.1em 0.1em 0.1em;
  padding: 0;
}

#suckerfishnav a {
  display: block;
  color: #7c6240;
  text-decoration: none;
  padding-top: 0.25em;
  padding-right: 0.7em;
  padding-bottom: 0.1em;
  padding-left: 0.2em;
}

#suckerfishnav li {
  float: left;
  padding: 0;
  width: 13em;
  height: 2.8em;
}

#suckerfishnav ul {
  position: absolute;
  left: -999em;
  height: auto;
  margin-left: 2em;
  line-height: 1;
  z-index: 500;
}

#suckerfishnav li li {
  width: 9.6em;
  border: solid #eda;
  border-width: 1px;
  padding-top;
  10px;
}

#suckerfishnav li ul a {
  width: 9.8em;
}

#suckerfishnav li ul ul {
  margin: -0.20em 0 0 9.8em;
}

#suckerfishnav li ul {
  position: absolute;
  left: -999em;
  height: auto;
  width: 9.9em;
  w\idth: 9.8em;
  font-weight: normal;
  border-width: 0.20em;
  margin: 0;
  z-index: 500;
}

#suckerfishnav li ul a {
  width: 9.9em;
  w\idth: 9.8em;
}

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

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

#suckerfishnav li:hover,
#suckerfishnav li.sfhover {
  background: #eda;
  width: 9.5em;
  w\idth: 9.4em;
}

Help!! I am trying to design this website: nitrocanine .com/D/DDesign and the dropdown menus won't work in IE, while they work in Chrome, Safari, Firefox... does anyone know how to make them work in IE as well?? You can view the source and see the css coding and the relevant HTML.

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.

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!