CSS - Adding Menu Items Above Last Items, Not Under: Possible And How To?

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

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;
    } 

I'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!

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;}

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

whats the CSS for creating an unordered list that goes across the page rather than down with no bullet points?

I have a floated CSS Horizontal Drop Down Menu, it's centered in my page just fine in firefox, but in IE it's skewed way off to the right side. (Also having problems with the dropdown's not appearing in IE :S) If anyone can help me with IE fixes on either of these problems that would be great. Thank you!

Hi Guys,
I am trying to incorporate a CSS file into an xml document.I have the following problem.

My XML file is:

<!-- example of an list item -->

<?xml-stylesheet type="text/css" href="styledocument.css" ?>

<document>

<employee>
<firstname>peter</firstname>
<lastname>lance</lastname>
</employee>

</document>

My corresponding styledocument css file is :

employee {display:list-item;color:red;}
firstname {display:inline;}
lastname {display:inline;}

---

Output in IE5:

peter lance
-----

The expected output should be peter and lance as list items with bullets preceding them and in red color. But my output is
peter lance in just red color without any bullets.

List-item value of the display attribute is not recognised at all.

Can u help deal with this problem!!!

#leftNav ul
{
margin:0;
padding:0;
list-style-type: none;
}

#leftNav ul li
{
padding:0;
margin:0;
display: block;
text-align: left;
background-color: #000;
border-top: 1px solid #ffffff;
border-left: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
border-right: none;
width:130px;
}

for some reason I am getting black boxes, with the white outlines.. but in between each LI.. i get spaces? how do you control the spacing between li's in a ul?

Hi, I have a list of items, but when one item goes onto the next line, It doesn't align with the text above it. Here is an example. Look at the right hand column, and notice how the list items, when they go into 2 lines, the second line aligns with the bullet point and not the text.

Anyone know how to fix this?

thanks

Hey everyone,

I have a listing of links on my sitemap and there seems to be an issues.

In firefox it's not so bad, it just looks like the bullets are ghosted. But in IE there are blank empty list items.

I don't see anything in the code that can do this but it is kinda strange that it starts where I have &lsaquo; and &rsaquo;. Other than that there is nothing different between the list items.

Any insight is greatly appreciated.

I've tried the popular tricks to figure this out, but don't seem to have the touch.

In IE, the list item is 2px taller than in FF.

page:
URL Removed

CSS:

Code:

.mainNav ul {margin: 0; padding: 0; list-style: none;}
.mainNav ul li {border-top: 1px solid #27466c; border-bottom: 1px solid #021940; background: url('../images/menu_bg.gif') top left repeat-y; display: block;}
.mainNav ul a, .mainNav ul span {display: block; height: 17px; padding-top: 4px; font: 11px Verdana,Sans-Serif; color: #ffffff;}
.mainNav ul a:link, .mainNav ul a:visited {text-decoration: none;}
.mainNav ul a:hover{text-decoration: none; color: #9fb3cb;}
.mainNav ul ul ul a:hover, .mainNav ul ul ul ul a:hover {text-decoration: none; color: #3e5064;}
.mainNav ul ul li {border: 0; background: url('../images/sub_menu_bg.gif') top left repeat; border-top: 1px solid #627996;}
.mainNav ul ul ul li {border: 0; background: url('../images/sub_sub_menu_bg.gif') top left repeat; border-top: 1px solid #627996;}
.mainNav ul ul ul ul li {border: 0; background: url('../images/sub_sub_sub_menu_bg.gif') top left repeat; border-top: 1px solid #627996;}
.unselected, .selected, .empty {display: block; float: left; height: 21px; width: 22px;}
.currentPage {border-right: 4px solid #000530; margin-right: 1px;}

HTML on page (it's quite heavy)

I am not sure how to centre all items on the suckerfish menus:

I thought this would work, but it doesn't and even if it did it won't validate:

<ul id="nav">

<div style="text-align:center;margin-left:auto;margin-right:auto;">

NAV ELEMENTS HERE...

</div>

</ul>

Surely someone has had to centre there suckerfish menu to a fixed width box..or any box for that matter.