I want to program a dropdown-menu. The code I am using is only css and I use flexbox to make the drop-down-menu.
However, my problem is to position my sub-menus that they are directly under my main menu. How can I do that?
I've looked for an answer but I didn't found a thread, that describes exactly my problem.
Dropdown menu overlapping it's container inside flexbox
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: Arial, sans-serif;
font-size: 62.5%;
}
* {
box-sizing: border-box;
}
.content {
margin: 0 15%;
}
/* ########################################################################## */
/* Dropdownmenu */
/* ########################################################################## */
nav {
background-color: #F0F0F0;
font-size: 1.8rem;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav a {
text-decoration: none;
color: #666;
}
nav ul {
display: flex;
}
nav>ul li {
padding: 10px;
}
nav>ul>li>ul {
position: absolute;
display: flex;
flex-direction: column;
}
nav ul li ul li {
display: none;
}
.align-menu-right {
margin-left: auto;
}
.active {
background-color: #999;
}
.current-menu>a {
color: #E95D0F;
}
nav>ul>li:hover ul>li {
display: block;
}
nav>ul>li:hover,
nav>ul>li>ul li:hover {
background-color: #CCC;
}
nav>ul>li:hover>a,
nav>ul>li>ul li:hover>a {
color: #FFF;
}
.current-menu:hover>a {
color: #E95D0F;
}
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Dropdownmenü</title>
<link rel="stylesheet" type="text/css" href="src/css/styles.css">
</head>
<body>
<div class="content">
<!-- ########################################################################## -->
<!-- Dropdownmenu -->
<!-- ########################################################################## -->
<div class="nav-container">
<nav>
<ul class="flex-container">
<li class="current-menu">Menü 1
<ul>
<li class="current-menu">Untermenü 1-1</li>
<li>Untermenü 1-2</li>
<li>Untermenü 1-3</li>
</ul>
</li>
<li>Menü 2
<ul>
<li>Untermenü 2-1</li>
<li>Untermenü 2-2</li>
<li>Untermenü 2-3</li>
</ul>
</li>
<li class="align-menu-right">Menü 3
<ul>
<li>Untermenü 3-1</li>
<li>Untermenü 3-2</li>
<li>Untermenü 3-3</li>
</ul>
</li>
<li>Menü 4
<ul>
<li>Untermenü 4-1</li>
<li>Untermenü 4-2</li>
<li>Untermenü 4-3</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</body>
</html>
Your problem is setting padding:10px for all <ul> and <li>.
nav > ul li{
padding: 10px;
}
Try to separate them with different classes then do the styling. In my example below, I've added .li-padding class in order to style differently.
html, body{
margin: 0;
padding: 0;
width: 100%;
height:100%;
font-family: Arial, sans-serif;
font-size: 62.5%;
}
*{
box-sizing: border-box;
}
.content{
margin: 0 15%;
}
/* ########################################################################## */
/* Dropdownmenu */
/* ########################################################################## */
nav{
background-color: #F0F0F0;
font-size: 1.8rem;
}
nav ul{
list-style: none;
margin: 0;
padding: 0;
}
nav a{
text-decoration: none;
color: #666;
}
nav ul{
display: flex;
}
nav > ul{
padding: 10px;
}
.li-padding{
padding-right:10px
}
nav > ul > li > ul{
position: absolute;
display: flex;
flex-direction: column;
}
nav ul li ul li{
padding-top: 10px;
display: none;
}
.align-menu-right{
margin-left: auto;
}
.active{
background-color: #999;
}
.current-menu > a{
color:#E95D0F;
}
nav > ul >li:hover ul > li{
display: block;
}
nav > ul > li:hover, nav > ul > li > ul li:hover{
background-color: #CCC;
}
nav > ul > li:hover > a, nav > ul > li > ul li:hover > a{
color: #FFF;
}
.current-menu:hover > a{
color:#E95D0F;
}
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Dropdownmenü</title>
<link rel="stylesheet" type="text/css" href="src/css/styles.css">
</head>
<body>
<div class="content">
<!-- ########################################################################## -->
<!-- Dropdownmenu -->
<!-- ########################################################################## -->
<div class="nav-container">
<nav>
<ul class="flex-container">
<li class="current-menu li-padding"><a href="#" >Menü 1</a>
<ul>
<li class="current-menu">Untermenü 1-1</li>
<li>Untermenü 1-2</li>
<li>Untermenü 1-3</li>
</ul>
</li>
<li>Menü 2
<ul>
<li>Untermenü 2-1</li>
<li>Untermenü 2-2</li>
<li>Untermenü 2-3</li>
</ul>
</li>
<li class="align-menu-right li-padding">Menü 3
<ul>
<li>Untermenü 3-1</li>
<li>Untermenü 3-2</li>
<li>Untermenü 3-3</li>
</ul>
</li>
<li>Menü 4
<ul>
<li>Untermenü 4-1</li>
<li>Untermenü 4-2</li>
<li>Untermenü 4-3</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</body>
</html>
Related
I am building a website for a non-profit company an d I need a dropdown menu in it.
I found this tut on youtube
"https://www.youtube.com/watch?v=wHFflWvii3M"
As far as I can see Iḿ doing everything just as is is supposed to be done. But somehow the menu will not react as in dropdown.
What is going wrong?
Here is a copy of my html
<!DOCTYPE html>
<html>
<head>
<title>dropdown </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="menu-bar">
<ul>
<li class="active"><a href="#">Home<a></li>
<div class="sub-menu-1">
<ul>
<li>sub1</li>
<li>sub2</li>
<li>sub3</li>
<li>sub4</li>
<li>sub5</li>
<li>sub6</li>
<li>sub7</li>
</ul>
</div>
<li>Nieuws</li>
<li>de Klomp</li>
<li>de Werkplaats</li>
<li>Activiteiten</li>
<li>Agenda</li>
<li>Archief</li>
<li>Contact</li>
</ul>
</div>
</body>
</body>
</html>
And here of my css code//
*
{
padding: 0;
margin: 0;
}
body
{
background-image: url(deKlomp.jpg);
background-size: cover;
background-attachment: fixed;
box-sizing: border-box;
font-family: sans-serif;
}
.menu-bar
{
background: rgb(0,100,0);
text-align: center;
}
.menu-bar ul
{
display: inline-flex;
list-style: none;
color:#fff
}
.menu-bar ul li
{
widows: 120px;
margin: 15px;
padding: 12px;
}
.menu-bar ul li a
{
text-decoration: none;
color:#fff;
}
.active, .menu-bar ul li:hover
{
background: #2bab0b;
border-radius:3px;
}
.menu-bar .fa
{
margin-right: 8px;
}
.sub-menu-1
{
display:none;
}
.menu-bar ul li:hover .sub-menu-1
{
display: block;
position: absolute;
background: rgb(0,100,0);
margin-top: 15px;
margin-left: -15px;
}
Your code its not exactly same like on this video tutorial ;)
First: you have /body twice
Second: "li" closing should be after you sub-menu div, not after
<li class="active"><a href="#">Home<a>
All here:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<title>dropdown </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="menu-bar">
<ul>
<li class="active"><a href="#">Home<a>
<div class="sub-menu-1">
<ul>
<li>sub1</li>
<li>sub2</li>
<li>sub3</li>
<li>sub4</li>
<li>sub5</li>
<li>sub6</li>
<li>sub7</li>
</ul>
</div>
</li>
<li>Nieuws</li>
<li>de Klomp</li>
<li>de Werkplaats</li>
<li>Activiteiten</li>
<li>Agenda</li>
<li>Archief</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
*{
padding: 0;
margin: 0;
}
body{
background-image: url("https://homepages.cae.wisc.edu/~ece533/images/watch.png");
background-size: cover;
background-attachment: fixed;
box-sizing: border-box;
font-family: sans-serif;
}
.menu-bar{
background: #005400;
width:100%;
padding:20px;
}
.menu-bar > ul{
width:85%;
margin:auto;
display: flex;
justify-content:space-around;
}
.menu-bar ul li{
list-style: none;
}
.menu-bar > ul > li a{
padding: 10px 20px 10px 20px;
color:#ffffff;
text-decoration:none;
}
.sub_menu{
display:none;
}
.menu-bar ul li ul.sub_menu li{
padding:20px;
width:100px;
}
.menu-bar ul li:hover > ul.sub_menu{
display: block;
position:absolute;
background:#005400;
margin-top:20px;
}
.menu-bar ul li a:hover{
background:#2BAB0B;
padding: 10px 20px 10px 20px;
border-radius:5px;
}
<div class="menu-bar">
<ul>
<li class="active">Home
<ul class="sub_menu">
<li>sub1</li>
<li>sub2</li>
<li>sub3</li>
</ul>
</li>
<li>News
<ul class="sub_menu">
<li>News1</li>
<li>News2</li>
<li>News3</li>
</ul>
</li>
<li>Agenda</li>
<li>Archief</li>
<li>Contact</li>
</ul>
</div>
I have created my nav bar which was working fine but now i tried to add sub menu in my navbar and its not showing sub menu on hover. kindly check and correct me.
First I added <ul> in my <li> tag then I added css to hide nested <ul> then I tried to show <ul> on hover <li>
*{
margin: 0;
padding: 0;
}
nav{
background-color: red;
}
ul{
background-color: purple;
width: 50%;
}
nav ul li {
list-style: none;
padding: 5px;
display: inline-block;
}
nav ul li a{
text-decoration: none;
color:black;
font: bold 12px Arial;
}
nav ul li:hover{
background-color: blue;
color: red;
}
nav ul li:hover a{
color: red;
}
ul li ul {
display: none;
position:absolute;
}
nav ul li:hover ul {
display:block;
}
<nav>
<ul>
<li> Home</li>
<li> About Us</li>
<li> Contact Us</li>
<li> Privacy Policy</li>
<li>
<ul>
<li>Submenu 1</li>
<li>Submenu 2</li>
<li>Submenu 3</li>
<li>Submenu 4</li>
</ul>
</li>
</ul>
</nav>
Looks like your <li> wrap is incorrect!
here is the fiddle
After Privacy Policy you have created another <li> that shouldn't be needed. you have to wrap the sub-menus with in privacy policy tag not a new one that is one of the reason why the css was not showing data as expected and you were almost there regarding CSS I just fixed it for you! hope it helps.
* {
margin: 0;
padding: 0;
}
nav {
height: 30px;
}
nav ul {
display: block;
position: relative;
z-index: 100;
}
nav ul li {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
nav ul li ul {
display: none;
}
nav ul li a {
width: 100px;
height: 30px;
display: block;
text-decoration: none;
text-align: center;
line-height: 30px;
background-color: black;
color: white;
}
nav ul li a:hover {
background-color: red;
}
nav ul li:hover ul {
position: absolute;
top: 30px;
display: block;
width: 100px;
}
nav ul li:hover ul li {
display: block;
}
<nav>
<ul>
<li> Home</li>
<li> About Us</li>
<li> Contact Us</li>
<li> Privacy Policy
<ul>
<li>Submenu 1</li>
<li>Submenu 2</li>
<li>Submenu 3</li>
</ul>
</li>
</ul>
</nav>
Why don't you start from this working snippet and try to change data according to your needs :)
HTML Sub-Nav
*{
margin: 0;
padding: 0;
}
nav{
background-color: red;
}
ul{
background-color: purple;
width: 50%;
}
nav ul li {
list-style: none;
padding: 5px;
display: inline-block;
}
nav ul li a{
text-decoration: none;
color:black;
font: bold 12px Arial;
}
nav ul li:hover{
background-color: blue;
color: red;
}
nav ul li:hover a{
color: red;
}
ul li ul {
display: none;
position:absolute;
}
nav ul li:hover ul {
display:block;
}
<nav>
<ul>
<li> Home</li>
<li> About Us</li>
<li> Contact Us</li>
<li> Privacy Policy</li>
<li>
test
<ul>
<li>Submenu 1</li>
<li>Submenu 2</li>
<li>Submenu 3</li>
<li>Submenu 4</li>
</ul>
</li>
</ul>
You have to add an anchor tag in the sub nav you have created. Because currently those sub-tabs are created but are not associated with any super-tab.
Subnav
So add this above your sub-nav code. You are good to go.
I'm trying to make the drop down menu stay top right with the image behind it if anyone could help would be greatly appreciated i tried using z-index but that didn't work out for me !
( using a img off google so u guys can see what im talking about! )
/* Drop Down Menu */
.navClass {
z-index: 999;
float: right;
}
.right {
float: right;
}
.navClass > ul {
background-color: #5E5D5D;
color: #D8D8D8;
font-size: 20px;
font-family: sans-serif;
}
.navClass > ul > li {
list-style-type: none;
display: inline-block;
padding: 5px 25px;
position: relative;
}
.navClass > ul > li:hover {
background-color: #383838;
}
ul.sub-menu {
position: absolute;
background-color: #383838;
list-style-type: none;
width: 125px;
margin-top: 5px;
padding-left: 0pc;
margin-left: -25px;
padding-top: 5px;
opacity: 0;
}
ul.sub-menu li {
padding-left: 25px;
padding-top: 5px;
padding-bottom: 5px;
}
.navClass li:hover .sub-menu {
opacity: 1;
background-color: #7b7b7b;
}
.navClass ul li a {
text-decoration: none;
color: #D8D8D8;
}
.sub-menu li:hover {
background-color: #383838;
}
/* Background */
/* ZeeFro */
.zeefro {
z-index: -1;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>STREAMER // DESIGNER // YOUTUBER</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<nav class="bg-Main">
<img src="">
</nav>
<nav class="zeefro">
<img src="https://i.ytimg.com/vi/d-zKJCKsoWw/maxresdefault.jpg" text-align: center; >
</nav>
<nav class="navClass">
<ul>
<li>Contact Me</li>
<li>Home</li>
<li>About Me</li>
<li><a href="">Portfolio
<ul class="sub-menu">
<li>Logos</li>
<li>Banners</li>
<li>Twitch</li>
<li>Youtube</li>
</ul>
</li>
<li><a href="">Shop
<ul class="sub-menu">
<li>Graphics</li>
<li>Merch</li>
</ul>
</li>
<li><a href="">Social Media
<ul class="sub-menu">
<li>Twitch</li>
<li>Youtube</li>
<li>All</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
Either i did something wrong within the z-index unless i don't know whats happening :P
Kind regards
ZeFrolity
You need to put position: absolute to the div with background.
but
if a image is for background, you will usually want to use css background-image attribute instead of <img> tag.
you will also only need one nav tag only
/* Drop Down Menu */
.navClass {
z-index: 999;
float: right;
}
.right {
float: right;
}
.navClass > ul {
background-color: #5E5D5D;
color: #D8D8D8;
font-size: 20px;
font-family: sans-serif;
}
.navClass > ul > li {
list-style-type: none;
display: inline-block;
padding: 5px 25px;
position: relative;
}
.navClass > ul > li:hover {
background-color: #383838;
}
ul.sub-menu {
position: absolute;
background-color: #383838;
list-style-type: none;
width: 125px;
margin-top: 5px;
padding-left: 0pc;
margin-left: -25px;
padding-top: 5px;
opacity: 0;
}
ul.sub-menu li {
padding-left: 25px;
padding-top: 5px;
padding-bottom: 5px;
}
.navClass li:hover .sub-menu {
opacity: 1;
background-color: #7b7b7b;
}
.navClass ul li a {
text-decoration: none;
color: #D8D8D8;
}
.sub-menu li:hover {
background-color: #383838;
}
/* Background */
/* ZeeFro */
.zeefro {
z-index: -1;
text-align: center;
position: absolute;
width:100%;
height:100%;
background-image: url("https://i.ytimg.com/vi/d-zKJCKsoWw/maxresdefault.jpg")
}
<!DOCTYPE html>
<html>
<head>
<title>STREAMER // DESIGNER // YOUTUBER</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="zeefro">
</div>
<nav class="navClass">
<ul>
<li>Contact Me</li>
<li>Home</li>
<li>About Me</li>
<li><a href="">Portfolio
<ul class="sub-menu">
<li>Logos</li>
<li>Banners</li>
<li>Twitch</li>
<li>Youtube</li>
</ul>
</li>
<li><a href="">Shop
<ul class="sub-menu">
<li>Graphics</li>
<li>Merch</li>
</ul>
</li>
<li><a href="">Social Media
<ul class="sub-menu">
<li>Twitch</li>
<li>Youtube</li>
<li>All</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
You can absolutely position the menu instead. I also removed the margin from body.
/* Drop Down Menu */
body {
margin: 0;
}
.navClass {
position: absolute;
top: 0; right: 0;
}
.right {
float: right;
}
.navClass > ul {
background-color: #5E5D5D;
color: #D8D8D8;
font-size: 20px;
font-family: sans-serif;
}
.navClass > ul > li {
list-style-type: none;
display: inline-block;
padding: 5px 25px;
position: relative;
}
.navClass > ul > li:hover {
background-color: #383838;
}
ul.sub-menu {
position: absolute;
background-color: #383838;
list-style-type: none;
width: 125px;
margin-top: 5px;
padding-left: 0pc;
margin-left: -25px;
padding-top: 5px;
opacity: 0;
}
ul.sub-menu li {
padding-left: 25px;
padding-top: 5px;
padding-bottom: 5px;
}
.navClass li:hover .sub-menu {
opacity: 1;
background-color: #7b7b7b;
}
.navClass ul li a {
text-decoration: none;
color: #D8D8D8;
}
.sub-menu li:hover {
background-color: #383838;
}
/* Background */
/* ZeeFro */
.zeefro {
z-index: -1;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>STREAMER // DESIGNER // YOUTUBER</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<nav class="bg-Main">
<img src="">
</nav>
<nav class="zeefro">
<img src="https://i.ytimg.com/vi/d-zKJCKsoWw/maxresdefault.jpg" text-align: center; >
</nav>
<nav class="navClass">
<ul>
<li>Contact Me</li>
<li>Home</li>
<li>About Me</li>
<li><a href="">Portfolio
<ul class="sub-menu">
<li>Logos</li>
<li>Banners</li>
<li>Twitch</li>
<li>Youtube</li>
</ul>
</li>
<li><a href="">Shop
<ul class="sub-menu">
<li>Graphics</li>
<li>Merch</li>
</ul>
</li>
<li><a href="">Social Media
<ul class="sub-menu">
<li>Twitch</li>
<li>Youtube</li>
<li>All</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
Work on making an un-ordered list's with 100% of the body not the parent li which has display: inline-block (mega drop down menu).
I'm aware that width : 100% makes that element's width 100% of the parent. Right now I'm trying to make a mega drop down menu. I got a ul then an li then ul for a submenu if I put 100 % on the submenu I guess it will be 100% of the li(that's what I have now) . I want it to be 100% of the body or be the same size as the top nav.ul so Im having problem figuring out how to extend the width to be 100% of the body or the upper ul. I know I could set the submenu's width with px and put a negative margin left to position it (that seems messy). I'm wondering how you would make this mega drop down effect. the ul.submenu's li or a tag probably wont just be there any more I will put a div so I could put images text boxes, etc.
basically in the code below I can't put width: 100%; in .container ul ul.sub to be 100% of the body or top ul. I want to do something like that
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>myDrop</title>
<script src="jquery.js"></script>
<script>
$(function(){
})
</script>
<style>
*{
margin: 0;
padding: 0;
}
.container{
background: black;
}
.container ul > li{
display: inline-block;
list-style-type: none;
position: relative;
}
.nav a{
display: block;
padding: 0 10px;
font-size: 20px;
}
.container ul ul.sub{
position: absolute;
overflow: hidden;
height: 0;
opacity: 0;
left: 0;
width: 100%;
list-style-type: none;
padding: 0;
/*background: red;*/
}
.container ul li:hover > ul{
display: list-item;
opacity: 1;
height: 700%;
/*top: 60px;*/
}
.nav li{
position: relative;
}
.nav li ul{
position: absolute;
left: 0;
background: red;
}
.nav li ul li{
list-style-type: none;
}
.container a{
color:white;
text-decoration: none;
list-style-type: none;
}
</style>
</head>
<body>
<div class="container">
<ul class="nav">
<li>Home</li>
<li>Success
<ul class="sub">
<li>Success Submenu</li>
<li>Success Submenu</li>
</ul>
</li>
<li>Entrepeneurship
<ul class="sub">
<li>Entrepeneurship submenu</li>
<li>Entrepeneurship submenu</li>
</ul>
</li>
<li>Career
<ul class="sub">
<li>Career Submenu</li>
<li>Career Submenu</li>
</ul>
</li>
<li>Motivation
<ul class="sub">
<li>Motivation Submenu</li>
<li>Motivation Submenu</li>
</ul>
</li>
<li>Videos
<ul class="sub">
<li>Videos Submenu</li>
<li>Videos Submenu</li>
</ul>
</li>
<li>Quotes
<ul class="sub">
<li>Quotes Submenu</li>
<li>Quotes Submenu</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
I added
.nav{
position: relative;
}
*{
margin: 0;
padding: 0;
}
.container{
background: black;
}
.container ul > li{
display: inline-block;
list-style-type: none;
/*position: relative;*/
}
.nav{
position: relative;
}
.nav a{
display: block;
padding: 0 10px;
font-size: 20px;
}
.container ul ul.sub{
position: absolute;
overflow: hidden;
height: 0;
opacity: 0;
left: 0;
width: 100%;
list-style-type: none;
padding: 0;
/*background: red;*/
}
.container ul li:hover > ul{
display: list-item;
opacity: 1;
height: 400%;
/*top: 60px;*/
}
.nav li{
/*position: relative;*/
}
.nav li ul{
position: absolute;
left: 0;
background: red;
}
.nav li ul li{
list-style-type: none;
}
.container a{
color:white;
text-decoration: none;
list-style-type: none;
}
<div class="container">
<ul class="nav">
<li>Home</li>
<li>Success
<ul class="sub">
<li>Success Submenu</li>
<li>Success Submenu</li>
</ul>
</li>
<li>Entrepeneurship
<ul class="sub">
<li>Entrepeneurship submenu</li>
<li>Entrepeneurship submenu</li>
</ul>
</li>
<li>Career
<ul class="sub">
<li>Career Submenu</li>
<li>Career Submenu</li>
</ul>
</li>
<li>Motivation
<ul class="sub">
<li>Motivation Submenu</li>
<li>Motivation Submenu</li>
</ul>
</li>
<li>Videos
<ul class="sub">
<li>Videos Submenu</li>
<li>Videos Submenu</li>
</ul>
</li>
<li>Quotes
<ul class="sub">
<li>Quotes Submenu</li>
<li>Quotes Submenu</li>
</ul>
</li>
</ul>
</div>
I've been able to create a horizontal menu using (display:inline) and I now have a drop menu thanks to sousMenu. My problem is that all the submenus, regardless of element I hovered over, appear in the same place. How do I work around this?
My menu code thus far:
<ul>
<li>Home</li>
<li class="sousMenu">About Us
<ul>
<li>Board of Directors</li>
</br>
<li>Student Profiles</li>
</br>
<li>Projects</li>
</ul>
</li>
<li class="sousMenu">Get Involved
<ul>
<li>Donations</li>
</br>
<li>Job Board</li>
</br>
<li>Join</li>
</ul>
</li>
<li class="sousMenu">Resources
<ul>
<li>Connections</li>
</br>
<li>Gallery</li>
</br>
<li>Tours</li>
</ul>
</li>
CSS:
#navcontainer ul {
/*margin: 0;*/
margin-left: auto;
margin-right: auto;
padding: 0;
top:180;
right:20;
width:800px;
list-style-type: none;
text-align: center;
position: absolute;
color: #fff;
background-color: #003300;
padding: .2em 1em;
}
#navcontainer ul li {
display: inline;
padding-left:2cm;
}
#navcontainer ul li a {
text-decoration: none;
color: #fff;
background-color: #030;
}
#navcontainer ul li a:hover {
color: #fff;
background-color: #000;
}
.sousMenu:hover ul {
display: block;
}
.sousMenu ul {
text-align: center;
display: none;
list-style-type: none;
}
Try setting the parent list item to position: relative and the child ul to position: absolute for starters. I made some other slight modifications to your code to achieve the desired effect.
Here's the CSS:
* {
margin: 0;
padding: 0;
vertical-align: baseline;
}
li {
list-style-type: none;
}
ul.main li {
position: relative;
display: inline-block;
}
.main li:hover > ul {
display: block;
}
ul.sub {
position: absolute;
display: none;
top: 100%;
left: 0;
}
ul.sub li {
display: block;
}
I also cleaned up the HTML a bit. You were missing a closing </ul> tag as well:
<ul class="main">
<li>Home</li>
<li class="sousMenu">About Us
<ul class="sub about">
<li>Board of Directors</li>
<li>Student Profiles</li>
<li>Projects</li>
</ul>
</li>
<li class="sousMenu">Get Involved
<ul class="sub get-involved">
<li>Donations</li>
<li>Job Board</li>
<li>Join</li>
</ul>
</li>
<li class="sousMenu">Resources
<ul class="sub resources">
<li>Connections</li>
<li>Gallery</li>
<li>Tours</li>
</ul>
</li>
</ul>
Here's the fiddle: http://jsfiddle.net/vXhZb/2/