I watched a YouTube video on how to make a navigation menu using 's not 's. I am attempting to get the width of my navigation bar to 100% so it fills the width of the screen on all devices. I am happy with a my height of 30px. I also want the navigation bar to be centered, so if I add more tabs, it will fill the screen AND be centered automatically to 100%.Here is my code:
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>Kieran's Website</title>
</head>
<body>
<div id="body">
<div style="display:none">
<audio controls autoplay>
<source src="Audio/welcome 2.4.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
<img src="Images/web-development-banner.jpg" width="100%" height="400">
<h1 class="webheading">Website Developement</h1>
<div id="navMenu">
<ul>
<li>Learn HTML
<ul>
<li>1. Things You Need</li>
<li>2. Setting Up Your Website Folders</li>
<li>3. Extra Information</li>
<li>4. HTML Layout</li>
</ul>
</li>
</ul>
<ul>
<li>Learn HTML
<ul>
<li>1. Things You Need</li>
<li>2. Setting Up Your Website Folders</li>
<li>3. Extra Information</li>
<li>4. HTML Layout</li>
</ul>
</li>
</ul>
<ul>
<li>Learn HTML
<ul>
<li>1. Things You Need</li>
<li>2. Setting Up Your Website Folders</li>
<li>3. Extra Information</li>
<li>4. HTML Layout</li>
</ul>
</li>
</ul>
<ul>
<li>Learn HTML
<ul>
<li>1. Things You Need</li>
<li>2. Setting Up Your Website Folders</li>
<li>3. Extra Information</li>
<li>4. HTML Layout</li>
</ul>
</li>
</ul>
<br class="clearFloat">
</div>
...There is more but it is irrelivant...
CSS:
#body {
background: url(Images/bigimage.jpg);
background-color:#000000;
background-size: 100% 100%;
width: auto;
height: auto;
background-repeat: no-repeat;
background-attachment: fixed;
margin: 0px;
margin-top: 0px;
color: #FFFFFF;
}
#navMenu {
margin: 0 auto;
padding: 0;
width: 100%;
}
#navMenu ul {
margin: 0;
padding: 0;
line-height: 30px;
}
#navMenu li {
margin: 0;
padding: 0;
list-style: none;
float: left;
position: relative;
background: #999;
}
#navMenu ul li a {
text-align: center;
font-weight: bold;
font-family: "Comic Sans MS", cursive;
text-decoration: none;
height: 30px;
width: 150;
display: block;
color: #FFF;
border: 1px solid #FFF;
text-shadow: 1px 1px 1px #000
}
#navMenu ul ul {
position: absolute;
visibility: hidden;
top: 32px;
}
#navMenu ul li:hover ul {
visibility: visible;
}
#navMenu li:hover {
background: #09F;
}
#navMenu ul li:hover ul li a:hover {
background: #CCC;
color: #000;
}
#navMenu a:hover {
color: #000
}
.clearFloat {
clear: both;
margin: 0;
padding: 0;
}
#body {
background: url(Images/bigimage.jpg);
background-color:#000000;
background-size: 100% 100%;
width: auto;
height: auto;
background-repeat: no-repeat;
background-attachment: fixed;
margin: 0px;
margin-top: 0px;
color: #FFFFFF;
}
#navMenu {
margin: 0 auto;
padding: 0;
width: 100%;
text-align:center;
display:table;
}
#navMenu ul {
margin: 0;
padding: 0;
line-height: 30px;
display: table-cell;
}
#navMenu li {
margin: 0;
padding: 0;
list-style: none;
float: none;
position: relative;
background: #999;
}
#navMenu ul li a {
text-align: center;
font-weight: bold;
font-family: "Comic Sans MS", cursive;
text-decoration: none;
height: 30px;
display: block;
color: #FFF;
border: 1px solid #FFF;
text-shadow: 1px 1px 1px #000
}
#navMenu ul ul {
position: absolute;
visibility: hidden;
top: 32px;
}
#navMenu ul li:hover ul {
visibility: visible;
}
#navMenu li:hover {
background: #09F;
}
#navMenu ul li:hover ul li a:hover {
background: #CCC;
color: #000;
}
#navMenu a:hover {
color: #000
}
.clearFloat {
clear: both;
margin: 0;
padding: 0;
}
<ul>
<li>Learn HTML
<ul>
<li>1. Things You Need</li>
<li>2. Setting Up Your Website Folders</li>
<li>3. Extra Information</li>
<li>4. HTML Layout</li>
</ul>
</li>
</ul>
<div id="body">
<div style="display:none">
<audio controls autoplay>
<source src="Audio/welcome 2.4.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
<img src="Images/web-development-banner.jpg" width="100%" height="400">
<h1 class="webheading">Website Developement</h1>
<div id="navMenu">
<ul>
<li>Learn HTML
<ul>
<li>1. Things You Need</li>
<li>2. Setting Up Your Website Folders</li>
<li>3. Extra Information</li>
<li>4. HTML Layout</li>
</ul>
</li>
</ul>
<ul>
<li>Learn HTML
<ul>
<li>1. Things You Need</li>
<li>2. Setting Up Your Website Folders</li>
<li>3. Extra Information</li>
<li>4. HTML Layout</li>
</ul>
</li>
</ul>
<ul>
<li>Learn HTML
<ul>
<li>1. Things You Need</li>
<li>2. Setting Up Your Website Folders</li>
<li>3. Extra Information</li>
<li>4. HTML Layout</li>
</ul>
</li>
</ul>
<ul>
<li>Learn HTML
<ul>
<li>1. Things You Need</li>
<li>2. Setting Up Your Website Folders</li>
<li>3. Extra Information</li>
<li>4. HTML Layout</li>
</ul>
</li>
</ul>
<br class="clearFloat">
</div>
Related
I'm trying to create a dropdown menu, but for some reason, I cannot find a way to make its width the same as each <li>in nav.
/* GENERAL STYLES */
* {
margin: 0px;
padding: 0px;
}
body {
background-image: url("../img/paven.png");
}
#font-face {
font-family: "nevis";
src: url("../fonts/nevis.ttf");
}
/* MENU */
nav {
width: 100%;
height: 40px;
background-color: #333;
}
nav > div {
width: 1000px;
margin: 0px auto;
}
nav > div > ul {
float: left;
}
nav > div > ul > li {
list-style: none;
height: 40px;
padding-left: 20px;
padding-right: 20px;
border-right: 1px solid gray;
}
nav > div > ul > li > a {
display: block;
height: 40px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
color: white;
line-height: 35px;
}
nav > div > ul > li:hover {
cursor: pointer;
background-color: #70B231;
}
/* SUBMENU */
nav > div > ul > li > ul {
position: absolute;
width: 100px;
background-color: #70B231;
}
<!-- MENU -->
<nav>
<div>
<ul>
<li>Home</li>
</ul>
<ul>
<li>Content</li>
</ul>
<ul>
<li>Requirements</li>
</ul>
<ul>
<li>
Languages
<ul>
<li>JavaScript</li>
<li>CSS</li>
<li>HTML</li>
</ul>
</li>
</ul>
<ul>
<li>
Frameworks
<ul>
<li>Less</li>
<li>Sass</li>
<li>Flexbox</li>
</ul>
</li>
</ul>
<ul>
<li>Projects</li>
</ul>
<ul>
<li>Instructor</li>
</ul>
<ul>
<li>Reviews</li>
</ul>
<ul>
<li>Blog</li>
</ul>
<ul>
<li>Contact</li>
</ul>
</div>
</nav>
As you can see, I've tried setting a width for each <ul>, but they are not well aligned to the <li> they belong to:
I would like to achieve something like this:
Here you go, I've edited a few thing.
I removed the padding on the main menu li element and placed it on the a instead so the submenu can take the full width.
Added postition: relative; to the main menu li so the submenu postition: absolute will be relative to the main menu item
Made the submenu full width with width 100% and removed the list styles.
added some padding to the submenu li
/* GENERAL STYLES */
* {
margin: 0px;
padding: 0px;
}
body {
background-image: url("../img/paven.png");
}
#font-face {
font-family: "nevis";
src: url("../fonts/nevis.ttf");
}
/* MENU */
nav {
width: 100%;
height: 40px;
background-color: #333;
}
nav>div {
width: 1000px;
margin: 0px auto;
}
nav>div>ul {
float: left;
}
nav>div>ul>li {
list-style: none;
height: 40px;
position: relative;
border-right: 1px solid gray;
}
nav>div>ul>li>a {
display: block;
height: 40px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
color: white;
line-height: 35px;
padding-left: 20px;
padding-right: 20px;
}
nav>div>ul>li:hover {
cursor: pointer;
background-color: #70B231;
}
/* SUBMENU */
nav>div>ul>li>ul {
position: absolute;
width: 100%;
background-color: #70B231;
list-style: none;
}
nav>div>ul>li>ul>li {
padding: 3px 10px;
}
<!-- MENU -->
<nav>
<div>
<ul>
<li>Home</li>
</ul>
<ul>
<li>Content</li>
</ul>
<ul>
<li>Requirements</li>
</ul>
<ul>
<li>
Languages
<ul>
<li>JavaScript</li>
<li>CSS</li>
<li>HTML</li>
</ul>
</li>
</ul>
<ul>
<li>
Frameworks
<ul>
<li>Less</li>
<li>Sass</li>
<li>Flexbox</li>
</ul>
</li>
</ul>
<ul>
<li>Projects</li>
</ul>
<ul>
<li>Instructor</li>
</ul>
<ul>
<li>Reviews</li>
</ul>
<ul>
<li>Blog</li>
</ul>
<ul>
<li>Contact</li>
</ul>
</div>
</nav>
I'm having trouble aligning my drop down menu in my nav bar, I've tried every suggestion out there. I've tried left, float: left, right, and pretty much everything else. I think it is possibly something interfering. The drop down menu has everything aligned from center to right of the parent menu item.
https://jsfiddle.net/ethacker/j7tgq95j/3/
My html code:
<header>
<nav>
<h1> Welcome to Mommy Madness</h1>
<ul>
<li class="parentMenu">Home
<ul class="sub-menu">
<li>About</li>
<li>Contact</li>
</ul>
</li>
<li class="parentMenu">Pregnancy
<!--
Gender Predictions:
Old Wive's Tale
Boy vs Girl- The Ramzi Method
-->
<ul class="sub-menu">
<li>Advice</li>
<li>Gender Predictions</li>
<li>Trying To Conceive</li>
</ul>
</li>
<li class="parentMenu">All About Baby
<ul class="sub-menu">
<li>Fetal Development</li>
<li>Guidelines </li>
<li> Milestones</li>
</ul>
</li>
<li class="parentMenu">Party Momma
<!--
Birthdays - Link to 1-10th bdays.
-->
<ul class="sub-menu">
<li>Pregnancy Announcement</li>
<li>Gender Reveal</li>
<li>Baby Shower</li>
<li>Birth Announcement</li>
<li> Birthdays</li>
</ul>
</li>
<li class="parentMenu">Stations
<ul class="sub-menu">
<li>Hospital Bag</li>
<li>Diaper Bag</li>
<li>Changing Station</li>
<li>Baby Gear</li>
</ul>
</li>
<li class="parentMenu">Memory Markers
<!--
Drop Down Menu:
DIY
Purchases
(Both to have holiday/event selectors on right of page)
-->
<ul class="sub-menu">
<li>DIY</li>
<li>Purchases</li>
</ul>
</li>
<li class="parentMenu">Reviews
<ul class="sub-menu">
<li>Games</li>
<li>Gear</li>
<li>Learning</li>
</ul>
</li>
<li class="parentMenu">Blog
<ul class="sub-menu">
<li>Fit Momma</li>
<li>Minimal Momma</li>
<li>Modern Momma</li>
<li>Organic Momma</li>
<li>Organizing Queen</li>
<li>Savings Savvy</li>
<li>Tech Savvy</li>
<li>Traditional Momma</li>
</ul>
</li>
</ul>
</nav>
My css code:
body {
background-color: beige;
color: lightblue;
padding: 0;
margin:0;
}
header {
background-color: lightblue;
padding: 5px 0;
margin: 0;
}
header h1 {
color: cadetblue;
font-family: Arial;
margin: 0;
padding: 5px 15px;
display: inline;
}
.navMenu{
display: inline;
margin: 0;
}
.navMenu .parentMenu {
display: inline-block;
list-style-type: none;
background-color: lightgray;
padding: 5px 10px;
border: thin solid darkgray;
border-radius: 3px;
color: honeydew;
position: relative;
margin: 0;
}
.navMenu .parentMenu a{
color: azure;
}
.navMenu .parentMenu .sub-menu{
display: none;
}
.navMenu .parentMenu:hover .sub-menu{
display: block;
position: absolute;
list-style-type: none;
margin:0;
}
.parentMenu:hover .sub-menu li{
border: thin solid darkgray;
padding: 4%;
background-color: lightgray;
color: honeydew;
text-align: left;
white-space: nowrap;
width: 100%;
list-style-type: none;
margin: 0;
}
.parentMenu .sub-menu li:hover {
background-color: lightsteelblue;
}
.section {
background-color: wheat;
color: darkslategray;
padding: 5px;
float: left;
display: inline;
width: 63%;
margin: 0 1% 1% 1%;
border-radius: 10px;
border: thin solid khaki;
box-shadow: lightgray;
}
#about {
float: right;
width: 30%;
margin: 1% 1% 0 0;
text-align: center;
}
#home{
margin: 1% 0 1% 1%;
}
h4, h3 {
color: lightseagreen;
}
This will align the submenu to the left:
.navMenu .parentMenu .sub-menu {
display: none;
position:absolute;
list-style-type: none;
padding:0;
margin: 0;
left:-1px;
top:27px;
}
.navMenu .parentMenu:hover .sub-menu {
display: block;
}
https://jsfiddle.net/am13qur4/
you did not specify where you want to align your drop down elements. Do you want to align all to the right, center or left. I assumed left so try adding the code below. You may need to adjust the left attribute's value and your hover background styling too.
.sub-menu a{
position: absolute;
left: 3%;
}
Let me know if this helps. Stay warm!
This is how navigation bar image looks like:
Code Snippet
main nav #wrap {
width: 100%;
height: 50px;
margin: 0;
z-index: 2;
position: relative;
background-color: #3a3a3a; }
main nav #wrap .navbar {
height: 40px;
padding: 0;
margin: 0;
position: absolute; }
main nav #wrap .navbar li {
height: auto;
width: 150px;
float: left;
text-align: center;
list-style: none;
font: normal bold 12px/1.2em Arial, Verdana, Helvetica;
padding: 0;
margin: 0;
top: 20px;
background: #3a3a3a; }
main nav #wrap .navbar a {
padding: 18px 0;
text-decoration: none;
color: white;
display: block; }
main nav #wrap .navbar li:hover, main nav #wrap .navbar a:hover {
background-color: #54879d; }
main nav #wrap .navbar li ul {
display: none;
height: auto;
margin: 0;
padding: 0; }
main nav #wrap .navbar li:hover ul {
display: block; }
main nav #wrap .navbar li ul li {
background-color: #54879d; }
main nav #wrap .navbar li ul li a {
border-left: 1px solid #1f5065;
border-right: 1px solid #1f5065;
border-top: 1px solid #74a3b7;
border-bottom: 1px solid #1f5065; }
<main>
<nav>
<div id="wrap">
<ul class="navbar">
<li>Home</li>
<li>Retrievals
<ul>
<li>Data Listing</li>
<li>Web Scheduling</li>
<li>Google Maps Application</li>
</ul>
</li>
<li>Reporting
<ul>
<li><a href="#" >Ad Hoc Report</a></li>
<li>Drill Down Report</li>
<li>Ranking Report</li>
</ul>
</li>
<li>Business Intelligence
<ul>
<li>Business Dashboard</li>
<li>Web Pivot Table</li>
<li>Interactive Report</li>
<li>What-If Analysis</li>
</ul>
</li>
<li>Data Maintenance
<ul>
<li>Database CRUD</li>
<li>Database Update</li>
<li>Order Entry</li>
<li>Drag-and-Drop Application</li>
</ul>
</li>
<li>B2B Portal
<ul>
<li>B2B Portal</li>
<li>Secure Data-Driven Listings</li>
<li>Secure Shopping Cart</li>
</ul>
</li>
</ul>
</div>
</nav>
</main>
I have this navigation bar and I am trying to replace that gray color with the one of the above attached image. As you can see, it is not a simple color. It has small transparent dots.
Is there anyway I can copy that color?
PS: I do not want to use the image.
As I mentioned on my comment, there's no css method for adding noise. However, you can embed images in html by base64 encoding them. I've pinched the code from this answer, it's transparent so can be applied over any colour. If you need a different level/style of noise then you'll have to create it and base64 encode it (a simple google search will bring plenty of options).
Anyway, hope this helps!
main nav #wrap {
width: 100%;
height: 50px;
margin: 0;
z-index: 2;
position: relative;
background-color: #3a3a3a;
background-image: url(data:image/png;base64,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);
}
main nav #wrap .navbar {
height: 40px;
padding: 0;
margin: 0;
position: absolute;
}
main nav #wrap .navbar li {
height: auto;
width: 150px;
float: left;
text-align: center;
list-style: none;
font: normal bold 12px/1.2em Arial, Verdana, Helvetica;
padding: 0;
margin: 0;
top: 20px;
background-color: #3a3a3a;
background-image: url(data:image/png;base64,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);
}
main nav #wrap .navbar a {
padding: 18px 0;
text-decoration: none;
color: white;
display: block;
}
main nav #wrap .navbar li:hover,
main nav #wrap .navbar a:hover {
background-color: #54879d;
}
main nav #wrap .navbar li ul {
display: none;
height: auto;
margin: 0;
padding: 0;
}
main nav #wrap .navbar li:hover ul {
display: block;
}
main nav #wrap .navbar li ul li {
background-color: #54879d;
}
main nav #wrap .navbar li ul li a {
border-left: 1px solid #1f5065;
border-right: 1px solid #1f5065;
border-top: 1px solid #74a3b7;
border-bottom: 1px solid #1f5065;
}
<main>
<nav>
<div id="wrap">
<ul class="navbar">
<li>Home</li>
<li>Retrievals
<ul>
<li>Data Listing</li>
<li>Web Scheduling</li>
<li>Google Maps Application</li>
</ul>
</li>
<li>Reporting
<ul>
<li><a href="#" >Ad Hoc Report</a></li>
<li>Drill Down Report</li>
<li>Ranking Report</li>
</ul>
</li>
<li>Business Intelligence
<ul>
<li>Business Dashboard</li>
<li>Web Pivot Table</li>
<li>Interactive Report</li>
<li>What-If Analysis</li>
</ul>
</li>
<li>Data Maintenance
<ul>
<li>Database CRUD</li>
<li>Database Update</li>
<li>Order Entry</li>
<li>Drag-and-Drop Application</li>
</ul>
</li>
<li>B2B Portal
<ul>
<li>B2B Portal</li>
<li>Secure Data-Driven Listings</li>
<li>Secure Shopping Cart</li>
</ul>
</li>
</ul>
</div>
</nav>
</main>
I have looked a few questions so far that are very similar to this one, but still can't find the answer to my question. (Please note that I am new to HTML and that this is my first post).
I want to have a navigation bar that spans the width of the page no matter the width of the screen that it is being viewed on. I tried making the 's width 100%, but it still did not do anything.
The code for the navigations bar is here:
<!DOCTYPE html>
<html>
<head>
<style>
nav {
width: 100%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a {
display: block;
width: 60px;
background-color: #dddddd;
border-color: #ffffff;
text-align: center;
text-decoration: none;
padding: 10px;
margin: 3px;
border-radius: 4px;
}
a:hover {
font-weight: bold;
background-color: #9b9b9b;
}
a:active {
color: #ff0000;
}
</style>
</head>
<body>
<nav>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</nav>
</body>
</html>
Can you please help me to find a way to make the navigation bar span the width of the page?
Thanks!
If you want to expand the li to be the same size and fill the width of the ul, flexbox can do that.
Modern Browsers - Flexbox
nav {
width: 100%;
background: #333;
margin-bottom: 1em;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
display: flex;
}
li {
flex:1 0 auto;
}
a {
display: block;
/*width: 60px;*/
background-color: #dddddd;
border-color: #ffffff;
text-align: center;
text-decoration: none;
padding:10px 0;
margin: 3px;
border-radius: 4px;
}
a:hover {
font-weight: bold;
background-color: #9b9b9b;
}
a:active {
color: #ff0000;
}
<nav>
<ul>
<li>Home
</li>
<li>News
</li>
<li>Contact
</li>
<li>About
</li>
</ul>
</nav>
<nav>
<ul>
<li>Home
</li>
<li>News
</li>
<li>Contact
</li>
<li>About
</li>
<li>Home
</li>
<li>News
</li>
<li>Contact
</li>
<li>About
</li>
</ul>
</nav>
Alternative Solution: Old Browsers - CSS Tables
nav {
width: 100%;
background: #333;
margin-bottom: 1em;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
display: table;
width: 100%;
table-layout: fixed;
}
li {
display: table-cell;
}
a {
display: block;
/*width: 60px;*/
background-color: #dddddd;
border-color: #ffffff;
text-align: center;
text-decoration: none;
padding: 10px;
margin: 3px;
border-radius: 4px;
}
a:hover {
font-weight: bold;
background-color: #9b9b9b;
}
a:active {
color: #ff0000;
}
<nav>
<ul>
<li>Home
</li>
<li>News
</li>
<li>Contact
</li>
<li>About
</li>
</ul>
</nav>
<nav>
<ul>
<li>Home
</li>
<li>News
</li>
<li>Contact
</li>
<li>About
</li>
<li>Home
</li>
<li>News
</li>
<li>Contact
</li>
<li>About
</li>
</ul>
</nav>
You have already given your nav a width of 100%. Now try adding a width to your LI element in your CSS to evenly distribute them across the 100% width of the nav.
li {
float: left;
width:25%;
}
nav is already 100% width,with this css configuration.Give it some background you will be able to see it.
So right how, the navigation bar is spanning the width of the page, however the objects inside aren't large enough to fill the gap. This can be seen if you add a background color to the navigation bar. What you might consider is center-aligning the objects within the nav bar or expanding the width of each object to near 25%
Are you trying to make the nav tag expand from window edge to window edge?
If so you will want to remove the margin on your body:
body {
margin: 0;
}
Screenshot of the header that's needing this work:
As you can see, the menu is below the logo. I was wanting the menu beside it, to the right of the logo. I don't know if it's possible, but if it is, I could use some help, please.
Here's the code for everything, separated for your convenience.
The menu and logo in their divs:
<div id="wrapper">
<div id="body-wrapper">
<div class="head">
<div class="head-wrapper">
<div class="logo">
<img src="http://i.imgur.com/sDnntOE.png">
<ul>
<li>Home</li>
<li>About Us
<ul>
<li>The Team</li>
<li>History</li>
</ul>
</li>
<li>Products
<ul>
<li>Chaotix Browser</li>
<li>Useful Beta 1.7.5</li>
<li>Chaotix Cleaner 1.4</li>
<li>Forum</li>
<li>CDev</li>
<li>Infinite-PVP</li>
<li>Ulta-Craft</li>
</ul>
</li>
<li>Contact Us
<ul>
<li>E-Mail</li>
<li>News Letter</li>
<li>Social Mediar</li>
</ul>
</li>
<li>Divisions
<ul>
<li>Gaming</li>
<li>Films</li>
</ul>
</li>
<li>Chaotix! Forum</li>
<li>Partnerships
<ul>
<li>GameFanShop</li>
<li>Forumotion</li>
</ul>
</li>
</ul>
The CSS:
<style>
*{
background-image:url('http://i.imgur.com/0u7sBsT.png');
background-color:#999999;
font-family:Tahoma;color:white;
}
div.head{
text-align:Center;
padding-top:10px;
}
div.body{
padding-top:100px;
padding-left:300px;
padding-right:300px;
text-align:center;
}
div.logo{
float:left;
}
a{
color:white;
}
a:hover{
color:gray;
}
/* Main menu
------------------------------------------*/
ul{
font-family: Lato,Tahoma,Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
padding-left:25px;
}
ul li{
display: block;
position: relative;
float: left;
}
li ul{
display: none;
}
ul li a{
display: block;
text-decoration: none;
color: #FFFFFF;
border-top: 1px solid #000000;
padding: 5px 15px 5px 15px;
background: #000000;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover{
background: #999999;
}
li:hover ul{
display: block;
position: absolute;
}
li:hover li{
float: none;
font-size: 11px;
}
li:hover a{
background: #000000;
}
li:hover li a:hover{
background: #999999;
}
</style>
Add your css
.logo img
{
float:left;
}
.logo ul
{
float:left;
}
It working ok. Hope this help!