Skip to content
View in the app

A better way to browse. Learn more.
Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

nav help

dpuk44
in Website Design and UX

Featured Replies

hi all, im in the process of creating a pure css drop down nav bar and am getting all confused with ul, li, ul li, ul li ul, etc etc. I have a horizontal nav and want the dropdwon items to also display horizontal. how can this be done?

 

<html>

<head>
<title></title>

<style>

body {
padding: 100px 0 0 0;
}

conatiner {
position: relative;
}

#navbar {
width: 1600px;
height: 46px;
border: solid 1px blue;
background:url('darkheader.png');
}

#navwrapper {
width: auto;
height: 100px;
border: solid 1px yellow;
position: absolute;
top: 120px;
left: 250px;
}

#nav {
margin: 0;
padding: 0;
}

/* all unordered list style */
#nav ul {
margin: 0;
padding: 0;
}

/* all list items style */
#nav li {
margin: 0;
padding: 0;
list-style: none;
float: left;
position: relative;
width: 200px;
border: solid 1px green;
}

#nav ul li a {
text-align: center;
font-family: "Comic Sans MS", cursive;
text-decoration: none;
height: 30px;
display: block;
color: black;
}

#nav ul ul {
position: absolute;
top: 30px;
visibility: hidden;
}

#nav ul ul li a {
text-align: center;
font-family: "Comic Sans MS", cursive;
text-decoration: none;
height: 30px;
display: block;
color: red;
}

#nav ul li:hover ul {
visibility: visible;
}
</style>

</head>


<body>

<div id="container">

<div id="navbar">

<div id="navwrapper">

	<div id="nav">
	<ul>
	<li><a href="aboutus.php">ABOUT US</a>
		<ul>
		<li><a href="aboutus.php">Company</a></li>
		<li><a href="team.php">Team</a></li>
		<li><a href="careers.php">Careers</a></li>
		</ul>
	</li>

	<li><a href="ourwork.php">OUR WORK</a>
		<ul>
		<li><a href="ourwork.php">Portfolio</a></li>
		<li><a href="upcoming.php">Upcoming</a></li>
		</ul>
	</li>

	<li><a href="blog.php">WHATS NEW</a>
		<ul>
		<li><a href="blog.php">Blog</a></li>
		</ul>
	</li>

	<li><a href="products.php">PRODUCTS</a>
		<ul>
		<li><a href="products.php">Websites</a></li>
		<li><a href="addons.php">Add Ons</a></li>
		</ul>
	</li>

	<li><a href="contact.php">CONTACT</a></li>
	</ul>  
	</div>

</div>

</div>

</div>

</body>

</html>

  • Author

ok so iv now got this, but how do i get the sub1 menu to align horizontaly? also how do i get this to work in IE?

 

<html>

<head>
<title></title>

<style>

* {
margin: 0;
padding: 0;
}

body {
padding: 100px 0 0 0;
}

container {
position: relative;
}

#navbar {
width: 1600px;
height: 46px;
background:url('darkheader.png');
}

#navwrapper {
width: auto;
height: auto;
border: solid 1px yellow;
position: absolute;
top: 100px;
left: 250px;
}

ul#nav, .sub1 {
list-style: none;
}

ul#nav li{
outline: solid 1px red;
width: 150px;
text-align: center;
position: relative;
float: left;
margin-right: 5px;
}

ul#nav a{
text-decoration: none;
display: block;
width: 150px;
height: 45px;
line-height: 45px;
border: 1px solid #ccc;
}

ul#nav .sub1 li {
border: solid 1px green;
}

ul#nav .sub1 a {
color: green;
}

ul#nav li:hover > a{
background: #a22c1f;
}

ul#nav ul.sub1 {
visibility: hidden;
position: absolute;
float: left;
}

ul#nav li:hover .sub1 {
visibility: visible;
}

</style>

</head>


<body>

<div id="container">

<div id="navbar"></div>

<div id="navwrapper">

	<ul id="nav">
	<li><a href="aboutus.php">ABOUT US</a>
		<ul class="sub1">
		<li><a href="aboutus.php">Company</a></li>
		<li><a href="team.php">Team</a></li>
		<li><a href="careers.php">Careers</a></li>
		</ul>
	</li>

	<li><a href="ourwork.php">OUR WORK</a>
		<ul class="sub1">
		<li><a href="ourwork.php">Portfolio</a></li>
		<li><a href="upcoming.php">Upcoming</a></li>
		</ul>
	</li>

	<li><a href="blog.php">WHATS NEW</a>
		<ul class="sub1">
		<li><a href="blog.php">Blog</a></li>
		</ul>
	</li>

	<li><a href="products.php">PRODUCTS</a>
		<ul class="sub1">
		<li><a href="products.php">Websites</a></li>
		<li><a href="addons.php">Add Ons</a></li>
		</ul>
	</li>

	<li><a href="contact.php">CONTACT</a></li>
	</ul>  

</div>	
</div>

</body>

</html>

Edit like this:-

#nav ul ul {
position: absolute;  
top: 30px;  width: 276px;
visibility: hidden;
}
#nav ul li li {
float: left; width: 90px;
} /*new style added to bottom of nav styles in head section style tag*/

This works in Firefox but you need to add a doctype to get it to work in IE. Add this right at the top of your code, before the <html> tag:-

<!doctype html>

The 276px width is the width of three sub-level li tags plus borders (and padding and margins if you have them).

 

If you have any more problems, consider a menu like this and edit it:-

http://www.cssplay.co.uk/menus/dd_valid_2.html'>http://www.cssplay.co.uk/menus/dd_valid_2.html

or one of the other dropline menus on http://www.cssplay.co.uk/menus/

Edited by Wickham

  • Author

can someone please explain why the sub menus arnt lineing up horizontal. I dont get it?

 

<!doctype html>
<html lang="en">

<head>
<title></title>

<style>

* {
margin: 0;
padding: 0;
}

body {
padding: 100px 0 0 0;
}

container {
position: relative;
}

#navbar_background {
width: 1600px;
height: 46px;
background:url('darkheader.png');
}

#navwrapper {
width: auto;
height: auto;
border: solid 1px yellow;
position: absolute;
top: 104px;
left: 250px;
}

#nav {
margin: 0;
padding: 0;
}

#nav ul {
margin: 0;
padding: 0;
line-height: 35px;
}

#nav li {
margin: 0;
padding: 0;
list-style: none;
float: left;
position: relative;
}

#nav ul li a {
font-size: 18px;
font-family: 'Droid Sans', sans-serif;
text-align: center;
border: solid 1px red;
height: 35px;
width: 125px;
display: block;
color: #fff;
text-decoration: none;
}

#nav ul ul {
position: absolute;
visibility: hidden;
top: 35px;
}

#nav ul li:hover ul{
visibility: visible;
}

#nav ul li li {
float: left;
width: 125px;	
}

</style>

</head>


<body>

<div id="container">

<div id="navbar_background"></div>

<div id="navwrapper">

<div id="nav">

	<ul>
	<li><a href="aboutus.php">ABOUT US</a>
		<ul>
		<li><a href="aboutus.php">Company</a></li>
		<li><a href="team.php">Team</a></li>
		<li><a href="careers.php">Careers</a></li>
		</ul>
	</li>

	<li><a href="ourwork.php">OUR WORK</a>
		<ul>
		<li><a href="ourwork.php">Portfolio</a></li>
		<li><a href="upcoming.php">Upcoming</a></li>
		</ul>
	</li>

	<li><a href="blog.php">WHATS NEW</a>
		<ul>
		<li><a href="blog.php">Blog</a></li>
		</ul>
	</li>

	<li><a href="products.php">PRODUCTS</a>
		<ul>
		<li><a href="products.php">Websites</a></li>
		<li><a href="addons.php">Add Ons</a></li>
		</ul>
	</li>

	<li><a href="contact.php">CONTACT</a></li>
	</ul>  
</div>	
</div>	
</div>

</body>

</html>

You've changed a lot of styles since the first post, which worked for me with my edits. Use the cssplay menu and edit that as your first and latest styles won't work properly, there's too much wrong.

Create an account or sign in to comment
Go to topic listing

Account

Navigation

Search

Search

Configure browser push notifications
Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.