HTML/CSS Trouble displaying items in dropdown menu - html

I'm new to coding and learning.
Working on the project below.
I'm having trouble getting the sub-items ('choice 1' to 'choice 5') to display in the drop down.
I have been able to get the headings ('Sub-item') to display, but cannot get the list of contents underneath ('choice' etc) to display.
Can someone help?
HTML
<div class="sidebar_menu">
<ul>
<li>
<a href=""><label class="sidebar_menu_label" for="sidebar_menu">Main</label>
</a>
<ul id="lp_test_pop_up">
<div class="lp_test_popup_box">
<div class="lp_category_item">
<h3 id="">Sub-Item 1</h3>
<ul>
<li>choice 1</li>
<li>choice 2</li>
<li>choice 3</li>
<li>choice 4</li>
<li>choice 5</li>
</ul>
</div>
<div class="lp_category_item">
<h3 id="">Sub-Item 2</h3>
<ul>
<li>choice 1</li>
<li>choice 2</li>
<li>choice 3</li>
<li>choice 4</li>
<li>choice 5</li>
</ul>
</div>
<div class="lp_category_item">
<h3 id="">Sub-Item 3</h3>
<ul>
<li>choice 1</li>
<li>choice 2</li>
<li>choice 3</li>
<li>choice 4</li>
<li>choice 5</li>
</ul>
</div>
<div class="lp_category_item">
<h3 id="">Sub-Item 4</h3>
<ul>
<li>choice 1</li>
<li>choice 2</li>
<li>choice 3</li>
<li>choice 4</li>
<li>choice 5</li>
</ul>
</div>
<div class="lp_category_item">
<h3 id="">Sub-Item 5</h3>
<ul>
<li>choice 1</li>
<li>choice 2</li>
<li>choice 3</li>
<li>choice 4</li>
<li>choice 5</li>
</ul>
</div>
<div class="lp_category_item">
<h3 id="">Sub-Item 6</h3>
<ul>
<li>choice 1</li>
<li>choice 2</li>
<li>choice 3</li>
<li>choice 4</li>
<li>choice 5</li>
</ul>
</div>
</div>
</ul>
</li>
</ul>
</div>
</div>
CSS
.sidebar_menu ul {
list-style: none;
margin: 0;
padding: 0px 0px 0px 0px;
}
.sidebar_menu ul li {
padding: 10px;
position: relative;
width: 250px;
background-color: #fcfcfc;
border-top: 1px solid #e4e8ea;
}
.sidebar_menu ul li:hover {
box-shadow: 0 0 4px 0 rgb(0 0 0 / 12%);
position: relative;
}
.sidebar_menu ul ul {
transform: all 0.3s;
opacity: 0;
position: absolute;
visibility: hidden;
left: 100%;
top: -2%;
}
.sidebar_menu ul li:hover > ul {
cursor: pointer;
opacity: 1;
visibility: visible;
z-index: 9997;
}
.sidebar_menu ul li a {
font-size: 14px;
color: black;
text-decoration: none;
}
.sidebar_menu ul li ul {
width: 634px;
padding: 20px;
padding-bottom: 10px;
background-color: white;
box-shadow: 1px 2px 8px grey;
}
.sidebar_menu ul li ul ul {
width: 134px;
padding: 0px;
background-color: white;
}
.sidebar_menu ul li ul li {
min-width: 250px;
border: none;
}
label.sidebar_menu_label {
font-size: 14px;
margin-left: 10px;
color: black;
}
.lp_test_popup_box {
display: flex;
flex-wrap: wrap;
}
.lp_category_item {
width: 33%;
height: 125px;
}


.sidebar_menu ul ul {
transform: all 0.3s;
opacity: 0;
position: absolute;
visibility: hidden;
left: 100%;
top: -2%;
}
Choices are not displayed because of this CSS code. These styles are applied to every "ul" element present in ".sidebar_menu ul".
To know more about Selectors ,check out this site click here
I have added some classes to HTML and updated CSS code
Fix !!
HTML
<div class="sidebar_menu">
<ul class="sidebar_menu_list">
<li class="sidebar_menu_item">
<a href=""><label class="sidebar_menu_label" for="sidebar_menu">Main</label>
</a>
<ul id="lp_test_pop_up">
<div class="lp_test_popup_box">
<div class="lp_category_item">
<h3 id="lp_category_subheading">Sub-Item 1</h3>
<ul>
<li>choice 1</li>
<li>choice 2</li>
<li>choice 3</li>
<li>choice 4</li>
<li>choice 5</li>
</ul>
</div>
<div class="lp_category_item">
<h3 id="lp_category_subheading">Sub-Item 2</h3>
<ul>
<li>choice 1</li>
<li>choice 2</li>
<li>choice 3</li>
<li>choice 4</li>
<li>choice 5</li>
</ul>
</div>
<div class="lp_category_item">
<h3 id="lp_category_subheading">Sub-Item 3</h3>
<ul>
<li>choice 1</li>
<li>choice 2</li>
<li>choice 3</li>
<li>choice 4</li>
<li>choice 5</li>
</ul>
</div>
<div class="lp_category_item">
<h3 id="lp_category_subheading">Sub-Item 4</h3>
<ul>
<li>choice 1</li>
<li>choice 2</li>
<li>choice 3</li>
<li>choice 4</li>
<li>choice 5</li>
</ul>
</div>
<div class="lp_category_item">
<h3 id="lp_category_subheading">Sub-Item 5</h3>
<ul>
<li>choice 1</li>
<li>choice 2</li>
<li>choice 3</li>
<li>choice 4</li>
<li>choice 5</li>
</ul>
</div>
<div class="lp_category_item">
<h3 id="lp_category_subheading">Sub-Item 6</h3>
<ul>
<li>choice 1</li>
<li>choice 2</li>
<li>choice 3</li>
<li>choice 4</li>
<li>choice 5</li>
</ul>
</div>
</div>
</ul>
</li>
</ul>
</div>
</div>
CSS
.sidebar_menu_list {
list-style: none;
margin: 0;
padding: 0px 0px 0px 0px;
}
.sidebar_menu_item {
padding: 10px;
position: relative;
width: 250px;
background-color: #fcfcfc;
border-top: 1px solid #e4e8ea;
}
.sidebar_menu_item:hover {
box-shadow: 0 0 4px 0 rgb(0 0 0 / 12%);
position: relative;
}
#lp_test_pop_up {
transform: all 0.3s;
opacity: 0;
position: absolute;
visibility: hidden;
left: 100%;
top: -2%;
}
.sidebar_menu_item:hover #lp_test_pop_up {
cursor: pointer;
opacity: 1;
visibility: visible;
z-index: 9997;
}
.sidebar_menu ul li a {
font-size: 14px;
color: black;
text-decoration: none;
}
#lp_test_pop_up {
width:634px;
padding: 20px;
padding-bottom: 10px;
background-color: white;
box-shadow: 1px 2px 8px grey;
}
.sidebar_menu ul li ul ul {
width: 134px;
margin:15px 0px;
list-style-type:none;
padding:0px;
}
.sidebar_menu ul li ul li {
min-width: 250px;
border: none;
}
label.sidebar_menu_label {
font-size: 14px;
margin-left: 10px;
color: black;
}
.lp_test_popup_box {
display: flex;
flex-wrap: wrap;
}
.lp_category_item {
width: 33%;
height: 125px;
}
#lp_category_subheading{
margin:0px;
}
.lp_category_item{
margin-bottom:20px;
}
.lp_category_item ul li{
margin:2px 0px;
}

Related

couldn't show submenu of horizontal menu on hover

there are navigation panel(div id=#nav) in which is located horizontal menu(nav_main_ul). It has submenu. When I load site main horizontal is appear but on hover submenu of main manu is not appear.
I write:
.nav_main_ul li a:hover .submenu{
top:150;
}
What is wrong?
Everything did work while I use flexbox for sidebar, content and footer.
I'm newbie in html and css. I think reason of failure is conflict between position(absolute, relative) and flexbox.
Thanks in advance.
* {
margin: 0;
padding: 0;
list-style: none;
}
html,
body {
height: 100%;
}
#nav {
left: 0;
top: 120px;
background-color: #00004d;
width: 100%;
}
.nav_main_ul {
position: relative;
margin: 0px 0 0 400px;
}
#nav ul {
height: 50px;
list-style: none;
background-color: #00004d;
}
#nav li {
display: block;
float: left;
font-family: Arial, sans-serif;
font-size: 20px;
position: relative;
}
#nav li a {
color: #fff;
display: block;
height: 50px;
padding: 0 10px;
text-decoration: none;
line-height: 50px;
}
.nav_main_ul li a:hover {
background: #000080;
}
/*.nav_main_ul li a:hover .submenu{
top:50;
}*/
.submenu {
position: absolute;
width: 250px;
top: -9999em;
}
.submenu li {
width: 100%;
height: 40px;
background: #00004d;
}
.submenu li a {
line-height: 50px;
height: 50px;
transition: background 0.5s;
}
.submenu li a:hover {
background-color: red;
}
li:hover .submenu li {
display: block;
z-index: 100;
}
<div id="nav">
<ul class="nav_main_ul">
<li>Main
<ul class="submenu">
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
<li>link 4</li>
</ul>
</li>
<li> News
<ul class="submenu">
<li>link 5</li>
<li>link 6</li>
<li>link 7</li>
<li>link 8</li>
</ul>
</li>
<li>About us
<ul class="submenu">
<li>link 5</li>
<li>link 6</li>
<li>link 7</li>
<li>link 8</li>
<li>link 9</li>
<li>link 10</li>
</ul>
</li>
<li>Gallery
<ul class="submenu">
<li>link 5</li>
<li>link 6</li>
<li>link 7</li>
<li>link 8</li>
<li>link 9</li>
<li>link 10</li>
</ul>
</li>
<li>Contacts
<ul class="submenu">
<li>link 5</li>
<li>link 6</li>
<li>link 7</li>
<li>link 8</li>
<li>link 9</li>
<li>link 10</li>
</ul>
</li>
</ul>
</div>

Edit
Hi Delphi - To answer your question about the + selector, let's take a look at your HTML markup:
<li>
Main
<ul class="submenu">
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
<li>link 4</li>
</ul>
</li>
We need to understand that in the above markup, we can express it as:
LI (Parent / Root)
- A (Child of LI, Sibling of UL)
- UL (Child of LI, Sibling of A)
- LI (Child of UL, Grand-Child of LI)
Your desired action is that when a user hovers over the A, we show the UL.
USUALLY with CSS, we think of NESTED (or PARENT/CHILD) use-cases. But in YOUR use case, the A and UL are NOT in a parent/child relationship. Rather, they are siblings.
So, what we want is: When a user hovers over the A, we want the SIBLING(s) of A (in this case, only UL) to have TOP: 50PX.
There are TWO sibling selectors in CSS, "Adjacent" and "General". Adjacent means that it will ONLY apply when the siblings are directly together. For example:
<div>
<p></p>
<span></span>
<span></span>
<p></p>
</div>
OR:
DIV
- P
- SPAN
- SPAN
- P
Let's assume in the above, we wanted to select every SPAN that is a SIBLING of P. If we did:
p + span { color : red }
Only the FIRST span would be applied. That's because, it's the only span that immediately is next to a P element. Demo: http://jsfiddle.net/ucq5pg13/
What if we wanted ALL spans following a P to be red? That's where our GENERAL sibling selector comes into play:
p ~ span { color: red }
What this says is that ANY span that's a SIBLING of P, that comes AFTER IT, will be red.
It's important to note that it MUST come after. For example:
p ~ span { color: red }
<div>
<span></span> <!-- I WOULD NOT BE RED -->
<p></p>
<span></span> <!-- I WOULD BE RED -->
<span></span> <!-- I WOULD BE RED -->
<p></p>
</div>
Demo: http://jsfiddle.net/kb7n5236/
Hopefully that helps :)
Original:
When you hover over the a link, you'll need to position the .submenu. You can do something like:
<!-- On hover, show submenu -->
.nav_main_ul li a:hover + .submenu,
.nav_main_ul li a + .submenu:hover {
top: 50px;
}
JSFiddle: http://jsfiddle.net/1us0q4m3/1/
* {
margin: 0;
padding: 0;
list-style: none;
}
html,
body {
height: 100%;
}
#nav {
left: 0;
top: 120px;
background-color: #00004d;
width: 100%;
}
.nav_main_ul {
position: relative;
margin: 0px 0 0 400px;
}
#nav ul {
height: 50px;
list-style: none;
background-color: #00004d;
}
#nav li {
display: block;
float: left;
font-family: Arial, sans-serif;
font-size: 20px;
position: relative;
}
#nav li a {
color: #fff;
display: block;
height: 50px;
padding: 0 10px;
text-decoration: none;
line-height: 50px;
}
.nav_main_ul li a:hover {
background: #000080;
}
.nav_main_ul li a:hover + .submenu,
.nav_main_ul li a + .submenu:hover {
top: 50px;
}
.submenu {
position: absolute;
width: 250px;
top: -9999em;
}
.submenu li {
width: 100%;
height: 40px;
background: #00004d;
}
.submenu li a {
line-height: 50px;
height: 50px;
transition: background 0.5s;
}
.submenu li a:hover {
background-color: red;
}
li:hover .submenu li {
display: block;
z-index: 100;
}
<div id="nav">
<ul class="nav_main_ul">
<li>Main
<ul class="submenu">
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
<li>link 4</li>
</ul>
</li>
<li> News
<ul class="submenu">
<li>link 5</li>
<li>link 6</li>
<li>link 7</li>
<li>link 8</li>
</ul>
</li>
<li>About us
<ul class="submenu">
<li>link 5</li>
<li>link 6</li>
<li>link 7</li>
<li>link 8</li>
<li>link 9</li>
<li>link 10</li>
</ul>
</li>
<li>Gallery
<ul class="submenu">
<li>link 5</li>
<li>link 6</li>
<li>link 7</li>
<li>link 8</li>
<li>link 9</li>
<li>link 10</li>
</ul>
</li>
<li>Contacts
<ul class="submenu">
<li>link 5</li>
<li>link 6</li>
<li>link 7</li>
<li>link 8</li>
<li>link 9</li>
<li>link 10</li>
</ul>
</li>
</ul>
</div>

Ul li alignments using float left and right

I am trying to align the ul li depending on the float value.
So if the float is left then it will align left else right. But the issue is that when a li gets float right then it aligns to the right but not at the top.
Html code--
<ul>
<li style="float:left;">Text 1</li>
<li style="float:left;">Text 2</li>
<li style="float:right;">Text 3</li>
</ul>
Demo -- https://jsfiddle.net/squidraj/t2qmfkya/
Now they are all in one line but I would like to display it in the following way
Text 1 Text 3
Text 2
I have no clue if this is at all possible by the html format I have.
Any help is highly appreciated.

you can use CSS3 columns
ul {
columns: 2;
-moz-columns: 2;
-webkit-columns: 2;
}
<ul>
<li>Text 1</li>
<li>Text 2</li>
<li>Text 3</li>
</ul>
UPDATE
More random lis
ul {
columns: 5;
-moz-columns: 5;
-webkit-columns: 5;
}
<ul>
<li>Text 1</li>
<li>Text 2</li>
<li>Text 3</li>
<li>Text 4</li>
<li>Text 5</li>
<li>Text 6</li>
<li>Text 7</li>
<li>Text 8</li>
<li>Text 9</li>
<li>Text 10</li>
</ul>

This isn't the prettiest, but might help you...
You can target the elements with a particular inline style.
jsfiddle
ul li[style="float:left;"] {
clear: left;
margin-right: 20px;
}
ul li[style="float:right;"] {
float: none !important;
}
ul {
width: 180px;
background: red;
display: block;
float: left;
padding: 1rem;
list-style: none;
}
ul li[style="float:left;"] {
clear: left;
margin-right: 20px;
}
ul li[style="float:right;"] {
float: none !important;
}
<ul>
<li style="float:left;">Text 1</li>
<li style="float:left;">Text 2</li>
<li style="float:right;">Text 3</li>
<li style="float:right;">Text 4</li>
<li style="float:left;">Text 5</li>
</ul>
Updated
ul li[style="float:right;"] {
float: none !important;
padding-left: 100px;
}
This ensures that all float:right elements line up.
fiddle

Try to do it in this way https://jsfiddle.net/t2qmfkya/5/
<ul>
<li class="right-item" style="float:right;">Text 3</li>
<li class="right-item" style="float:right;">Text 4</li>
<li>Text 1</li>
<li>Text 2</li>
</ul>
ul {
width: 180px;
background: red;
padding: 1rem;
list-style: none;
overflow: hidden;
}
ul li {
overflow: hidden;
}
.right-item{
width: 51%;
}

Rearrange element and use clear both can handle this :
ul {
width: 180px;
background: red;
display: block;
float: left;
padding: 1rem;
list-style: none;
}
ul li {}
<ul>
<li style="float:left;">Text 1</li>
<li style="float:right;">Text 3</li>
<li style="clear:both;">Text 2</li>
</ul>

how to make background 100% on a top menu

I am trying to make a top menu which should be 100% filled with background-color and also keep the content of my menu inside my wrap id which 960px.
Can somebody explain me how to do it.
Demo: JSFiddle
HTML:
<div id="wrap">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
<li>Link 8</li>
<li>Link 9</li>
</ul>
</div>
CSS:
*
{
padding: 0px;
margin: 0px;
}
#wrap
{
width: 960px;
margin: 0px auto;
margin: 0px auto;
}
ul
{
background: navy;
overflow: hidden;
}
ul li
{
float: left;
list-style: none;
}
ul li a
{
display: block;
padding: 10px 15px;
color: white;
text-decoration: none;
}

Try this
*
{
padding: 0px;
margin: 0px;
}
#wrap
{
width: 100%;
margin: 0px auto;
margin: 0px auto;
}
ul
{
background: navy;
overflow: hidden;
}
ul li
{
float: left;
list-style: none;
width:11%;
}
ul li a {
display: block;
padding-top: 20%;
padding-bottom: 20%;
color: white;
text-decoration: none;
}
<div id="wrap">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
<li>Link 8</li>
<li>Link 9</li>
</ul>
</div>

Add a section as wrapper around it. And since you might want to re-use your wrap declare it as class.
CSS:
#header {
background: navy;
}
.wrap {
width: 960px;
margin: 0px auto;
margin: 0px auto;
}
ul {
overflow: hidden;
}
HTML:
<section id="header">
<div class="wrap">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
<li>Link 8</li>
<li>Link 9</li>
</ul>
</div>
</section>
JSFiddle

HTML/CSS Submenu in block

I'm trying to create a submenu in html/css. I already have a piece of code, but i would like to have a submenu in block below each menu item, but i can't figure out how to do it. Anyone would like to help?
.mainmenu {
margin-left: auto;
margin-right: auto;
}
.mainmenu ul {
width: 940px;
;
overflow: hidden;
font-family: 'swis721_btroman';
position: relative;
background-image: url(../img/01.png);
list-style: none;
font-size: 16px;
color: #000;
}
.mainmenu ul li {
float: left;
text-transform: uppercase;
font-family: 'swis721_btroman';
padding: 0 20px 0 20px;
display: table-column;
font-size: 16px;
color: #000;
}
.mainmenu ul li:first-child {
background: none;
}
.mainmenu ul li a {
float: left;
text-decoration: none;
padding: 9px 0 9px 0;
font-family: 'swis721_btroman';
font-weight: bold;
font-size: 16px;
color: #292F51;
}
.mainmenu ul li a:hover {
text-decoration: none;
color: #FFF;
overflow: hidden;
padding: 9px 9px 9px 9px;
position: relative;
background-color: #292F51;
}
.mainmenu ul ul {
list-style-type: none;
display: none;
}
.mainmenu ul:hover ul {
display: block;
position: relative;
}
<div class="mainmenu">
<ul>
<li class="operador chefe">
operador chefe
<ul>
<li>menu 1
</li>
<li>menu 2
</li>
<li>menu 3
</li>
<li>menu 4
</li>
<li>menu 5
</li>
</ul>
</li>
<li class="safety">
safety
<ul>
<li>menu 1
</li>
<li>menu 2
</li>
<li>menu 3
</li>
<li>menu 4
</li>
<li>menu 5
</li>
</ul>
</li>
<li class="security">
security
<ul>
<li>menu 1
</li>
<li>menu 2
</li>
<li>menu 3
</li>
<li>menu 4
</li>
<li>menu 5
</li>
</ul>
</li>
<li class="atendimento">
atendimento
<ul>
<li>menu 1
</li>
<li>menu 2
</li>
<li>menu 3
</li>
<li>menu 4
</li>
<li>menu 5
</li>
</ul>
</li>
<li class="apoio unidades comerciais">
apoio unidades comerciais
<ul>
<li>menu 1
</li>
<li>menu 2
</li>
<li>menu 3
</li>
<li>menu 4
</li>
<li>menu 5
</li>
</ul>
</li>
</ul>
</div>
Right now, when i hove over a menu item, all the submenu items appear at once, and in inline-block, which is not what i want.

You have two main problems here:
First this selector .mainmenu ul:hover ul it's wrong since is showing all ul elements when you hover the main ul.
Change to this:
.mainmenu li:hover > ul
Making visible just the sub ul element inside a li.
Also those submenus need to be absolute positioned so they don't disturb the layout of the upper menu:
.mainmenu ul li {
position:relative;
}
.mainmenu ul li > ul {
display: none;
position: absolute;
z-index:10;
}
Check this Snippet
.mainmenu ul {
padding:0;
width: 940px;
position: relative;
list-style: none;
font-size: 16px;
color: #000;
}
.mainmenu ul li {
float: left;
text-transform: uppercase;
padding: 0 20px 0 20px;
font-size: 16px;
color: #000;
position:relative;
}
.mainmenu ul li a {
display:block;
text-decoration: none;
padding: 9px 0 9px 0;
font-weight: bold;
font-size: 16px;
color: #292F51;
}
.mainmenu ul li a:hover {
text-decoration: none;
color: #FFF;
background-color: #292F51;
}
.mainmenu ul li > ul {
display: none;
position: absolute;
z-index:10;
}
.mainmenu li:hover > ul {
display: block;
}
<div class="mainmenu">
<ul>
<li class="operador chefe">
operador chefe
<ul>
<li>menu 1
</li>
<li>menu 2
</li>
<li>menu 3
</li>
<li>menu 4
</li>
<li>menu 5
</li>
</ul>
</li>
<li class="safety">
safety
<ul>
<li>menu 1
</li>
<li>menu 2
</li>
<li>menu 3
</li>
<li>menu 4
</li>
<li>menu 5
</li>
</ul>
</li>
<li class="security">
security
<ul>
<li>menu 1
</li>
<li>menu 2
</li>
<li>menu 3
</li>
<li>menu 4
</li>
<li>menu 5
</li>
</ul>
</li>
<li class="atendimento">
atendimento
<ul>
<li>menu 1
</li>
<li>menu 2
</li>
<li>menu 3
</li>
<li>menu 4
</li>
<li>menu 5
</li>
</ul>
</li>
<li class="apoio unidades comerciais">
apoio unidades comerciais
<ul>
<li>menu 1
</li>
<li>menu 2
</li>
<li>menu 3
</li>
<li>menu 4
</li>
<li>menu 5
</li>
</ul>
</li>
</ul>
</div>

This will work fine.
The most important rule is that when you hover a li it should show its child ul.
.main-menu,
.sub-menu {
font-size: 0px;
margin: 0px;
list-style: none;
padding: 0px;
font-family: 'Helvetica';
}
.sub-menu {
display: none;
}
.menu-item,
.sub-item {
background: navy;
color: white;
font-size: 14px;
text-align: center;
min-width: 80px;
padding: 4px;
}
.menu-item {
display: inline-block;
vertical-align: top;
}
.menu-item:hover,
.sub-item:hover {
background: blue;
}
.menu-item:hover > ul {
display: block;
}
<ul class="main-menu">
<li class="menu-item">Item 1</li>
<li class="menu-item">Item 2 (With sub-items!)
<ul class="sub-menu">
<li class="sub-item">Item 3</li>
<li class="sub-item">Item 4</li>
</ul></li>
<li class="menu-item">Item 5</li>
<li class="menu-item">Item 6 (With sub-items!)
<ul class="sub-menu">
<li class="sub-item">Item 7</li>
<li class="sub-item">Item 8</li>
</ul></li>
</ul>

I don't really like submenu coded from scratch (from zero). You can today create some menu "without" any CSS.
You can use Bootstrap class to realize menu like that:
http://jsfiddle.net/fm571dsd/4/
html:
<body>
<div class="container">
<div class="row">
<nav class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#" target="_blank">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="dropdown">
operador chefe
<ul class="dropdown-menu">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</li>
<li class="dropdown">
safety
<ul class="dropdown-menu">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</li>
<li class="dropdown">
security
<ul class="dropdown-menu">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</li>
<li class="dropdown">
atendimento
<ul class="dropdown-menu">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</li>
<li class="dropdown">
apoio unidades comerciais
<ul class="dropdown-menu">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
</div>
</body>
js:
(function($){
$(document).ready(function(){
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
event.preventDefault();
event.stopPropagation();
$(this).parent().siblings().removeClass('open');
$(this).parent().toggleClass('open');
});
});
})(jQuery);

Build a centered column footer

I'm developing a columned footer that displays four columns. One of the columns, being just an image. The rest being useful hyperlinks.
Here's what I have working right now http://jsfiddle.net/Lqh5a/
HTML
<div id="wrapper">
<div id="footer">
<div class="footerFloat">
<h4>Header 1</h4>
<li>Line 1</li>
<li>Line 2</li>
<li>Line 3</li>
<li>Line 4</li></div>
<div class="footerFloat">
<h4>Header 2</h4>
<ul>
<li>Line 1</li>
<li>Line 2</li>
<li>Line 3</li>
<li>Line 4</li>
</ul>
</div>
<div class="footerFloat">
<h4>Header 3</h4>
<ul>
<li><img src="http://cdn.shopify.com/s/files/1/0593/8633/t/2/assets/footer-logo.png?1101"></li>
</ul>
</div>
<div class="footerFloat">
<h4>Header 4</h4>
<li>Line 1</li>
<li>Line 2</li>
<li>Line 3</li>
<li>Line 4</li></div>
</div>
</div>
CSS
#footer {
width: 100%;
margin: auto;
padding-bottom:200px;
}
.footerFloat {
width: 100%;
}
#media all and (min-width: 950px) {
#footer {
width: 980px;
margin: auto;
}
.footerFloat {
width: 25%;
float: left;
}
}
#wrapper {
background-color: blue;
width: 100%;
overflow:hidden;
}
Never done this before, so I'm not sure if I'm doing this correctly. How can i get this footer to look correct?

Its not perfect but it will get you in the direction you want to go. I just added some css to your fiddle.
.footerFloat {
width: 25%;
float: left;
}
.footerFloat ul{
list-style: none;
padding: 0;
margin: 0;
}
FIDDLE

You were missing some ul tags. But this should get you close to what you want.
JSFiddle
HTML:
<div id="wrapper">
<div id="footer">
<div class="footerFloat">
<h4>COMPANY</h4>
<ul>
<li>CONTACT</li>
<li>CUSTOMER CARE</li>
<li>ABOUT US</li>
</ul>
</div>
<div class="footerFloat">
<h4>ORDERING</h4>
<ul>
<li>SHIPPING</li>
<li>RETURNS</li>
<li>SIZE CHART</li>
</ul>
</div>
<div class="footerFloat logo">
<img src="http://cdn.shopify.com/s/files/1/0593/8633/t/2/assets/footer-logo.png?1101">
</div>
<div class="footerFloat">
<h4>STORE</h4>
<ul>
<li>SHOP</li>
<li>RETAILERS</li>
<li>GIFT CARDS</li>
</ul>
</div>
<div class="footerFloat">
<h4>SOCIAL</h4>
<ul>
<li>BLOG</li>
<li>INSTAGRAM</li>
<li>PINTEREST</li>
</ul>
</div>
</div>
</div>
CSS:
ul {
list-style: none;
list-style-position: inside;
padding: 0;
}
ul li {
text-align: center;
}
#footer {
width: 100%;
margin: auto;
padding-bottom:200px;
}
.footerFloat {
width: 19%;
display: inline-block;
vertical-align: top;
text-align: center;
font-size: 0.750em;
}
#media all and (min-width: 950px) {
#footer {
width: 980px;
margin: auto;
}
.footerFloat {
width: 25%;
float: left;
}
}
.logo {
padding-top: 4em;
}
#wrapper {
background-color: #fff;
width: 100%;
overflow:hidden;
}
EDIT: Fiddle wasn't working.

If you have any problems with the floating divs you could take a different route.
add pos:absolute; bottom:0px to the container div then add pos:relative; top:0 left 0
If you've floated everything above the footer that could be an issue though.

Here try these. This should work it out...
<div id="wrapper">
<div id="footer">
<div class="footerFloat">
<h4>Header 1</h4>
<ul>
<li>Line 1</li>
<li>Line 2</li>
<li>Line 3</li>
<li>Line 4</li>
</ul>
</div>
<div class="footerFloat">
<h4>Header 2</h4>
<ul>
<li>Line 1</li>
<li>Line 2</li>
<li>Line 3</li>
<li>Line 4</li>
</ul>
</div>
<div class="footerFloat">
<h4>Header 3</h4>
<ul>
<li><img src="http://cdn.shopify.com/s/files/1/0593/8633/t/2/assets/footer-logo.png?1101"></li>
</ul>
</div>
<div class="footerFloat">
<h4>Header 4</h4>
<ul>
<li>Line 1</li>
<li>Line 2</li>
<li>Line 3</li>
<li>Line 4</li>
</ul>
</div>
<div class="footerFloat">
<h4>Header 4</h4>
<ul>
<li>Line 1</li>
<li>Line 2</li>
<li>Line 3</li>
<li>Line 4</li>
</ul>
</div>
</div>
</div>
Couple it with the css:
#footer {
width: 100%;
margin: auto;
padding-bottom:200px;
}
ul{
list-style: none;
display: inline-block;
padding: 0;
}
#media all and (min-width: 950px) {
#footer {
width: 950px;
margin: auto;
}
.footerFloat {
width: 25%;
float: left;
text-align: center;
}
}
#wrapper {
background-color: blue;
width: 100%;
overflow:hidden;
}