|
CSS - Problem With Dropdown Ul Menu Disappearing
I have dropdown menus completly made of UL lists within UL lists. And i control them with css to show and hide them using :hover.
Example: div#navDiv li:hover ul {display:block; z-index:11;} well this works completly fine in Mozilla. But i recently encountered a problem in mozilla. Below the dropdown menu's when I put a <div> and when i add the value overflow:auto; it breaks the menu. The menu still works, but when im hovering over the dropdown UL that goes over this <div> with the scrollbar it will disappear right when i get over the <div> below it. But the UL dropdown menu will not disappear if i just remove that one css property "overflow:auto" is there any way to fix this in mozilla? It works fine in IE. Similar TutorialsHello, This should be a pretty simple fix. I have drop downs which I am testing to work in IE 6. They are working perfectly, however once i move the mouse past the first LI or so in the drop down, it disappears. I am not sure whether it is the link on the page below interfering, or me exiting the div, or just an error in my css. Here is a link: (Keep in mind it must be opened in IE6 to see the issue..it works fine in firefox and IE7) http://www.fieldspianos.com/new/index.php Here is my CSS: Code: div#dropdownmenu {
float: left;
padding-top: 5px;
background-color: #000000;
color: #EEB810;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
height: 25px;
}
ul#nav {
padding: 0;
margin: 0;
list-style: none;
}
ul#nav li {
float: left;
position: relative;
vertical-align: middle;
margin-right: 2px;
}
ul#nav li.nomargin {
margin-right: 0;
}
ul#nav li a {
display: block;
text-decoration: none;
color: #EEB810;
background: #000000;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
padding: 2px;
}
ul#nav li ul li a {
display: block;
text-decoration: none;
color: #660000;
background: #BDB35E;
padding: 3px;
border: 1px solid #000000;
border-bottom: 0;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
ul#nav li ul li a:hover {
display: block;
text-decoration: none;
color: #FFFFFF;
background: #000000;
padding: 3px;
border: 1px solid #000000;
border-bottom: 0;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
li ul {
display: none;
position: absolute;
left: 0;
}
li ul li {
width: 13em;
clear: both;
margin: 0;
}
li > ul {
top: auto;
left: auto;
}
li:hover ul, li.over ul {
display: block;
}
Hiyas, I am a bit of a CSS noob, and I am having some problems so I thought I would post here and see if anyone could help me. I was given some code by a friend the other day to make a drop-down menu that comes down from a jpg-based button. Everything seemed to work, until I tried to make more than 1 menu. Here is my friend's website that uses the code - she can have 3 menus without anything glitching: www.hollyhostile.com The menu is controlled by a javascript file, I have been told this is CSS based but it may indeed be java, so sorry if this is in the wrong place. Her js menu file looks kind of like this: Code: //Contents for menu 1 var menu1=new Array() menu1[0]='<a href="http://www.hollyhostile.com/about.html">About Me</a>' menu1[1]='<a href="http://www.hollyhostile.com/faq.html">FAQ</a>' menu1[2]='<a href="http://www.hollyhostile.com/references.html">References</a>' menu1[3]='<a href="http://www.hollyhostile.com/pricing.html">Pricing</a>' //Contents for menu 2, var menu2=new Array() menu2[0]='<a href="http://www.hollyhostile.com/forum">Forum</a>' menu2[1]='<a href="http://www.hollyhostile.com/guestbook/">Guestbook</a>' menu2[2]='<a href="http://www.hollyhostile.com/blog/">Blog</a>' menu2[3]='<a href="http://www.youtube.com/hollyhostile">Tutorials</a>' Then she has this in her index.html file: Code: <a href="http://hollyhostile.com/default.htm" onClick="return clickreturnvalue()" onMouseOver="dropdownmenu(this, event, menu1, '100px')" onMouseOut="delayhidemenu()"> <img src="holly_files/purple_05.jpg" alt="" width="65" height="23"></a></td> <td> <a href="http://www.hollyhostile.com/portfolio.html"><img src="holly_files/purple_06.jpg" alt="" width="65" height="23"></a></td> <td> <a href="http://hollyhostile.com/default.htm" onClick="return clickreturnvalue()" onMouseOver="dropdownmenu(this, event, menu2, '100px')" onMouseOut="delayhidemenu()"> <img src="holly_files/purple_07.jpg" alt="" width="88" height="23"></a></td> However, when I try to use this on my own design, it will only show menu1, and this displays over random buttons, not in a succession. It's very very strange. Here is an example of the kind of thing I want to do: www.gothique-noir.com/asylum Each button apart from "Home" should drop down into a menu, but for some reason it won't let me do different menus. If anyone can help me that would be hugely appreciated Problem solved. Hello, I am working on a website and this website got a dropdown menu and this menu works fine! But when I want to make a submenu in the dropdown, it will not work correctly. The submenu is not placed in a new row, it is placed in the main dropdown menu. The next picture shows the problem: "Test" has to be a submenu from "Wie zijn we?", but it is placed just under it. URL I have used the next HTML-Code: Code: <!-- Navigation item -->
<ul>
<li><a href="#">Almelo Sociaal<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="aswiezijnwe.html"target="iframe">Wie zijn we?</a>
<ul><li><a href="aswiezijnwe.html"target="iframe">test?</a></li></ul></li>
<li><a href="aswatdoenwe.html"target="iframe">Wat doen we?</a></li>
<li><a href="asbestuur.html"target="iframe">Organisatie</a></li>
<li><a href="asnieuws.html"target="iframe">Nieuws</a></li>
<li><a href="asactiviteiten.html"target="iframe">Activiteiten</a></li>
<li><a href="asafspraken.html"target="iframe">Afsprakenlijst</a></li>
</ul>
And I have used the next CSS-Code: Code: /*Drop-down menu*/
.nav2 {white-space:nowrap /*IE hack*/; float:left; width:954px; background:rgb(228,22,34); color:rgb(100,100,100); font-size:130%;} /*Color navigation bar normal mode*/
.nav2 ul {list-style-type:none;}
.nav2 ul li {float:left; z-index:auto !important /*Non-IE6*/; z-index:1000 /*IE6*/; border-right:solid 1px rgb(175,175,175);}
.nav2 ul li a {float:none; !important /*Non-IE6*/; float:left /*IE-6*/; display:block; height:2.1em; line-height:2.1em; padding:0 16px 0 16px; text-decoration:none; font-weight:normal; color: rgb(235,235,235);}
.nav2 ul li ul {display:none; border:none;}
/*Non-IE6 hovering*/
.nav2 ul li:hover {position:relative;} /*Sylvain IE hack*/
.nav2 ul li:hover a {background-color:rgb(228,22,34); text-decoration:none;} /*Color main cells hovering mode*/
.nav2 ul li:hover ul {display:block; width:10.0em; position:absolute; z-index:999; top:2.0em; margin-top:0.1em; left:0;}
.nav2 ul li:hover ul li a {white-space:normal; display:block; width:10.0em; height:auto; line-height:1.3em; margin-left:-1px; padding:4px 16px 4px 16px; border-left:solid 1px rgb(175,175,175); border-bottom: solid 1px rgb(175,175,175); background-color:rgb(240,240,240); font-weight:normal; color:rgb(100,100,100);} /*Color subcells normal mode*/
.nav2 ul li:hover ul li a:hover {background-color:rgb(175,175,175); text-decoration:none;} /*Color subcells hovering mode*/
/*IE6 hovering*/
.nav2 table {position:absolute; top:0; left:-1px; border-collapse:collapse;}
.nav2 ul li a:hover {position:relative /*Sylvain IE hack*/; z-index:1000 /*Sylvain IE hack*/; background-color:rgb(20,25,231); text-decoration:none;} /*Color main cells hovering mode*/
.nav2 ul li a:hover ul {display:block; width:10.0em; position:absolute; z-index:999; top:2.1em; t\op:2.0em; left:0; marg\in-top:0.1em;}
.nav2 ul li a:hover ul li a {white-space:normal; display:block; w\idth:10.0em; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-left:solid 1px rgb(175,175,175); border-bottom: solid 1px rgb(175,175,175); background-color:rgb(240,240,240); font-weight:normal; color:rgb(50,50,50);} /*Color subcells normal mode*/
.nav2 ul li a:hover ul li a:hover {background-color:rgb(215,215,215); text-decoration:none;} /*Color subcells hovering mode*/
Can someone help me to fix the submenu in the dropdown menu? I think myself it is a problem in the CSS. Maybe something has to be added there, but I don't know what Hi all- My first post here, and I'm hoping someone here can help me out. I'm beginning to build a client site, and I've got an elusive problem with my multiple-tier CSS dropdown menu not vertically spacing its <li> elements correctly in IE7. The problem doesn't seem to happen in IE6, or Mozilla browsers. This menu began its life as a Project Seven "PopMenu Magic" menu, but I've modified it quite a bit with hand-coding. Other that this small problem in IE7, I'm happy with its look and it's functioning as intended. What's further complicating my troubleshooting is that the problem only happens on second-level pages of my site, but not on the homepage. All of the pages use the same "included" CSS and navigation code (I'm building the site in ExpressionEngine and am embedding the navigation in a manner similar to a PHP include). All CSS and xHTML validates, and I'm at wit's end. Links NOTE: The blocked "URL" in all of these following links is to be replaced with "falmouth academy dot org" . I guess because I'm new the forum thinks i'm a spammer. The vertical dropdown menu listings SHOULD be spaced as seen here URL /index.php The spacing problem reveals itself he URL /index.php/about/introduction The code that should be controlling the vertical spacing is found in this css file: URL /index.php?css=home/stylesheet.v.1212113978 And the specific code segment in that file is: #p7PMnav li ul li a { /* second tier navigation */ color : #ffffff; height : 14px; padding : 4px; } I'm not sure, but it appears that in IE7, only the first item in the list is getting the height and padding attributes applied. The color, however, is applied to all elements as it should. Very puzzling. Hopefully this explanation is clear, but the problem is still as clear as mud. Any help is appreciated - I'm not a CSS guru, and I'm hoping there's something I'm overlooking. Hello everyone! I would like to integrate a very simple purely css-based dropdown menu into my website. My knowledge of css is very basic, so I adapted a free sample menu, boiled it down (mostly through trial and error) to my very specific idea of what it should look like and finally ran into a problem which I could not solve myself so far. The following code represents "my" current code, with placeholder colors, text, links etc.: Code: <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Menu</title>
<style type="text/css">
/* background */
body {
background-color: #252525;}
/* targeted dropdown button style */
.dd-select {font: 10.5px Verdana; text-transform: uppercase;}
.dd-select a:link {color: #ff0000; text-decoration: none;}
.dd-select a:hover {color: #ffea00;}
/* positioning */
ul.Menu ul{display:none}
ul.Menu li:hover>ul{display:block}
ul.Menu ul{position: absolute; left:-1px; top:98%;}
ul.Menu li:hover{position:relative;}
/* shrink to fit */
ul.Menu {
float: left;}
/* dropdown button */
ul.Menu {
margin:0px;
list-style:none;
padding:0px;}
/* menu case */
ul.Menu ul {
margin:0px;
list-style:none;
padding:0px;
background-color:#5c5c5c;
border-color:#a3a3a3;
border-width:1px;
border-style:solid;}
/* menu element padding */
ul.Menu li{
margin:5px 5px 5px 5px;}
/* menu element */
ul.Menu a {
display:block;
background-color:#454545;
text-align:left;
padding:4px 9px 5px 9px;
font:normal 11.5px Verdana;
color: #f7f7f7;
text-decoration:none;}
/* menu hover */
ul.Menu li:hover>a{
background-color:#333333;
color: #00ff60;}
</style>
</head>
<body>
<ul class="Menu">
<li><a href="#" target="_top">Select</a>
<ul>
<li><a href="#" target="_top">Option 1</a></li>
<li><a href="#" target="_top">Option 2</a></li>
<li><a href="#" target="_top">Option 3</a></li>
</ul>
</li>
</ul>
<p> </p>
<p> </p>
<p class="dd-select"><a href="#">Select (as it should look)</a></p>
</body>
</html>
Now my problem is, I would like the dropdown menu's trigger button (labeled "Select") to look like the text link beneath (styled through .dd-select) instead of having it look like the the rest of the actual dropdown menu. So, different font size, decoration, colours, hover effect and, most importantly, no background color. The dropdown menu should of course keep its original look. Could anyone please give me a hint on how to accomplish this (perhaps with a code example or two) in an elegant way or maybe even refine my code to make it work? That would help me out a lot and I would like to thank everyone for reading and trying to help! Kind regards, Jakob Hi there, While this menu works in IE and FF, there's still a little problem with it working perfectly in FF. Basically, it's when you want to mouse over and get the second dropdown option...it only shows part of the button. I'm almost positive this has to do with it not "escaping" the container I have set for the whole design, as the menu option stops right at the border/width of the parent container. For instance, if you go here (with FireFox), and then select from the right side menu: Homes for Sale > Fort Collins, CO > Homestead You'll notice that it only says "Homest" when you want to view the second dropdown option. I need it to show the whole name. I tried setting the z-index higher for these particular classes, but no dice. Is there something I'm missing? Here's the code: Code:
/* Sidebar / Menu */
#sidebar {
float: left;
top: 16px;
left: 2px;
display: block;
position: relative;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color:#FFFFFF;
letter-spacing: 1px;
text-align:right;
z-index: 3;
}
#sidebar ul {
list-style-type: none;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
z-index: 4;
}
#sidebar li {
display: block;
float: left;
min-height: 20px;
position: relative;
text-align: left;
padding: 5px 20px 4px 16px;
margin: 0px 0px 0px 0px;
}
#sidebar h2 {
font-size: 1.2em;
padding: 0;
margin: 0;
}
#sidebar li ul {
width: 150px;
height: auto;
top: 100%;
left: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
letter-spacing: 3px;
}
#sidebar li.LargeMenu ul {
width: 200px;
height: auto;
top: 100%;
left: 0px;
}
#sidebar li ul li {
text-align: left;
width: 118px;
height: auto;
min-height: auto;
display: block;
}
#sidebar li.LargeMenu ul li {
text-align: left;
width: 198px;
height: auto;
min-height: auto;
display: block;
}
#sidebar a {
text-decoration: none;
letter-spacing: 1px;
}
#sidebar li li ul {
top: 0;
left: 0;
}
#sidebar li li:hover ul {
left: 150px;
}
/* initialy hide all sub sidemenus */
#sidebar ul ul,
#sidebar ul li:hover ul ul,
#sidebar ul ul li:hover ul ul,
#sidebar ul ul ul li:hover ul ul,
#sidebar ul ul ul ul li:hover ul ul {
position: absolute;
display:none;
}
/* display them on hover */
#sidebar li:hover ul,
#sidebar ul li:hover ul,
#sidebar ul ul li:hover ul,
#sidebar ul ul ul li:hover ul,
#sidebar ul ul ul ul li:hover ul,
#sidebar ul ul ul ul ul li:hover ul {
display: block;
}
#sidebar #PhpWebcontent {
display:none;
}
/* define the consecutive colors */
#sidebar {
color: #FFFFFF;
}
#sidebar ul{
-moz-opacity: 1; /* for mozilla */
opacity: 1; /* for safari */
khtml-opacity: 1/* for konquerer and older safari */
}
#feeds li {
background: url(images/feed.png) top left no-repeat;
padding-left: 18px;
}
#sidebar h2 {
color: #FFFFFF;
}
#sidebar a {
color: #ffffff;
letter-spacing: 1px;
}
#sidebar ul li:hover {
background: #333333;
z-index: 900;
}
#sidebar ul li ul {
}
#sidebar ul li ul li {
background: #333333;
}
#sidebar ul li ul li:hover {
background: #666666;
}
#sidebar ul li ul ul li{
background: #666666;
}
#sidebar ul li ul ul li:hover {
background: #999999;
}
/* End Sidebar / Menu */
Thanks in advance. I'm trying to create a css only drop-down menu like the ones in html. Here is my code for trying to do so. /* setting dealing with selecting particular guest book entries */ Code: #menuSelectGuestEntries
{
position: relative;
margin-top: 10px;
padding-left: 466px;
}
#menuSelectGuestEntries form
{
color: #000;
font-family: Arial, Helvetica, sans-serif;
font-size: 2.12em;
}
#menuSelectGuestEntries .guestBookPages{
visibility:hidden;
}
#menuSelectGuestEntries .guestBookPages:hover{
visibility:visible;
}
#selectGuestBookEntries {
border: solid 1px grey;
background-color: white;
padding-right; 5px;
width: 70px;
font-size: 13px;
height: 16px;
overflow: auto;
}
#menuSelectGuestEntries ul.guestBookPages {
position: absolute;
color: black;
background-color: white;
font-size: 20px;
top: 1px;
left: 517px;
list-style-type: none;
padding-left:0;
padding-right: 0;
margin-left: 0;
width: 66px;
border: solid 1px grey;
border-top: none;
}
ul.guestBookPages a {
display: block;
text-decoration: none;
width: 70px;
zoom: 1;
}
ul.guestBookPages a:hover {
background-color: #104E8B;
font-weight: bold;
width: 66px;
}
html code
<div id="menuSelectGuestEntries">
<form action="">
Page: <a href=""><</a>
<span name="selectGuestBookEntries" id="selectGuestBookEntries">
1 of 212 <img src="images/dropDownBox.jpg" width="12" height="13"/></span>
<a href="">></a>
<ul class="guestBookPages">
<li><a href="">1 of 212</a></li>
<li><a href="">2 of 212</a></li>
<li><a href="">3 of 212</a></li>
<li><a href="">4 of 212</a></li>
<li><a href="">5 of 212</a></li>
</ul>
</form>
</div>
What I've tried to do is make the form with id Code: #menuSelectGuestEntries relative positioned is it looks like the first option of a drop-down menu. Then what I was hoping for was to have the drop-down list named Code: #menuSelectGuestEntries absolutely positioned so when someone hovered over the span with id Code: selectGuestBookEntries which contains the first entry all the entries in list Code: guestBookPages would become visible. I'm trying to avoid the Javascript methods of doing this if possible, not a big fan. Any ideas of code I could use in the above scenario to make the listing in the id Code: guestBookPages visible using the hover tag somewhere? Any help greatly appreciated. The visibility option is not working at moment, probably incorrect. Hi I am using suckerfish drop down menu without problem on my local server, however, on the remote server them menu won't work when jscript is turned off (when viewed on IE). Do you have any idea why this might be? has anyone had this problem before? (here is the url: (URL address blocked: See forum rules)) thanks a lot Hi... I have a big problem with FireFox, and especially Safari... http://www.laventanaband.com/Music%20Samples.htm When you roll over a pop out menu item (like "music and pics") these problems occur: In FireFox... if you roll past the edge of the frame, the menu item disappears. In Safari... the pop up menu section disappears below the content menu (!). I this doesn't happen on the main page because the content area does not use overflow:auto; .... it uses overflow:hidden; Somehow the use of that cause those problems... Here is my css doc. Any ideas? Thanks in advance! Regards, -Max Dykstra I have this navigation menu I made for my online catalog that is comprised of some 300+ links that display in 3 levels of CSS-controlled menues. A root UL and 2 levels of subULs. It's located here . The menues all work fine except for a small area where the first submenu overlaps the root menu. Illustration . The problem is in mousing from one link in the list in the first submenu to the next link in the same list. (below or above) As the mouse pointer moves between the links, the menu changes to the sublist for the next link in the root menu instead of the next link in the already open submenu. The second level submenu (sub-submenu) doesn't have any problem. Links in the opened submenu can be moved between successfully if the pointer is moved out to an area that isn't shared with the root menu. Making any sense? This is HTML for the basic structu HTML Code: Original - HTML Code <table><tr> <td class="linktd"> <ul class="folderul"> <li class="folderli"> <a class="submenua" href="http://www.mydomain.com">Category</a> <ul class="folderul"> <li class="folderli"> <a class="submenua" href="http://www.mydomain.com">Subcategory</a> <ul class="folderul"> <li class="nonfolderli"><a class="submenua" href="http://www.mydomain.com">Subsubcategory</a> </li> </ul> </li> </ul> </li> </ul> </td> </tr></table> <table><tr> <td class="linktd"> <ul class="folderul"> <li class="folderli"> <a class="submenua" href="http://www.mydomain.com">Category</a> <ul class="folderul"> <li class="folderli"> <a class="submenua" href="http://www.mydomain.com">Subcategory</a> <ul class="folderul"> <li class="nonfolderli"><a class="submenua" href="http://www.mydomain.com">Subsubcategory</a> </li> </ul> </li> </ul> </li> </ul> </td> </tr></table> These are the two CSS lines that are supposed to control the displays. css Code: Original - css Code ul.folderul ul.folderul, li.folderli:hover ul.folderul ul.folderul { display: none } li.folderli:hover ul.folderul, li.folderli:hover li.folderli:hover ul.folderul { display: block }
ul.folderul ul.folderul, li.folderli:hover ul.folderul ul.folderul { display: none }
Maybe my understanding is deficent, but I haven't been able to find the problem and I'm hoping someone of you can point it out for me, please? I'm using the suggestions of those on here and using the http://www.dynamicsitesolutions.com...2/#relatedLinks menu (I'm a little confused over what the differences are but that's the least of my problems) What I want is a 2nd level drop down menu, but I'm clueless on how to go about it..??? 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? :| 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;
}
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]-->
First I am using Dreamweaver MX2004. I am still new to CSS, have not used it much. Still using tables (yeah i know) for the layout. Mainly because when I've tried positioning in the past, IE doesn't display it right. Layers don't seem to work for me! What I'd like to know is: can I use CSS (the son of suckerfish dropdowns) for my drop down menu in a separate HTML file that would be saved as a library item? I'd like the nav separate so I can update it easily. Should I also use a separate CSS file that would only be associated with the nav? Is necessary to have an external css sheet, if it only applys to this nav? The nav would get dropped into a table row under the top banner. My issue is: will it get positioned right ? And will it view ok in IE??? Hope I explained this right. I fear that what I have already coded, would get messed up if I do this! But due to search engine optimization, I'd like to avoid a fully functioning javascript dropdown. If you have a better suggestion/usage for a dropdown horizontal nav, I'd appreciate your ideas! Thanks for the advice! Valerie 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>
|
|||||||