I try to show a dropdown menu after the user hovers over the link with id galerie. I solved it like this:
$("#gallerie").mouseover
(
function()
{
$("#gallerie_drop").css("display","block");
}
);
$("#gallerie_drop").mouseleave
(
function()
{
$("#gallerie_drop").css("display","none");
}
);
#header {
text-align: right;
padding:20px;
}
#header a {
padding: 20px;
}
#gallerie_drop {
display:none;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: block;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
Galerie
Videos
Photos
Foo
Bar
</div>
<div class="dropdown-content" id="gallerie_drop">
Link 1
Link 2
Link 3
</div>
But how can i let the box appear directly under the link?
JSFIDDLE: https://jsfiddle.net/c544es76/2/
If you are creating Menu, please use UL, LI.
Here is demo, with hoverable item. All without JS:
http://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_dropdown_navbar
Need changes.
You HTML Should be like this,
<div class="yourclass">
Galerie
<div class="dropdown-content" id="gallerie_drop">
Link 1
Link 2
Link 3
</div>
</div>
And CSS,
.yourclass{
position: relative;
}
#gallerie_drop{
position: absolute;
top: 10px;
left: 10px;
}
And the script is correct to show/hide the element.
Add position:relative to .gallery_drop
#gallerie_drop {
display:none;
position:relative;
}
and change your mouseover callback to
$("#galerie").mouseover
(
function()
{
$(this).append($('#gallery_drop'));
$("#gallerie_drop").css("display","block");
}
);
This will append the div to your hover link. You have size it appropriately.
Use Like This
Javascript is not needed
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
float:right;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<ul>
<li class="dropdown">
Galerie
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
<li><a class="active" href="#Videos">Videos</a></li>
<li> <a href="#photos" >Photos</a></li>
<li> <a href="#Foo" > Foo</a></li>
<li> <a href="#Bar" > Bar </a></li>
</li>
</ul>
</body>
</html>
Related
I made a nav bar using nav and li tags, including a notifications icon, I am trying to make notifications nested list to show notifications, and use JavaScript to toggle/hide the menu, so far no luck. I've been looking for snippets online to support my logic, but I am stuck in the styling part and the JavaScript functionality. code below:
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
if (!e.target.matches('.dropbtn')) {
var myDropdown = document.getElementById("myDropdown");
if (myDropdown.classList.contains('show')) {
myDropdown.classList.remove('show');
}
}
}
html {
scroll-behavior: smooth;
}
* {
font-family: 'Roboto', sans-serif;
font-style: normal;
padding: 0;
margin: 0;
text-decoration: none;
}
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1;
}
::-webkit-scrollbar {
width: 1.32vmin;
}
/*
::-webkit-scrollbar-track{
border: 0.53vmin solid rgba(7, 67, 146, 0.17);
box-shadow: inset 0 0 0.33vmin 0.26vmin rgba(7, 67, 146, 0.17);
}
*/
::-webkit-scrollbar-thumb {
background: #074392;
border-radius: 0vmin;
}
::-webkit-scrollbar-button {
height: 7.45vmin;
background: #074392;
}
body {
font-weight: 400;
font-size: 2.12vmin;
background-color: #FFFFFF;
/*overflow: hidden;*/
height: 100%;
}
h1 {
margin-left: 3vmin;
}
h5 {
margin: 2vmin 3vmin;
position: absolute;
width: 14.72vmin;
font-weight: 500;
font-size: 2.65vmin;
letter-spacing: 0.79vmin;
color: #FFFFFF;
display: inline;
}
nav {
background-color: #074392;
height: 7.42vmin;
width: 100%;
/*position: relative;*/
/*overflow: hidden;*/
position: sticky;
top: 0;
}
img.logo {
margin: 1.855vmin 3vmin;
height: 3.5vmin;
width: 7vmin;
}
nav ul {
float: right;
margin: 1.855vmin 2vmin;
}
nav ul li {
display: inline-block;
}
nav ul li::before {
content: " ";
padding: 0vmin 0.5vmin;
}
nav ul li a {
color: white;
/*margin: 0vmin 1vmin;*/
/*border-top-left-radius: 1.326vmin;
border-top-right-radius: 1.326vmin;
border-bottom-left-radius: 1.326vmin;
border-bottom-right-radius: 1.326vmin;*/
}
a.active,
a:hover {
font-variation-settings: 'FILL' 1;
}
.checkbtn {
color: #ffffff;
float: left;
cursor: pointer;
display: none;
margin: 1.855vmin 3vmin;
}
#check {
display: none;
}
#check:checked~ul {
left: 0;
}
.dropdown {}
.dropdown .dropbtn {
cursor: pointer;
border: none;
outline: none;
background-color: #074392;
color: #FFFFFF;
}
.dropdown:hover .dropbtn,
.dropbtn:focus {
color: #FFFFFF;
font-variation-settings: 'FILL' 1;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #0743922B;
width: 37.5vmin;
overflow-wrap: break-word;
transform: translateX(-56%);
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: justify;
}
.dropdown-content a:hover {
background-color: #0743922B;
}
.show {
display: block;
}
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD#20..48,100..700,0..1,-50..200" />
<div class="container">
<nav>
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<i class="material-symbols-rounded" style="font-size:3.5vmin;" title="Menu">menu</i>
</label>
<h5>LOGO</h5>
<ul>
<li>
<i class="material-symbols-rounded" style="font-size:3.5vmin;" title="Home">home</i>
</li>
<!-- <li> <i class="material-symbols-rounded" style="font-size:3.5vmin;" title="Notifications">notifications</i> -->
<li class="dropdown"><button class="dropbtn" onclick="myFunction()"><i class="material-symbols-rounded" style="font-size:3.5vmin;" title="Notifications">notifications</i></button>
<div class="dropdown-content" id="myDropdown">
<div>Link 1</div>
<div>Link 2</div>
<div>Link asasdasdasdasdasdsadsadasdasdasdasd asddasdas asd asd asd dasd asd</div>
</div>
</li>
<li>
<i class="material-symbols-rounded" style="font-size:3.5vmin;" title="Tasks">task</i>
</li>
<li>
<i class="material-symbols-rounded" style="font-size:3.5vmin;" title="Profile">person</i>
</li>
</ul>
<script type="text/javascript" src="JS/ActiveTab.js"></script>
<script type="text/javascript" src="JS/ToggleNotifications.js"></script>
</nav>
<main>
<h1>Example Page</h1>
</main>
</div>
By default set a display: none on the dropdown element and set a display: block on the hover pseudo-class of the dropdown element so when a hover event is triggered the dropdown appears.
Also, you can use classList.toggle method to remove if exists or to add if not exist the class.
Remove
Just add the following to the .css:
#myDropdown {
display: none;
}
#myDropdown.show {
display: block;
}
Remove onclick="myFunction()". And replace the .js with:
const myDropdown = document.getElementById('myDropdown')
addEventListener('click', event => {
let dropbtn = event.target.closest('button.dropbtn')
if (!dropbtn) return myDropdown.classList.remove('show')
console.log('hii')
myDropdown.classList.toggle('show')
})
My website navigation should have three main links on the left ("Menu", "Coffee", and "Our Story"), and two on the right ("Wholesale" and "Talk to Us"). The first two ("Menu" and "Coffee") should be dropdown menus, however when I click "Menu" the dropdown menu only sometimes appears. When I click "Coffee" the dropdown sometimes appears too, but it shows the dropdown links for "Menu" instead of it's own.
My first thought is that maybe I need two separate functions for "Menu" and "Coffee"? Is there a way to properly display the dropdown links on click? And can I also somehow display the dropdown on hover?
Thank you in advanced.
HTML:
<nav class ="navbar">
<ul class="left-nav">
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn"><li>Menu</li></button>
<div id="myDropdown" class="dropdown-content">
Drinks
Pastries
Catering
</div>
</div>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn"><li>Coffee</li></button>
<div id="myDropdown" class="dropdown-content">
Blends
Beanie's Brand
</div>
</div>
<li>Our Story</li>
</ul>
<ul class="right-nav">
<li>Wholesale</li>
<li>Talk To Us</li>
</ul>
</nav>
CSS:
.navbar {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
.navbar ul {
top: 170px;
position: fixed;
z-index: 1;
}
.left-nav {
flex: 50%;
display: block;
margin-right: auto;
float: left;
left: 0px;
}
.right-nav {
flex: 50%;
display: block;
float: right;
right: 50px;
}
.navbar li {
list-style-type: none;
}
.navbar ul li {
display: inline-block;
}
.navbar a {
text-decoration: none;
/* color: rgb(255, 180, 148); */
color: white;
margin: 20px;
font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
font-weight: 530;
font-size: 20px;
}
.navbar a:hover {
color: hsl(39, 92%, 70%);
}
/* Dropdown Navigation */
.dropbtn {
background-color: rgba(255,255,255,0);
color: white;
font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
font-weight: 530;
font-size: 20px;
border: none;
cursor: pointer;
padding-right: 15px;
padding-left: 20px;
}
.dropbtn:hover, .dropntn:focus {
color: hsl(39, 92%, 70%);
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 2;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
display: block;
}
.show {display:block;}
Javascript:
/* Toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
There should be only one element with same id on a page, you should target the dropdown differently:
function myFunction(element) {
element.parentNode.querySelector('.dropdown-content').classList.toggle("show");
}
<button onclick="myFunction(this)" class="dropbtn"><li>Coffee</li></button>
I want to be able to open a drop down menu, and when I select one of the options, a small window will popup with more options available. Something shown in this picture I found: http://datasmugglers.com/wp-content/uploads/mute-someone.jpg
I tried some solutions I found but no matter what I do it doesn't seem to work. I can't find any errors but I'm trying to do it exactly like the template someone gave me in my last question and its just not working.
//toggles the hidden dropdown
function dropdown() {
document.getElementById("myDropdown").classList.toggle('show');
}
//opens a popup window from clicking settings
function settings() {
document.getElementById('settingsD').classList.toggle('show');
}
/* dropdown button*/
.dropbtn {
background-color:#4caf50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/*drop down button on hover & focus*/
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
/*the container <div> needed to postision the content */
.dropdown {
position: relative;
display: inline-block;
}
/*dropdown content*/
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/*changes the style of the list*/
.dropdown-content2 {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/*links in the dropdown*/
.dropdown-content a:hover {background-color: #f1f1f1}
/*show the dropdown (use Js to add this class to the dropwdown-content container when its clicked)*/
.show {display:block;}
.settings {
display: none;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
z-index: 10000;
max-width: 26em;
height: 199px;
padding: 28px 22px;
border: 4px solid rgb(197, 218, 255);
background: black;
}
<!DOCTYPE html>
<html>
<link type="text/css" rel="stylesheet" href="dropdown.css">
<script src="dropdown.js" type="text/javascript"></script>
<head>
<div class="dropdown">
<button onclick='dropdown()' class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<div class='dropdown-content2' onclick="settings()">Settings</div>
<span id='settingsD' class='settings'>These are the settings</span>
<div class='dropdown-content2'>Link 2</div>
<div class='dropdown-content2'>Link 3</div>
</div>
</div>
</head>
</html>
As you can see I can't click on the settings part of the dropdown and have the settings text show, and I'm not sure why. Thank you for your help in advance!
You have to place the .show below .settings in your css. If you have it like you do the display:block; in .show gets overwritten by the display:none; in .settings which is below.
Else you could do .settings:not(.show) if none of the css for .settings should be displayed.
I am currently creating my first website and I created a navigation bar. But I have noticed that there is some extra space on the right side of the bar. So when I highlight over the last thing on my bar there is a little bit of space that does not change colors (when I hover over things on the tab it changes the background color). So I was wondering if anyone has a solution to this problem?
ul.tab {
list-style-type: none;
margin: auto;
font-family: "CopperPlate", Times, serif;
padding-left: 0px;
padding-right: 0px;
overflow: hidden;
background-color: #1A1B1F;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.6);
opacity: .95;
width: 742px;
}
ul.tab li {
float: left;
padding: 0px;
}
ul.tab a {
display: block;
color: #E7E8EC;
text-align: center;
font-size: 16px;
padding: 16px 64px;
text-decoration: none;
transition: .3s;
}
.home:hover {
background-color: #0EB323;
}
.about:hover {
background-color: #0EB323;
}
.projects:hover {
background-color: #0EB323;
}
.contact:hover {
background-color: #0EB323;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: rgba(34, 43, 47, .8);
width: 200px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #0EB323}
.dropdown:hover .dropdown-content {
display: block;
}
<!DOCTYPE HTML>
<html>
<title> Website </title>
<head>
<link rel = "stylesheet" href = "CSScode.css">
<script src = "JavaScript.js"></script>
<style>
</style>
</head>
<body>
<ul class = "tab">
<li><a class = "home" href = "HomePage.html">Home</a></li>
<li><a class = "about" href = "#about"> About </a></li>
<li class = "dropdown">
<a class = "projects dropbtn"> Projects </a>
<div class = "dropdown-content">
Project 1
Project 2
Project 3
</div>
<li><a class = "contact" href = "ContactPage.html"> Contact </a></li>
</ul>
</body>
</html>
Give flexbox a try.
display: flex on the ul, and flex: 1 on the li:
To align the dropdown menu with the button, relative position the button, 100% width on the dropdown div, and remove overflow hidden from the ul
Also, you don't need to add left and right padding to the a elements because you display them as block.
ul.tab {
list-style-type: none;
margin: auto;
font-family: "CopperPlate", Times, serif;
padding-left: 0px;
padding-right: 0px;
/*overflow: hidden;*/
background-color: #1A1B1F;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.6);
opacity: .95;
width: 742px;
display: flex;
}
ul.tab li {
flex: 1;
/*float: left;*/
padding: 0px;
}
ul.tab a {
display: block;
color: #E7E8EC;
text-align: center;
font-size: 16px;
padding: 16px 0;
text-decoration: none;
transition: .3s;
}
.home:hover {
background-color: #0EB323;
}
.about:hover {
background-color: #0EB323;
}
.projects:hover {
background-color: #0EB323;
}
.contact:hover {
background-color: #0EB323;
}
li.dropdown {
display: inline-block;
position: relative;
}
.dropdown-content {
display: none;
position: absolute;
background-color: rgba(34, 43, 47, .8);
width: 100%;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 0;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #0EB323}
.dropdown:hover .dropdown-content {
display: block;
}
<!DOCTYPE HTML>
<html>
<title> Website </title>
<head>
<link rel = "stylesheet" href = "CSScode.css">
<script src = "JavaScript.js"></script>
<style>
</style>
</head>
<body>
<ul class = "tab">
<li><a class = "home" href = "HomePage.html">Home</a></li>
<li><a class = "about" href = "#about"> About </a></li>
<li class = "dropdown">
<a class = "projects dropbtn"> Projects </a>
<div class = "dropdown-content">
Project 1
Project 2
Project 3
</div>
<li><a class = "contact" href = "ContactPage.html"> Contact </a></li>
</ul>
</body>
</html>
You've set the width of your nav bar to 742px. The combined width of all your items (your li's) doesn't add up enough to fill the whole bar.
Try:
ul.tab li {
float: left;
padding: 0px;
width: 25%;
}
4 items at 25% total 100% of the container.
The width of the nav bar is greater than the width of then nav items. Unless you declare a hard width on the items that adds up to the same as the width of the nav bar, you shouldn't use a fixed width.
What I would do is change ul.tab to be display:inline-block; so that it will only take up as much space as needed and will shrink to match the size of it's direct descendents, and add text-align: center; to that element's parent (body in this case) to center the element.
Here's a demo - http://codepen.io/anon/pen/JEdywM
Your li elements all have dynamic widths which are rendered as float values for the pixels and eventually rounded to full pixels. That's where that margin comes from. To prevent that:
In the CSS rule for ul.tab remove the width setting alltogether and add display: inline-block;.
PLUS: Wrap the ul in a container div which has text-align: center:
(view the snippet in full page mode to see the result)
.listcontainer {
text-align: center;
}
ul.tab {
list-style-type: none;
margin: auto;
font-family: "CopperPlate", Times, serif;
padding-left: 0px;
padding-right: 0px;
overflow: hidden;
background-color: #1A1B1F;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.6);
opacity: .95;
display: inline-block;
}
ul.tab li {
float: left;
padding: 0px;
}
ul.tab a {
display: block;
color: #E7E8EC;
text-align: center;
font-size: 16px;
padding: 16px 64px;
text-decoration: none;
transition: .3s;
}
.home:hover {
background-color: #0EB323;
}
.about:hover {
background-color: #0EB323;
}
.projects:hover {
background-color: #0EB323;
}
.contact:hover {
background-color: #0EB323;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: rgba(34, 43, 47, .8);
width: 200px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #0EB323}
.dropdown:hover .dropdown-content {
display: block;
}
<!DOCTYPE HTML>
<html>
<title> Website </title>
<head>
<link rel = "stylesheet" href = "CSScode.css">
<script src = "JavaScript.js"></script>
<style>
</style>
</head>
<body>
<div class="listcontainer">
<ul class = "tab">
<li><a class = "home" href = "HomePage.html">Home</a></li>
<li><a class = "about" href = "#about"> About </a></li>
<li class = "dropdown">
<a class = "projects dropbtn"> Projects </a>
<div class = "dropdown-content">
Project 1
Project 2
Project 3
</div>
<li><a class = "contact" href = "ContactPage.html"> Contact </a></li>
</ul>
</div>
</body>
</html>
Try this, it may help.
*body {
overflow-x :hidden;
}
I am trying to add a dropdown navigation on my navigation links so far it has been great but the only issue now which I can't work out the contact is not staying next to the Community instead it's going down one line how can i force it to stay inline with everything else?
and the drop is floating to the left for some reason so how can I bring that under the dropdown (I plan to add multiple drop downs)
<style>
body {
padding: 0; /* Gets rid of the automatic padding */
margin: 0; /* on HTML documents */
font-family: Lucida Grande, Helvetica, Arial, sans-serif;
font-size: 12px;
}
#navigation {
position: fixed;
float:right;
z-index:1;
top: 0;
width: 100%;
color: #ffffff;
height: 35px;
text-align: center;
padding-top: 15px;
/* Adds shadow to the bottom of the bar */
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
/* Adds the transparent background */
background-color: rgba(1, 1, 1, 0.8);
color: rgba(1, 1, 1, 0.8);
}
#navigation a {
font-size: 14px;
padding-left: 15px;
padding-right: 15px;
color: white;
text-decoration: none;
}
#navigation a:hover {
color: grey;
}
</style>
<style type="text/css">
ul {
list-style: none;padding: 0px;margin: 0px;
}
ul li {
display: block;position: relative;float: left;border:1px solid #000
}
li ul {
display: none;
}
ul li a {
display: block;background: #000;padding: 5px 10px 5px 10px;text-decoration: none;
white-space: nowrap;color: #fff;
}
ul li a:hover {
background: #f00;
}
li:hover ul {
display: block; position: absolute;
}
li:hover li {
float: none;
}
li:hover a {
background: #f00;
}
li:hover li a:hover {
background: #000;
}
#drop-nav li ul li {
border-top: 0px;
}
</style>
<!DOCTYPE html>
<html lang="en-US">
<head>
<link rel="stylesheet" href="main.css" type="text/css" />
<title>Static Navigation</title>
</head>
<body>
<div id="navigation">
Home
About
Social
Community
<li>Contact
<ul>
<li>General Inquiries</li>
<li>Ask me a Question</li>
</ul>
</li>
</div>
</body>
I added everything on one page so you can easily look at it and help with the problem
Thanks ;)
Add display: inline-block to your <li>.
JSfiddle Example
Well, if you are sure about width of navigation then dont go with "width:100%; " try to give width exactly where it supposed to be fit. Ex. Width: 900px;
You should put the all navigation links inside li tags,
<body>
<div id="navigation">
<ul>
<li>Home
</li>
<li>About
</li>
<li>Social
</li>
<li>Community
</li>
<li>Contact
<ul>
<li>General Inquiries
</li>
<li>Ask me a Question
</li>
</ul>
</li>
</ul>
</div>
</body>
JSFiddle Example