• Locked
1 reply [Last post]
Thu, 2010-08-26 01:45
bubonic
bubonic's picture
User offline. Last seen 1 year 38 weeks ago. Offline
newbie
Timezone: GMT-4
Joined: 2010-08-26
Posts: 1
Points: 2

Hi I'm trying to build a simple website to host my Java game. I have a decent amount of Java/OOP development experience but am very weak when it comes to anything web-related.

I know that the modern standard is to make horizontal navigation menus using unordered lists (ul tags) combined with CSS. I've read several tutorials but none of them seem to be working for me. I'm using FF 3.6 over Windows XP (not that the OS really makes a difference, or so I think).

I'm trying to create a horizontal menu that has drop-down submenus. Both the menu tabs as well as individual items on each of their submenu are links that bring you to a different page.

Here is my HTML:

<ul id="tabs">
    <li>Menu Tab #1</li>
    <ul>
        <li>Submenu Item #1</li>
        <li>Submenu Item #2</li>
    </ul>
 
    <li>Menu Tab #2</li>
    <ul>
        <li>Submenu Item #1</li>
        <li>Submenu Item #2</li>
    </ul>
</ul>

Here is my CSS:

ul#tabs
{
	margin: 0;
	padding: 0;
	list-style: none;
	width: 150px;
}
 
ul#tabs li 
{
	position: relative;
	list-style-type: none;
	display: inline;
}
 
li ul 
{
	position: absolute;
	left: 149px;
	top: 0;
	display: none;
}

Despite specifying my lists to be "inline" and to have no list-style, what I'm getting is just an indented set of links, but they are still vertical, like lists are set to do by default.

My menu tabs ("ul#tabs") are in line with the left border of the page, underneath one another, and each of their submenus are simply indented underneath each respective menu tab, like you would normally get when you put a list inside of another list.

Can anybody see anything wrong with my CSS? My HTML? Thanks!

Top
Tags:
Thu, 2010-08-26 02:01
#1
Tyssen
Tyssen's picture
User offline. Last seen 1 day 21 hours ago. Offline
rank Moderator
Moderator
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8140
Points: 1322

Try this instead: <!DOCTYPE

Try this instead:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Dropdown test</title>
	<style type="text/css">
		#tabs, #tabs ul
		{
			margin: 0;
			padding: 0;
			list-style: none;
			width: 180px;
		}
 
		#tabs li 
		{
			position: relative;
			display: inline;
		}
 
		#tabs li ul
		{
			position: absolute;
			left: 0;
			top: 1em;
			display: none;
		}
 
		#tabs li:hover ul { display:block }
	</style>
</head>
<body>
	<ul id="tabs">
	    <li>Menu Tab #1
		    <ul>
		        <li>Submenu Item #1</li>
		        <li>Submenu Item #2</li>
		    </ul>
		</li>
	    <li>Menu Tab #2
		    <ul>
		        <li>Submenu Item #1</li>
		        <li>Submenu Item #2</li>
		    </ul>
		</li>
	</ul>
</body>
</html>

Note that in the code you posted, your HTML was invalid because you had the closing </li> tag in the wrong place.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Top
  • Locked