CSS - Help Position Li Nav Lists

Hi everyone. I'm looking for some help rendering a list using css. Basically I have a list in this format:

Code:

<ul>
  <li>shirts</li>
  <li>jackets
    <ul>
      <li>casual jackets</li>
      <li>formal jackets</li>
    </ul>
  </li>
  <li>suits</li>
</ul>

And I would like to render it something like:

Code:

shirts jackets > casual jackets formal jackets suits

All the text needs to be floated left so it will wrap to the next line.

I'm able to float the top level list items correctly i.e. "shirts jackets suits" using:

Code:

<ul id="menu">
	<li>shirts</li>
	<li>jackets</li>
	<li>suits</li>
</ul>

#menu, #menu ul {
	list-style:none;
}

#menu li {
	float: left;
	width:5em;
}

the problem I have is getting the nested lists to appear alongside the parent items instead of below. When I add the nested lists I see something like:

Code:

shirts        jackets        suits
                  casual jackets
                  formal jackets

Maybe this just isn't possible but if anyone could help me I'd sure appreciate it!

Thanks!

Toby

i am trying to get the list to show over two lines like so (using _ as multiple spaces get turned on to one)

how do i get both centered.

_____item1____item2____item3
item4____item5____item6____item7



Code:

<div class="homebodytext">
	<ul>
	  <li class="homebodylifloat">item1</li>
	  <li class="homebodylifloat">item2</li>
	  <li class="homebodylifloat">item3</li><br style="clear: both;"><br>
	  <li class="homebodylifloat">item4</li>
	  <li class="homebodylifloat">item5</li>
	  <li class="homebodylifloat">item6</li>
	  <li class="homebodylifloat">item7</li><br style="clear: both;">
	</ul>
</div>

Code:

.homebodytext { border: 0px solid #0000;
text-align: center;
width: 900px;
padding-left: 20px;
font-weight:bold;
}

.homebodylifloat {
float: left;
width: 220px;
}

Hi, I have a list item that extends onto a second line. How do I keep the second line the indented more than the first line?

thanks
-S

Hey i am trying to create a navigation bar that uses hover lists so that there are a number of links and when these are hovered over, the provide links which are under this section. I have sourced code and used this and it all works apart from that the hovered options are about 0.8cm apart and the first is over the top of the original list, which still needs to be seen.

The code for the CSS is below;
#navmenu{
width: 100%;
float: left;
background: #900;
height: 100%;
}
#navmenu ul{
list-style: none;
margin: 0;
padding: 0;
width: 120px;
float: left;
}
#navmenu li{
margin: 3px 0px 3px 0px;
padding: 3px 0px 3px 0px;
display: inline
}
#navmenu a{
font: bold 15px Calibri;
display: block;
border-width:1px;
border-style:solid;
border-color:#F90;
margin: 0;
padding: 2px 3px;
color: #FC0;
background: #900;
text-decoration:none;
}
#navmenu a:hover{
color:#FFF;
background:#C30;
}
#navmenu li {
position:relative;
}

#navmenu ul ul {
position:absolute;
top: 0;
left: 100%;
}
div#navmenu ul ul{
display: none;
}
div#navmenu ul li:hover ul
{display: block;}
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

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

body {
behavior: url(csshover.htc);
}

[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-size: 100%;
}

#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;}

#menu a {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
}
</style>
<![endif]

and the code for the section of the webpage (btw it is linked in the header)

<div id="navmenu">
<ul>
<li><a href="index.html" title="Home">Home</a></li>
</ul>
<ul>
<li><a href="products.html" title="Products">Products</a>
<ul>
<li><a href="rubber.html" title="Rubber">Rubber</a></li>
<li><a href="struts.html" title="Struts">Struts</a></li>
<li><a href="hardware.html" title="Hardware">Hardware</a></li>
</ul>
</li>
</ul>
</div>

Thanks help would be appreciated.

Hello! I've got a funky IE issue. I'm using IE9 with the compatibility view turned on for this one website. I've got a <ul> lists with hover states. It's acting odd. If I drag my mouse down from the top of the link, the hover state triggers. If I come from the bottom of the link, it doesn't. Do you think this has to do with a transparent PNG? Really appreciate any words of wisdom on this subject.

Hi,

I have a simple question. Is it possible to display and hide a list if i click on a link using CSS? I'm not looking to change pages or anything. I know it can be done using Javascript but I would rather not use it.

I've done a few searches for hiding lists in CSS but to no avail.

Thanks,

hello guys !!!

i am using list in a website. i am using list-style-image property to set the image for lists, like

Code:

list-style-image:url(img/bluestar.png);

problem is that the spacing between two list items is too much, how to reduce that ???

Hey guys

I just coded this list which has sub entries in it as well. It looks fine and works great in FireFox. However, when viewed in IE7 something is different. I am not sure if it isn't the normality, I just know it isn't what I want. I've attached and image of what the problem is, left side is IE and right side is FF.

The code I'm using is simply Code:

<ul>
   <li>Main</li>
   <ul>
      <li>Sub</li>
   </ul>
</ul>

Thanks

To make this easier on everyone, I've turned my idea into an image, so please see the image I attached.

I'm absolutely horrible with CSS, so I just need some help with converting that image into CSS/HTML. I'm hoping to have each box an unordered list, so they are still organized nicely even if someone has CSS disabled.

Thanks.

Question? Okay I know IE for some reason defaults with a left-padding or something for an unordered list. so when I set padding:0 for my unordered list everything is great in firefox. But when I look at it in IE the list-style elements are pulled off of the list object. How can I place no padding on the list and still use the list-symbols in IE?

The thought of placing my own list object in the background, but it would be silly if I could just use the disc built into windows ie.

thanks!

Hi,

I'm trying to build a simple menu for a layout in XHTML/CSS. I was thinking about having a list and then giving it a style, such as:

Code:

<ul class="menu">
<li id="menu_home">Home</li>
<li id="menu_about">About Us</li>
<li id="menu_contact">Contact Us</li>
</ul>

But then I would like the CSS to display the "li" items horizontally rather than vertically, and without bullets. Also, having the "Home", "About Us", etc, text replaced with images (CSS). Can this be done? I would really appreciate any guidance with this or any other ideas.

Thanks,
Ralph

On my website, the left nav. bar is made using a list.

The list has a border round top, bottom, right & left, and has a blue hover colour.

The list however, does not display tight up against each other, and takes a line between each list item.

I'd like it to be right above and below one another rather than a gap in between.

You can view the list on the site, HERE.

The CSS for the nav. bar is:

Code:

/*-----LEFT MENU-----*/
#leftcontent {
	width: 120px; 
}

#leftcontent ul {
	margin-left: 8px;
	padding-left: 0;
	list-style-type: none;
	font-family: Arial, Helvetica, sans-serif;
}

#leftcontent a {
	padding: 0px;
	padding-left: 2px;
	padding-top: 1px;
	padding-bottom: 1px;
	background-color: #fff;
	border: 1px solid #ccc;
	text-decoration: none;
	display:block;
}

#leftcontent img {
	display:inline;
	padding:0;
	border:0;
	margin:0;
}

#leftcontent a:link, #navlist {
	color: #000;
	text-decoration: none;
}

#leftcontent a:visited {
	color: #000;
}

#leftcontent a {
		color:	#000000;
}

#leftcontent a:hover {
	background-color: #369;
	display:block;
	color: #fff;
}

#leftcontent img a:hover{
	display:inline;
	padding:0;
	border:0;
	margin:0;
}
/*----END LEFT MENU----*/

Note: The img hover, bg colour etc. is so it does not use the same properties as when I open the page up in my content management system it uses small icons, which would use the list properties if I did not define it as an image. Please just ignore it.

Cheers.

http://jordanmeeter.com/new/links.php

If you view that page in Firefox, it displays how it is supposed to. But if you view the page in Internet Explorer, you can see that it is severely ****ed up!

Any suggestions?

Thanks,
Jordan

Okay, my problem deals with FireFox and Internet Explorer. If you view my links page (http://jordanmeeter.com/?page=links) in Internet Explorer, everything displays correctly. However, if you look at it in FireFox, none of the CSS works. In my CSS, I put:

Code:

.noindent {
	margin-left: 0px;
	list-style-type: none;
	}

Why doesn't that work in FireFox?

Thanks in advance. =)