|
CSS - Css Dropdown Menu Items Overlapping Eachother
I am creating a dropdown menu based on suckerfish. The top level appears correctly, however the first submenu level puts all the menu items stacked over top of eachother right under the top level. Everything is correct except the items are overlapping. My html and css are below.
<ul id="nav"> <li style="border-left: none;"> <link here> <ul> <li> <link here> <ul> <li> <link here> </li> </ul> <ul> <li> <link here> </li> </ul> </li> </ul> <ul> <li> <link here> <ul> <li> <link here> </li> </ul> </li> </ul> <ul> <li> <link here> </li> </ul> </li> <li> <link here> <ul> <li> <link here> </li> </ul> <ul> <li> <link here> </li> </ul> </li> <li> <link here> </li> <li> <link here> </li> <li> <link here> </li> <li> <link here> </li> </ul> #nav, #nav ul { padding: 0; margin: 0; list-style: none; } #nav a { display: block; } #nav li { float: left; padding: 0px 10px 0px 10px; } #nav li ul { position: absolute; width: 200px; color: #FFF; background-color: #000; left: -999em; } #nav li:hover ul { left: auto; } #nav li:hover ul, #nav li.sfhover ul { left: auto; } #nav li ul ul { margin: -1em 0 0 10em; } #nav, #nav ul { padding: 0; margin: 0; list-style: none; line-height: 1; } #nav li:hover ul ul, #nav li.sfhover ul ul { left: -999em; } #nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul { left: auto; } #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 ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul, #nav li.sfhover ul ul ul ul { left: -999em; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul, #nav li li li li.sfhover ul { left: auto; } My CSS is pulled pretty much straight from suckerfish. there are a few small changes like the widths and background color, but the issue was there even when it was a direct copy. Currently I am only trying to get this to in firefox, as I am getting the same issue in every browser I try. Just an fyi, I am using umbraco as the CMS for this site, and it is generating the html for the menu. There are actual links I just cant post them as I am new here, they contain just the hfer attribute. Thanks Similar TutorialsI've worked out most css problems but I can't find any css that will make the drop down menu on my site sit on top of the YouTube video that you can see he www the-bizness .co. .uk If you click on Home Page or Multimedia the drop-down menu is behind the video clip. Very annoying. Any help appreciated! I have a list that is made sortable via jquery UI's sortable plugin. I have it worked fine in all modern browsers but I get overlapping in IE8 and IE7 is just a mess but I'm less concerned about that. Working Example Click and drag Item 5 up above Item 4 and drop there. You can see the issue. It works initially but I'm not sure why IE8 isn't clearing the float after it is dropped. Maybe it is a javascript issue instead of CSS? We have our magento store with lots of categories, but it looks silly with categories being added under the first row. We'd like to have these added on a row above this, but i am having a hrd time getting this done. Is there an easy way to have category items being added on top in a new row, instead of a new row under the current one? Simply put, instead of this way: 1 2 3 4 5 6 7 8 9 We want it this way: 6 7 8 9 1 2 3 4 5 As you understand this will look much better and not screw with our design;-) Anybody? http://www.yentiming.com/ just play around with the menu on IE7 and you will see what will happen. i have tried messing around with z-index but i have found no success any ideas on how to fix this? http://www.larreamma.com/kids_programs.html On the PC the last 'About Us' menu overlaps the body content when it is expanded. Does not occur on Mac (FF, Safari, Chrome). Tried playing with 'z-index' but if that is the issue then I am not putting it in the right place. Thank you in advance. I'm using The Man in Blue's "footerStickAlt" code to ensure a footer sticks at the bottom of the page even with *short* content. No problem there til I resize my browser window. When the browser window shortened and I scroll down, the footer has jumped up and is concealing part of the menu. Yikes. Pages where the content is longer than the menu are fine, so I haven't uploaded them. It's only when content is shorter than the menu that this issue arises ~ which is the exact issue it's supposed to be tackling! Flaw/s in the code? I've already tried ripping out the horizontal min-widths and it seems there's no conflict there. From what I can make out, it's just a matter between the menu and the footer.... altho, when the browser is shortened in the way I've described the actual footer moves higher than it should be. Still, can't believe it's blueman at fault here. Must be something I've missed or tagged wrong. Or maybe it just doesn't work with this kind of menu? For reference, Blue Man's original code is he http://themaninblue.com/writing/perspective/2005/08/29/ Am just hoping the clever folk here will have some advice. I've burnt the whole day on this to no avail :| Hi, Can somebody tell me why the menu on the url below needs so much space between menu items? (between the home, browses, forms, pages). Maybe a margin / padding problem, but I cannot seem to find it. The URL: http://www.genwise.com/temp/ordersbrowse.aspx.htm Thank you! -- Fizgig2 I'm using a menu from CSSPlay, and I have it working. http://www.wattersisere.co.uk/devshed It also works for browsers with 800x600 screens. However, as you can see the menu items on the top bar are close together (2 * 11px). I am wanting to increase the spacing between them depending on the browser size. Maybe a % would be appropriate, any other ideas would be super. Alternatively, I could increase the spacing between them to an aesthetically pleasing size and then force the smaller browsers to have a horizontal scrollbar. What would I have to make this work, or would you not recommend it? Thanks, Watters Hey all, Here's the site in question. It validates, and more or less displays how i want it in FF. Thing is, is that in IE it displays the menu button images in reverse order...i have NO idea why it's doing this. It's based off the alistapart menu, that i've used numerous times without problems. Here's the HTML; Code:
<ul id="nav">
<li><a href="index.php"><img src="images/home_button.gif" alt="Home button image"></a></li>
<li><a href="about.php"><img src="images/about_button.gif" alt="About Freedom Boat Sales button image"></a></li>
<li><a href="#"><img src="images/inventory_button.gif" alt="Product inventory button image"></a>
<ul>
<li><a href="newproducts.php" class="menutext">new</a></li>
<li><a href="preownedproducts.php" class="menutext">pre-owned</a></li>
</ul>
</li>
<li><a href="#"><img src="images/requests_button.gif" alt="Request button image"></a>
<ul>
<li><a href="requests.php?item=products" class="menutext">products</a></li>
<li><a href="requests.php?item=pricing" class="menutext">pricing</a></li>
<li><a href="requests.php?item=brochure" class="menutext">brochure</a></li>
</ul>
</li>
<li><a href="contact.php"><img src="images/contact_button.gif" alt="Contact button image"></a></li>
</ul>
Here's the CSS; Code:
#menuposition {
width:730px;
height:30px;
position:relative;
margin:auto;
z-index:10;
}
ul#nav {
list-style: none;
height:30px;
width:730px;
}
ul li {
float:left;
height:30px;
width:146px;
position: relative;
}
li ul {
position: absolute;
top:30px;
display: none;
list-style:none;
}
ul li a {
display: block;
text-decoration:none;
text-align:left;
font:10px verdana, arial, sans-serif;
}
li:hover ul, li.over ul {
display: block;
margin-left:20px;
margin-top:-1px;
width:118px;
background-color:#E7E7E7;
border-top:2px solid #666;
border-left:1px solid #CCC;
border-right:1px solid #CCC;
border-bottom:1px solid #CCC;
}
.menutext {
width:118px;
height:30px;
}
a.menutext {
color:#255CB8;
text-decoration:none;
}
a.menutext:hover {
color:red;
text-decoration:none;
background-color:#DCDCDC;
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: right; }
* html ul li a { height: 1%; }
/* End */
Also, any thoughts on why the blue background won't extend the full screen height in FF? Thanks! When I view my web pages with IE6 or resize the window the footer items fall start falling out of place. Link: website CSS Link: CSS Code Hello, I'm new to this site which is really interesting, I hope a nice soul will be able to help me... I've tried to solve this but I can not find the solution. my site is here, the code are too long to post here. I hope the moderator will understand. moureau . me / pro.xml moureau . me / site.css The products menu has a problem... As you can see. If I use display-block or -inline-block the result is different but never ok. If I use Inline-Block, all the drop down menu items have the width(+padding) of the father menu except the last line which is longer without the right padding also, text and background. If I use Block, all the drop down menu items have the width(+padding) of the father menu but the last line goes out of the menu only during an hover and just the text, not the black transparent background which has the same length as other drop down menu items... What should I add to solve that ? I would like the menu to be large enough to show all the items. I'm using ImpressPages.org CMS that's why I can not use another layout for these menus. Thanks a lot. test link: users.tpg.com.au/tetsuo/CSS_help/index.html Hi guys, Im really new to CSS, and doing a bit of crammed-study on it. I finally found a fix that worked on css list navigation that i could use that'll work in IE but i cant seem to center each menu item to each respective rollover image (the BG gifs). Some help on this would be greatly appreciated, i cant seem to find anything to fix this. I've tried several solutions (which is probably why my css might look like a huge mess). the css file is he users.tpg.com.au/tetsuo/CSS_help/awis.html hi, Im making a menu that looks like: link1 link2 link3 link4 and then wen you hover over link a dropdown may appear i have the problem that when they appear, they lay on top of each other. ANy idea how to make they display under each other. (it doesnt even work in IE at the mo, but i gues ill laft2 sort that later) thanks this is the html: PHP Code: <ul> <li><a href="index.php?action=home">home</a></li> <li><a href="index.php?action=whatnew">what's new</a></li> <li><a href="index.php?action=offers">special offers</a></li> <li><a href="#">collections</a> <ul><a href="#">drop1</a></ul> <ul><a href="#">drop2</a></ul> <!--when looping thru categories, do a WHERE cat_status >= 2--> </li> <li><a href="index.php?action=sBask">shopping basket</a></li> <li><a href="index.php?action=contact">contact us</a></li> </ul> this is the relevant css: PHP Code: #nav ul li { position: relative; margin: 0; padding: 0 10px 0 10px; list-style: none; display: inline; } #nav ul li ul { position: absolute; display: none; } #nav ul li:hover ul { display: block; left: 0; top: 10px; } #nav ul li:hover ul li { height: 20px; } Good morning I can't seem to get the footer menu on my site (philipus.com) appear like I want it (it's Stu Nicholl's Skeleton Up menu). These are the problems. 1. The menu items (Start, Galleries etc) are all pushed to the left. I tried text-align: center in the #nav, li and ul but it doesn't work. How can I center them? 2. A border is defined in #nav ul which makes it appear also around the Galleries and Wallpapers pop-up menus. How can I ensure that it only appears around the pop-up menus? 3. The pop-up menu above the Galleries link isn't centered, but the pop-up above the Wallpapers links seems to be. Why is this and how can I ensure both are centered? 4. In IE, the pop-up menu items move to the left when the cursor hovers over them. How do I prevent this? 5. How can I make the pop-up menus a little bit "sticky", such that they allow you to slowly move the cursor up to them? Currently one has to move the cursor quickly to the pop-up menu otherwise it disappears. Does this have to do with the pop-up menus not overlapping a few pixels with the main menu? 6. I noticed when placing the menu in the middle of the page that the copyright text below the menu moved to the right. How can I ensure that the copyright text isn't affected by the menu? Thanks immensely for your help. The menu's stylesheet is below. /p Code: #nav,
#nav ul {padding:0 0 5px 0; margin:0; list-style:none; font: 10px verdana, sans-serif; border:1px solid #000; border-color:#ace #79b #68a #bde; border-width:1px 2px 2px 1px; background:#fff; position:relative; z-index:200;}
#nav {height:25px; padding:0;}
#nav li {float:left;}
#nav li li {float:none; background:#fff;}
/* a hack for IE5.x and IE6 */
* html #nav li li {float:left;}
#nav li a {display:block; float:left; color:#888; margin:0 25px 0 10px; height:25px; line-height:25px; text-decoration:none; white-space:nowrap;}
#nav li li a {height:20px; line-height:20px; float:none;}
#nav li:hover {position:relative; z-index:300;}
#nav li:hover ul {left:0; bottom:21px; top:auto;}
/* another hack for IE5.5 and IE6 */
* html #nav li:hover ul {left:10px;}
#nav ul {position:absolute; left:-9999px; top:-9999px;}
/* yet another hack for IE5.x and IE6 */
* html #nav ul {width:1px;}
/* it could have been this simple if all browsers understood */
/* show next level */
#nav li:hover li:hover > ul {left:-15px; margin-left:100%; bottom:-7px; top:auto;}
/* keep further levels hidden */
#nav li:hover > ul ul {position:absolute; left:-9999px; top:-9999px; width:auto;}
/* show path followed */
#nav li:hover > a {text-decoration:underline; color:#57b;}
/* but IE5.x and IE6 need this lot to style the flyouts and path followed */
/* show next level */
#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:-15px; margin-left:100%; bottom:-7px; top:auto;}
/* keep further levels hidden */
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px;}
/* show path followed */
#nav li:hover a,
#nav li:hover li:hover a,
#nav li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover li:hover li:hover a
{text-decoration:underline; color:#57b;}
/* hide futher possible paths */
#nav li:hover li a,
#nav li:hover li:hover li a,
#nav li:hover li:hover li:hover li a,
#nav li:hover li:hover li:hover li:hover li a,
#nav li:hover li:hover li:hover li:hover li:hover li a
{text-decoration:none; color:#888;}
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..??? Something for the css pros: Can anybody give me a hint on how to convert the following (table) based markup snippet to div-only markup? http://www.twosailors.net/test.html In all my tests I cannot get the rightmost cell expand so the whole menu gets it's total size. I do NOT want to convert the boxes to fixed width but keep them shrinkwrapping around the menu texts. Also, I do want a border around the boxes so any faking with background colors will not work either. Any ideas? Andreas Pardeike 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;
}
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 |
|||||||