i've a menu with sub menus in it, i've added border at bottom while hovering but when i hover on the menu the menu height increases a bit, the whole menu takes a space at top and bottom when i put it in a div.
here is my fiddle : http://jsfiddle.net/p7Nsf/
<div class="head"></div>
<div class="menudiv">
<div class="menu">
<ul>
<li>Home</li>
<li>About
<ul>
<li>School</li>
<li>Vision and Mission </li>
<li>Principal’s desk
<li>Management
</ul> </li>
<li>Admission
<ul>
<li>Overview</li>
<li>Download application form</li>
</ul> </li>
<li>Gallery</li>
<li>School Calander</li>
<li>News & Events</li>
<li>Career</li>
<li>Contact</li>
</ul>
</div>
</div><!-- menu div ends-->
<div class="foot"></div>
CSS
.menudiv
{
width:980px;
}
.menu {
font-family: 'Open Sans', sans-serif;
font-size:14px;
}
.menu ul ul {
display: none;
}
.menu ul li:hover > ul {
display: block;
}
.menu ul {
background: #111312;
list-style: none;
position: relative;
display: inline-table;
border:3px solid #111312;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.menu ul:after {
content: "";
clear: both;
display: block;
}
.menu ul li {
float: left;
}
.menu ul li:hover {
background: #111312;
border-bottom: 3px solid #fff;
}
.menu ul li:hover a {
color: #fff;
}
.menu ul li a {
display: block;
padding-top: 10px; padding-left: 25px; padding-right: 25px; padding-bottom: 10px;
color: #fff;
text-decoration: none;
}
.menu ul ul {
background: #111312;
padding: 0;
position: absolute;
top: 100%;
}
.menu ul ul li {
float: none;
position: relative;
}
.menu ul ul li a {
padding: 10px;
color:#000;
display: block;
}
.menu ul ul li a:hover {
background: #111312;
color: #fff;
}
.menu ul ul ul {
position: absolute;
left: 100%;
top:0;
padding: 0;
}
.menu ul ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid pink;
position: relative;
}
.menu ul ul ul li a {
padding: 10px;
color: #fff;
display: block;
}
.menu ul ul ul li a:hover {
background: #95CEF1;
color: #000;
}
.menu ul ul ul ul {
position: absolute;
left: 100%;
top:0;
}
.head
{
width:500px;
height:200px;
background:#789;
}
.foot
{
width:500px;
height:200px;
background:#123;
}
Try this, your menu item jumps because you are adding border to the item so it increases its height by the 3 px border
.menu ul li {
float: left;
border-bottom: 3px solid transparent;
}
http://jsfiddle.net/p7Nsf/1/
reduce padding on the anchor to compensate for the 3px
.menu ul li a {
padding-bottom: 7px;
}
http://jsfiddle.net/p7Nsf/2/
Update
.menu ul {
background: none repeat scroll 0 0 #111312;
border: 3px solid #111312;
display: inline-table;
list-style: none outside none;
margin: 0;
padding: 0;
position: relative;
}
I removed the display prop
http://jsfiddle.net/p7Nsf/4/
Related
I have a hovering drop down menu, after putting a border on hover, my dropdown menu overlaps with the menu. Tried to add padding but it's even worse. How can you adjust the position of the dropdown, knowing I have a 5px border transparent when not hovering, transforming into a 5px border solid at bottom when hovering?
#nav {
background-color: #e26a63;
}
#wrap {
padding-left: 60px;
height: 100px;
width: 100%;
margin: 0 auto;
display: table-cell;
vertical-align: bottom;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
min-width: 200px;
}
#nav ul li {
display: inline-block;
border: 5px solid transparent;
}
#nav ul li:hover {
background-color: #cb5f59;
border-bottom: 5px solid #9e4a45;
}
#nav ul li a, visited {
color: white;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #e26a63;
border-top: 0;
margin-left: -5px;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a:hover {
color: white;
}
<div id="nav">
<div id="wrap">
<ul>
<li>Home</li><li>
Study</li><li>
Games
<ul>
<li>Riddles</li><li>
Flip card game</li><li>
Spot the mistake</li><li>
Multiple choice</li>
</ul>
</li><li>
Read</li><li>
Contact</li><li>
About Us</li>
</ul>
</div>
</div>
Short answer is to add margin-top: 5px; to #nav ul ul, where 5px is the same value of the bottom border width.
Note the following set of style outputs a trapezoid shape1 bottom border on hover.
#nav ul li { border: 5px solid transparent; }
#nav ul li:hover { border-bottom: 5px solid #9e4a45; }
Change border in first line to border-bottom it will then output a real rectangle shape.
I also reorganized the CSS table layout, make the table to be centered automatically (I guess you wanted that, but it's easy to change if not). And removed the border style in drop down items.
Jsfiddle Example
#nav {
background-color: #e26a63;
}
#wrap {
display: table;
height: 100px;
margin: 0 auto;
}
#nav ul {
padding: 0;
margin: 0;
display: table-cell;
vertical-align: bottom;
}
#nav ul li {
display: inline-block;
border-bottom: 5px solid transparent;
}
#nav ul li a {
display: block;
padding: 15px;
text-decoration: none;
color: white;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #e26a63;
margin-top: 5px;
}
#nav ul ul li {
display: block;
min-width: 200px;
}
/* hover */
#nav ul li:hover {
background-color: #cb5f59;
border-bottom-color: #9e4a45;
}
#nav ul li:hover ul {
display: block;
}
#nav ul li:hover li {
border-bottom-width: 0;
}
<div id="nav">
<div id="wrap">
<ul>
<li>Home</li><li>
Study</li><li>
Games
<ul>
<li>Riddles</li><li>
Flip card game</li><li>
Spot the mistake</li><li>
Multiple choice</li>
</ul>
</li><li>
Read</li><li>
Contact</li><li>
About Us</li>
</ul>
</div>
</div>
In addition, you can also use :after + background to get the same bottom border style.
Jsfiddle Example
#nav {
background-color: #e26a63;
}
#wrap {
display: table;
height: 100px;
margin: 0 auto;
}
#nav ul {
padding: 0;
margin: 0;
display: table-cell;
vertical-align: bottom;
}
#nav ul li {
display: inline-block;
}
#nav ul li a {
display: block;
padding: 15px;
text-decoration: none;
color: white;
}
#nav ul li:after {
content: "";
display: block;
height: 5px;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #e26a63;
margin-top: 5px;
}
#nav ul ul li {
display: block;
min-width: 200px;
}
/* hover */
#nav ul li:hover {
background-color: #cb5f59;
}
#nav ul li:hover:after {
background: #9e4a45;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul li:after {
height: 0;
}
<div id="nav">
<div id="wrap">
<ul>
<li>Home</li><li>
Study</li><li>
Games
<ul>
<li>Riddles</li><li>
Flip card game</li><li>
Spot the mistake</li><li>
Multiple choice</li>
</ul>
</li><li>
Read</li><li>
Contact</li><li>
About Us</li>
</ul>
</div>
</div>
1 The Shapes of CSS - https://css-tricks.com/examples/ShapesOfCSS/
Because you've integrated your dropdown inside your header it might resize the header if you'd just make it visible.
An easy solution is to add something like this:
ul li ul{
position: absolute;
top: 58px;
}
By making this element absolute we "break" it out of the header code.
Note: this prabably isn't the perfect code, but it might give you a direction.
Your ul is absolute positioned, so it is implicitly at top: 0px,
Just set this to 5px to compensate the border size
#nav ul ul {
top: 5px; /* added */
}
#nav {
background-color: #e26a63;
}
#wrap {
padding-left: 60px;
height: 100px;
width: 100%;
margin: 0 auto;
display: table-cell;
vertical-align: bottom;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
min-width: 200px;
}
#nav ul li {
display: inline-block;
border: 5px solid transparent;
}
#nav ul li:hover {
background-color: #cb5f59;
border-bottom: 5px solid #9e4a45;
}
#nav ul li a, visited {
color: white;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #e26a63;
border-top: 0;
margin-left: -5px;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a:hover {
color: white;
}
<div id="nav">
<div id="wrap">
<ul>
<li>Home</li><li>
Study</li><li>
Games
<ul>
<li>Riddles</li><li>
Flip card game</li><li>
Spot the mistake</li><li>
Multiple choice</li>
</ul>
</li><li>
Read</li><li>
Contact</li><li>
About Us</li>
</ul>
</div>
</div>
you can change the border to box-shadow and a box shadow does not take up place from the box model
#nav ul li:hover {
background-color: #cb5f59;
box-shadow: 0 -2.2px 0 #9e4a45 inset,0 0 0 #9e4a45;
}
I have noticed my nav bar is transparent and I would like it to not be. I have no previous opacity/transparency set that would cause it to be inheriting the property. I would like to make my nav bar non transparent.
Here is the CSS:
nav {
margin: 20px auto;
text-align: center;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
font-size: 25px;
background: white;
padding: 0px;
border-radius: 10px;
border-style: solid;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: black;
}
nav ul li:hover a {
opacity: 1;
color: white;
}
nav ul li a {
display: block;
padding: 15px 20px;
color: black;
text-decoration: none;
}
nav ul ul {
background: #000000;
border-radius: 0px 0px 10px 10px;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li {
float: none;
}
nav ul ul li a {
padding: 15px 20px;
}
nav ul ul li a:hover {
background: #2E2E2E;
border-radius: 10px;
}
#welcome_paragraph {
position: relative;
top: 50px;
width: 500px;
margin: auto;
}
Here is the corresponding HTML:
<nav>
<ul>
<li>Information
<ul>
<li>Getting Started?</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</li>
<li>Starter Kits</li>
<li>Rebuildables
<ul>
<li>Genesis</li>
<li>Dripper</li>
<li>Silica/Cotton</li>
</ul>
</li>
<li>Mods
<ul>
<li>Mechanical</li>
<li>Variable Voltage</li>
</ul>
</li>
<li>Accessories</li>
</ul>
</nav>
<p id="welcome_paragraph">
Welcome, blah blah (this text shows through the nav bar)<br />
</p>
HTML
<nav>
<ul>
<li>Information
<ul>
<li>Getting Started?
</li>
<li>About Us
</li>
<li>Contact
</li>
</ul>
</li>
<li>Starter Kits
</li>
<li>Rebuildables
<ul>
<li>Genesis
</li>
<li>Dripper
</li>
<li>Silica/Cotton
</li>
</ul>
</li>
<li>Mods
<ul>
<li>Mechanical
</li>
<li>Variable Voltage
</li>
</ul>
</li>
<li>Accessories
</li>
</ul>
</nav>
<p id="welcome_paragraph">Welcome, blah blah (this text shows through the nav bar)
<br />
</p>
CSS
nav {
margin: 20px auto;
text-align: center;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
font-size: 25px;
background: white;
padding: 0px;
border-radius: 10px;
border-style: solid;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: black;
position:relative;
z-index:1;
}
nav ul li:hover a {
color: white;
position:relative;
z-index:1;
}
nav ul li a {
display: block;
padding: 15px 20px;
color: black;
text-decoration: none;
}
nav ul ul {
background: #000000;
border-radius: 0px 0px 10px 10px;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li {
float: none;
}
nav ul ul li a {
padding: 15px 20px;
}
nav ul ul li a:hover {
background: #2E2E2E;
border-radius: 10px;
}
#welcome_paragraph {
position: relative;
top: 50px;
width: 500px;
margin: auto;
color:white;
}
body
{
background-color:blue;
}
Updated CSS of yours
nav ul li:hover {
background: black;
position:relative;
z-index:1;
}
nav ul li:hover a {
color: white;
position:relative;
z-index:1;
}
Updated Fiddle
Have you tried;
nav {
background: white;
}
Elements are transparent unless you set a background on them or its inherited.
EDIT: If this doesn't help set up a fiddle for us jsfiddle.net.
In your css
nav ul {
font-size: 25px;
background: white;
padding: 0px;
border-radius: 10px;
border-style: solid;
list-style: none;
position: relative;
display: inline-table;
}
background is white.
If you change background to other colour may be your problem will go off. Hope it will help
Cheers !!
I have the horizontal menu. I have two problem with this menu are:
when I resize the browser, it will change to responsive menu.
when I open the page in big resolution screen, menu not came in full screen.
I don't need responsive menu.
How to rectify following things:
Each link should equal width
space between the link name and left/right border should equal.
menu should be 100% width.
My code is here:
<div class="menudiv">
<div class="menu">
<ul>
<li><img src="img/img1.png" alt="">Link1</li>
<li><img src="img/img1.png" alt="">Link1</li>
<li><img src="img/img1.png" alt="">Link1</li>
<li><img src="img/img1.png" alt="">Link1</li>
<li><img src="img/img1.png" alt="">Link1</li>
<li><img src="img/img1.png" alt="">Link1</li>
</ul>
</div>
</div>
<style>
.menudiv {
width: 94%;
margin:0 3%;
}
.menu {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
}
.menu ul ul {
display: none;
margin:4px 0 0 0;
}
.menu ul li:hover > ul {
display: block;
}
.menu ul {
background: #646464;
margin: 0;
list-style: none;
position: relative;
padding: 0;
-moz-border-radius: 13px;
-webkit-border-radius: 13px;
}
.menu ul:after {
content: "";
clear: both;
display: block;
}
.menu ul li {
float: left;
border-bottom: 3px solid transparent;
border-right: 1px solid #000;
}
.menu ul li:last-child{
border:none;
}
}
.menu ul li:hover {
background: #111312;
border-bottom: 3px solid #fff;
}
.menu ul li:hover a {
color: #fff;
}
.menu ul li a {
display: block;
padding: 11px 42px;
color: #fff;
text-decoration: none;
}
.menu ul ul {
background: #111312;
padding: 0;
position: absolute;
top: 100%;
}
.menu ul ul li {
float: none;
position: relative;
border-right:none;
}
.menu ul ul li a {
padding: 10px;
color: #000;
display: block;
}
.menu ul ul li a:hover {
background: #111312;
color: #fff;
}
.menu ul ul ul {
position: absolute;
left: 100%;
top: 0;
padding: 0;
}
.menu ul ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid pink;
position: relative;
}
.menu ul ul ul li a {
padding: 10px;
color: #fff;
display: block;
text-decoration: none;
}
.menu ul ul ul li a:hover {
background: #95CEF1;
color: #000;
}
.menu ul ul ul ul {
position: absolute;
left: 100%;
top: 0;
}
.head {
width: 500px;
height: 200px;
background: #789;
}
.foot {
width: 500px;
height: 200px;
background: #123;
}
</style>
You can use display:table, display:table-row and display:table-cell css properties to get what you wanted to achieve.
CSS:
.menu {
display: table;
width:100%;
}
.menu ul {
list-style:none; margin:0 padding:0;
display:table-row
}
.menu ul li{
display:table-cell;
}
.menu ul li > a {
display:block;
padding:2px 4px;
background:#333;
color:#fff;
text-decoration:none;
}
More customization can be done for this type of css structure also. Fiddle link http://jsfiddle.net/ZnRcY/
You can try this
Working Fiddle here
.menudiv {
width: 94%;
margin:0 3%;
-moz-border-radius: 13px;
-webkit-border-radius: 13px; background: #646464;
}
.menu {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
text-align:center;display:table;
width:100%;
}
.menu ul {
margin: 0;
list-style: none;
position: relative;
padding: 0;
display:table-row;
}
.menu ul li {
display:table-cell;
border-bottom: 3px solid transparent;
border-right: 1px solid #000;
}
Good Luck...
i've a menu and i would want to use border on left but here is the desired look how i wanted, i am able to add border but it will take full height of the li element and also i do not want that border to appear on sub menus
example : aunipark.in
here is my code :
html
<div class="menudiv">
<div class="menu">
<ul>
<li>Home</li>
<li>About
<ul>
<li>School</li>
<li>Vision and Mission </li>
<li>Principal’s desk
<li>Management
</ul> </li>
<li>Admission
<ul>
<li>Overview</li>
<li>Download application form</li>
</ul> </li>
<li>Gallery</li>
<li>School Calander</li>
<li>News & Events</li>
<li>Career</li>
<li>Contact</li>
</ul>
</div>
</div>
css
.menudiv
{
width:980px;
}
.menu {
font-family: 'Open Sans', sans-serif;
font-size:14px;
}
.menu ul ul {
display: none;
}
.menu ul li:hover > ul {
display: block;
}
.menu ul {
background: #111312;
margin: 0;
list-style: none;
position: relative;
padding: 0;
border:3px solid #111312;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.menu ul:after {
content: "";
clear: both;
display: block;
}
.menu ul li {
float: left;
border-bottom: 3px solid transparent;
}
.menu ul li:hover {
background: #111312;
border-bottom: 3px solid #fff;
}
.menu ul li:hover a {
color: #fff;
}
.menu ul li a {
display: block;
padding: 15px;
border-right: 3px solid #fff;
color: #fff;
text-decoration: none;
}
.menu ul ul {
background: #111312;
padding: 0;
position: absolute;
top: 100%;
}
.menu ul ul li {
float: none;
position: relative;
}
.menu ul ul li a {
padding: 10px;
color:#000;
display: block;
}
.menu ul ul li a:hover {
background: #111312;
color: #fff;
}
.menu ul ul ul {
position: absolute;
left: 100%;
top:0;
padding: 0;
}
.menu ul ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid pink;
position: relative;
}
.menu ul ul ul li a {
padding: 10px;
color: #fff;
display: block;
}
.menu ul ul ul li a:hover {
background: #95CEF1;
color: #000;
}
.menu ul ul ul ul {
position: absolute;
left: 100%;
top:0;
}
.head
{
width:500px;
height:200px;
background:#789;
}
.foot
{
width:500px;
height:200px;
background:#123;
}
and also the fiddle : jsfiddle.net/p7Nsf/9/
try this....
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Style Test</title>
<style type="text/css">
#list { background-color: aqua; }
.horizontal { display: inline; border-left: 2px solid; padding-left: 0.3em; }
.first { border-left: none; padding-left: 0; }
</style>
</head>
<body>
<div id="list">
<div>
<ul>
<li class="first">Home</li>
<li class="horizontal">About
<ul>
<li class="first">School</li>
<li class="horizontal">Vision and Mission </li>
<li class="horizontal">Principal’s desk
<li class="horizontal">Management
</ul> </li>
<li class="horizontal">Admission
<ul>
<li class="first">Overview</li>
<li class="horizontal">Download application form</li>
</ul> </li>
<li class="horizontal">Gallery</li>
<li class="horizontal">School Calander</li>
<li class="horizontal">News & Events</li>
<li class="horizontal">Career</li>
<li class="horizontal">Contact</li>
</ul>
</div>
</div>
</body>
</html>
Add the padding-top and bottom not to the anchor, but to the li. And give the anchor a border-right:
.menu > ul > li > a {
border-right: 2px solid white;
display: block;
padding-left: 25px;
padding-right: 25px;
}
.menu > ul > li:last-child > a {
border-right: 0;
}
Check here.
Like this
demo
css
.menudiv {
width: 788px;
margin:0 auto;
}
.menu {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
}
.menu ul ul {
display: none;
margin:4px 0 0 0;
}
.menu ul li:hover > ul {
display: block;
}
.menu ul {
background: #111312;
margin: 0;
list-style: none;
position: relative;
padding: 0;
border: 3px solid #111312;
-moz-border-radius: 13px;
-webkit-border-radius: 13px;
border-radius:13px;
}
.menu ul:after {
content: "";
clear: both;
display: block;
}
.menu ul li {
float: left;
border-bottom: 3px solid transparent;
border-right: 3px solid #fff;
}
.menu ul li:last-child{
border:none;
}
}
.menu ul li:hover {
background: #111312;
border-bottom: 3px solid #fff;
}
.menu ul li:hover a {
color: #fff;
}
.menu ul li a {
display: block;
padding: 15px;
color: #fff;
text-decoration: none;
}
.menu ul ul {
background: #111312;
padding: 0;
position: absolute;
top: 100%;
}
.menu ul ul li {
float: none;
position: relative;
border-right:none;
}
.menu ul ul li a {
padding: 10px;
color: #000;
display: block;
}
.menu ul ul li a:hover {
background: #111312;
color: #fff;
}
.menu ul ul ul {
position: absolute;
left: 100%;
top: 0;
padding: 0;
}
.menu ul ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid pink;
position: relative;
}
.menu ul ul ul li a {
padding: 10px;
color: #fff;
display: block;
text-decoration: none;
}
.menu ul ul ul li a:hover {
background: #95CEF1;
color: #000;
}
.menu ul ul ul ul {
position: absolute;
left: 100%;
top: 0;
}
.head {
width: 500px;
height: 200px;
background: #789;
}
.foot {
width: 500px;
height: 200px;
background: #123;
}
The border will always be as tall as the element, but you can draw a line and apply it to all the elements with
background:url(line.png) bottom right no-repeat;
This might be helpfull, I usually handle border lines in navigation with the help of "line-height" property, it allows to control the height borders from left or right sides. In other words you can change the height of a left/right border by changeing "line-height" property.
HTML
<div class="wrapper">
<div class="container">
<ul class="nav">
<li>My Wishlist</li>
<li>My Account</li>
<li>My Cart</li>
<li>Login</li>
</ul>
</div>
</div>
CSS
.wrapper{
background: #f1f1f1;
width: 100%;
border-top: 5px solid #d1b792;
border-bottom: 5px solid #d1b792;
padding-bottom: 1px;
}
.nav li{
display: inline-block;
margin-left: -4px;
}
.nav li a{
display: block;
font-size: 18px;
padding: 0px 12px 3px 12px;
margin: 5px 0;
color: #666694;
line-height: 12px;
border-right: 2px solid #4679BD;
text-decoration: none;
}
.nav li a:hover{
color: darkblue;
}
.nav li:last-child a{
border-right: none;
}
Here is the Fiddle: http://jsfiddle.net/johannesMt/Lt143z8x/
I have been working on a drop down navigation which I have got close to how I like but I'm having trouble figuring out how to get the Logo (which is really just h1 text) and the tagline, to line up with my navigation.
The html for the logo and tagline is:
<div class="logo grid_5 omega">
<ul>
<li><h1>karma.</h1></li>
<li><p id="tagline">A stop motion animation</p></li>
</ul>
</div>
And it's corresponding CSS is this so far:
/* Header (Logo) -------------------------------------------------- */
.header.grid_12.omega {
margin-top:40px;
box-shadow:0 3px 10px #222;
background:#FFFFFF;
}
.logo.grid_5.omega {
float:left;
}
The navigation's html is:
<nav class="grid_7 omega">
<ul>
<li>About</li>
<li>Process
<ul>
<li>Models</li>
<li>Backgrounds</li>
<li>Animation</li>
<li>Post-production</li>
</ul>
</li>
<li>Style</li>
<li>Reflection</li>
</ul>
</div>
</nav>
And it's CSS is:
/* Drop down nav ---------------------------------------- */
nav ul ul {
display:none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: #FFF;
padding: 0 20px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #4b545f;
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block; padding: 25px 40px;
color: #757575; text-decoration: none;
}
nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
nav ul ul li a:hover {
background: #4b545f;
}
However, as you can see: it's a little off:
http://imgur.com/HDofl9a
Give an id to your main ul and give some top margin?
HTML
<nav class="grid_7 omega">
<ul id="navi">
<li>About</li>
...
</ul>
</nav>
CSS
ul#navi{
margin:30px 0 0 0; /*adjust your top margin*/
}
I think you are looking for this
html
<div class="logo grid_5 omega">
<ul>
<li><h1>karma.</h1></li>
<li><p id="tagline">A stop motion animation</p></li>
</ul>
</div>
<nav class="grid_7 omega navigation">
<ul>
<li>About</li>
<li>Process
<ul>
<li>Models</li>
<li>Backgrounds</li>
<li>Animation</li>
<li>Post-production</li>
</ul>
</li>
<li>Style</li>
<li>Reflection</li>
</ul>
</div>
</nav>
css
.header.grid_12.omega {
margin-top:40px;
box-shadow:0 3px 10px #222;
background:#FFFFFF;
}
.logo.grid_5.omega {
float:left;
}
.logo.grid_5.omega li{
float: left;
line-height: 40px;
list-style-type: none;
margin-right: 25px;
padding-top: 14px;
}
.navigation{
float:left;
}
nav ul ul {
display:none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: #FFF;
padding: 0 20px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #4b545f;
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block; padding: 25px 40px;
color: #757575; text-decoration: none;
}
jsFiddle File