Member Avatar for McLaren

Hello,

The website has horizontal navigation menu, but without submenu. I want to those submenus, but I have no luck.

I try using tutorial to make new menu, and after I will make it, I just edit the style so it look similar to an earlier menu.

So I have this code for now:

#navigation{
margin-left: 15px;
width:100%;
height:30px;
background-color:#999;
}

#navigation ul
{
	margin:0px; padding:0px;
}
#navigation ul li
{
	display:inline; height:30px; float:left; list-style:none;
}
<div id="navigation">
		<ul>
			<li>Menu Item 1</li>
			<li>Menu Item 2</li>
			<li>Menu Item 3</li>
			<li>Menu Item 4</li>
		</ul>
	</div>

The earlier navigation has different id which is called 'nav', so there should not be problems.

I added the picture of how it looks.

But it should already be horizontal, because there is display and float properties.

Where could be the problem with this?

Untitled.jpg 49.73 KB
  • 2 Contributors
  • 5 Replies
  • 117 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by McLaren

Recommended Answers

All 5 Replies

Member Avatar for floatingDivs

Something like this is what you're probably looking for.

<!DOCTYPE html>
<html lang="en">
	<head>
		<style type="text/css">
			ul {							
				height: 30px;
				line-height: 30px;
				margin: 0;
				padding: 0;
			}
			ul li {
				border: 1px solid #444444;
				display: inline;
				float: left;	
				height: auto;
				line-height: 30px;
				margin-right: 18px;
			}
			ul li:first-child {
				
			}
			ul li a {
				border: none;
				display: block;
			}
			ul li a:first-child {
				
			}
			ul li ul {				
				height: auto;
				line-height: normal;
			}
			ul li ul li {
				border: none;
				display: block;
				float: none;
				margin: 0;
				padding: 0;
			}
			ul li ul li a {
				border-top: 1px solid #444444;
				display: block;
				width: 100%;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>
				<a href="#">Menu 1</a>
				<ul>
					<li><a href="#">Submenu 1 Link 1</a></li>
					<li><a href="#">Submenu 1 Link 2</a></li>
					<li><a href="#">Submenu 1 Link 3</a></li>
					<li><a href="#">Submenu 1 Link 4</a></li>
				</ul>
			</li>
			<li>
				<a href="#">Menu 2</a>
				<ul>
					<li><a href="#">Submenu 2 Link 1</a></li>
					<li><a href="#">Submenu 2 Link 2</a></li>
					<li><a href="#">Submenu 2 Link 3</a></li>
					<li><a href="#">Submenu 2 Link 4</a></li>
				</ul>
			</li>
			<li>
				<a href="#">Menu 3</a>
				<ul>
					<li><a href="#">Submenu 3 Link 1</a></li>
					<li><a href="#">Submenu 3 Link 2</a></li>
					<li><a href="#">Submenu 3 Link 3</a></li>
					<li><a href="#">Submenu 3 Link 4</a></li>
				</ul>
			</li>
			<li>
				<a href="#">Menu 4</a>
				<ul>
					<li><a href="#">Submenu 4 Link 1</a></li>
					<li><a href="#">Submenu 4 Link 2</a></li>
					<li><a href="#">Submenu 4 Link 3</a></li>
					<li><a href="#">Submenu 4 Link 4</a></li>
				</ul>
			</li>
		</ul>
		<div style="clear: both;"></div>
	</body>
</html>
Member Avatar for McLaren

I inserted your code and here (added id's to make it different from existing)

<style type="text/css">
			#n ul {							
				height: 30px;
				line-height: 30px;
				margin: 0;
				padding: 0;
			}
			#n ul li {
				border: 1px solid #444444;
				display: inline;
				float: left;	
				height: auto;
				line-height: 30px;
				margin-right: 18px;
			}
			#n ul li:first-child {
				
			}
			#n ul li a {
				border: none;
				display: block;
			}
			#n ul li a:first-child {
				
			}
			#n ul li ul {				
				height: auto;
				line-height: normal;
			}
			#n ul li ul li {
				border: none;
				display: block;
				float: none;
				margin: 0;
				padding: 0;
			}
			#n ul li ul li a {
				border-top: 1px solid #444444;
				display: block;
				width: 100%;
			}
		</style>

and of course made this:

<ul id="n">

and what happens is in another screenshot. Plus I made one screenshot of developer tools - you can see that ul tag does not have the properties of #n. Why could be that?

Untitled.jpg 54.36 KB Untitled2.jpg 38.97 KB
Member Avatar for floatingDivs

The reason your UL isn't receiving CSS is because you're trying to select TWO ULs.

#n ul should be ul#n

Member Avatar for McLaren

I changed the css to this, but it still is something wrong:

ul#n{							
	height: 30px;
	line-height: 30px;
	margin: 0;
	padding: 0;
}
ul#n li {
	border: 1px solid #444444;
	display: inline;
	float: left;	
	height: auto;
	line-height: 30px;
	margin-right: 18px;
}
ul#n li:first-child {
	
}
ul#n  li a {
	border: none;
	display: block;
}
ul#n  li a:first-child {
	
}
ul#n  li ul {				
	height: auto;
	line-height: normal;
}
ul#n li ul li {
	border: none;
	display: block;
	float: none;
	margin: 0;
	padding: 0;
}
ul#n li ul li a {
	border-top: 1px solid #444444;
	display: block;
	width: 100%;
}
Untitled.jpg 37.4 KB
Member Avatar for McLaren

Finally made it :) by this http://www.devinrolsen.com/pure-css-horizontal-menu/ tutorial. But had to make some adjustmenst to code - added z-index property because my main content area of website was hiding the dropdown meniu. Now I will just have to make similar design to original, will see how I succeed :) Thanks for trying to help.

Edit: and earlie I was not succesfull, because in other place I had vertical navigation menu with the same id - navigation :D

Edited by McLaren because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.