For some reason, my drop down menu is being pushed to the right. It's supposed to open up directly below the link someone is hovering over, but it opens about 30px to the right and I can't figure out why. You can see the issue in action when you scroll over "Work" on my website: http://www.noellesnotes.com
My code:
CSS
ul.site-navigation {
text-align: center;
list-style: none;
}
ul.site-navigation li a{
padding: 50px 0 47px 0;
font-family: 'Arvo', serif, Georgia;
width: 125px;
float: left;
letter-spacing: 4px;
text-transform: uppercase;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
color: rgb(82,82,82);
border-bottom: 3px solid transparent;
}
ul.site-navigation > li {
position: relative;
width: 125px;
float:left;
margin: 0;
}
ul.site-navigation a:hover{
font-weight: bold;
border-bottom: 3px solid rgb(4,141,195);
text-shadow: rgb(200, 200, 200) 1px 1px 0px;
padding: 97px 0 0 0;
}
ul.site-navigation ul {
list-style: none;
height: 50px;
left: 0;
z-index: 1000;
padding: 0;
display: none;
}
ul.site-navigation ul li {
float: none;
}
ul.site-navigation li:hover ul {
display: block;
position: absolute;
top: 100%;
left: 0;
}
ul.site-navigation ul li a {
font-weight: regular;
font-size: 16px;
text-shadow: none;
padding: 5px 10px;
width: auto;
height: auto;
text-transform: uppercase;
border: 2px solid #FFF;
color: #FFF;
margin: 5px 10px 0 0;
}
ul.site-navigation ul li a:hover {
font-weight: regular;
font-size: 16px;
text-shadow: none;
padding: 5px 10px;
width: auto;
height: auto;
text-transform: uppercase;
border: 2px solid #FFF;
color: #FFF;
}
.site-title a {
color: rgb(185,40,141);
font-family: 'Arvo', serif;
text-transform: uppercase;
font-size: 63px;
background-color: rgba(255,255,255,1);
text-align: center;
text-shadow: #FFF 1px 1px,#ccc 2px 2px;
width: 500px;
float: left;
padding-top: 13px;
font-weight: normal;
letter-spacing: normal;
}
.site-branding {
display: table;
width: 100%;
height: 400px;
font-family: 'Lato', verdana, san-serif;
font-size: 6em;
text-shadow:1px -1px rgba(242,141,89,0.2);
text-align: center;
text-transform: uppercase;
color: rgb(255,255,255);
background-image: url('http://www.noellesnotes.com/wp-content/themes/portfolio/images/lights.jpg');
background-attachment:fixed;
}
HTML:
<ul class="site-navigation">
<li>About</li>
<li>Work
<ul class="submenu">
<li>Seventeen.com</li>
<li>One Direction Connection</li>
</ul>
</li>
</ul>
You have a left margin on all uls that are direct children of lis. (li > ul {margin-left:1.5em})
Add Something like this to your css to override that for your menu:
ul.site-navigation > li > ul {
margin-left:-2.75em
}
I think its natural because li tag has ul tag
You can use margin-left:-2px to fix this
Related
I'm trying to make the links in the navigation bar go in the centre, if someone can tell me how to do this is, i'd be grateful. I have included the HTML and CSS code below.
<div class="menu">
<ul>
<li>Home</li>
<li>Home two</li>
<li>About</li>
<li>Basket</li>
<div class="clear"></div>
</ul>
<div class="clear"></div>
</div>
.menu {
width: 100%;
background: url('img/menu-bg.png') repeat-x;
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
height: auto;
display: block;
margin-top: 10px;
font-family: BentonSansBook, sans-serif;
position: relative;
padding: 10px;
display: block;
z-index: 10;
font-family: BentonSansBook, sans-serif;
-webkit-font-feature-settings: "liga" 0;
font-feature-settings: "liga" 0;
font-size: 12px;
line-height: 16px;
letter-spacing: .2em;
text-transform: uppercase;
font-weight: normal;
text-decoration: none;
cursor: pointer;
color: #000;
}
}
.menu ul {
list-style: none;
margin: 0;
}
.menu ul li {
list-style: none;
float: left;
display: block;
}
.menu ul li a {
color: #000;
display: block;
text-decoration: none;
font-weight: 700;
padding: 10px 15px;
text-transform: uppercase;
}
.menu ul li a:hover {
color: #fff;
background: #5d4442;
}
I think more useful CSS is:
.menu {
position: relative;
width: 100%;
margin-top: 10px;
padding: 10px;
background: url('img/menu-bg.png') repeat-x;
border-radius: 5px;
z-index: 10;
font: 400 12px/16px BentonSansBook, sans-serif;
-webkit-font-feature-settings: "liga" 0;
font-feature-settings: "liga" 0;
letter-spacing: .2em;
cursor: pointer;
}
.menu ul {
margin: 0;
display: flex;
flex-wrap: nowrap;
justify-content: center;
list-style: none;
}
.menu ul li a {
padding: 10px 15px;
font-weight: 700;
text-decoration: none;
text-transform: uppercase;
color: #000;
}
.menu ul li a:hover {
background: #5d4442;
color: #fff;
}
And delete CLEARFIX in html.
ok so i put a background and blocks in lists but now the text is hyperlinked and only the text is clickable. what am i doing wring? i need the whole box to be clickable and the text the be white until you scroll over it then it turns black. also, is there a way to make it on mobile that the boxes are closer together under each other?
body {
background: URL("https://lh3.googleusercontent.com/-lYQ3vQHE3Mo/VrVKGwg8pqI/AAAAAAAADMQ/QKjs5ALViKo/w530-d-h253-p-rw/desk%2Bbackground.png") #363634 no-repeat center top;
background-size: 100%;
background-color: #3D5771;
margin: 0;
padding: 0;
}
h1 {
position: absolute;
top: 23%;
left: 30%;
color: white;
font-family: Arial;
font-size: 4.6vw;
letter-spacing: 1px;
}
p {
position: absolute;
width: 250px;
top: -1px;
left: 15px;
height: 25px;
font-family: Arial;
}
ul {
word-spacing: .2em;
letter-spacing: .2em;
}
ul li {
font-family: Arial;
text-align: center;
vertical-align: middle;
line-height: 40px;
top: 43%;
display: inline-block;
margin-top: 250px;
margin-left: 115px;
letter-spacing: 1px;
word-spacing: normal;
background-color: rgba(5, 4, 2, 0.1);
border: 2px solid white;
color: white;
text-align: center;
text-decoration: none;
font-size: 90%;
width: 150px;
height: 40px;
}
ul li:link,
ul li:visited {
font-family: Arial;
text-align: center;
vertical-align: middle;
line-height: 40px;
display: inline-block;
margin-top: 250px;
margin-left: 115px;
letter-spacing: 1px;
word-spacing: normal;
background-color: rgba(5, 4, 2, 0.1);
border: 2px solid white;
font-size: 90%;
width: 150px;
height: 40px;
text-decoration: none;
color: white;
}
li {
text-decoration: none;
color: white;
}
ul li:hover,
ul li:active {
background-color: white;
color: black;
text-decoration: none;
}
<center>
<h1>A Girl With A Passion</h1>
</center>
<ul>
<li><strong>MY LIFE</strong>
</li>
<li><strong>PORTFOLIO</strong>
</li>
<li><strong>RESUME</strong>
</li>
<li><strong>ABOUT ME</strong>
</li>
</ul>
The text decoration is done on the anchor element I think, not the <li> tag.
Have you tried this?
ul li a,
ul li a {
text-decoration: none;
}
Full CSS/HTML:
body {
background: URL("https://lh3.googleusercontent.com/-lYQ3vQHE3Mo/VrVKGwg8pqI/AAAAAAAADMQ/QKjs5ALViKo/w530-d-h253-p-rw/desk%2Bbackground.png") #363634 no-repeat center top;
background-size: 100%;
background-color: #3D5771;
margin: 0;
padding: 0;
}
h1 {
position: absolute;
top: 23%;
left: 30%;
color: white;
font-family: Arial;
font-size: 4.6vw;
letter-spacing: 1px;
}
p {
position: absolute;
width: 250px;
top: -1px;
left: 15px;
height: 25px;
font-family: Arial;
}
ul {
word-spacing: .2em;
letter-spacing: .2em;
}
ul li {
font-family: Arial;
text-align: center;
vertical-align: middle;
line-height: 40px;
top: 43%;
display: inline-block;
margin-top: 250px;
margin-left: 115px;
letter-spacing: 1px;
word-spacing: normal;
background-color: rgba(5, 4, 2, 0.1);
border: 2px solid white;
color: white;
text-align: center;
text-decoration: none;
font-size: 90%;
width: 150px;
height: 40px;
}
ul li:link,
ul li:visited {
font-family: Arial;
text-align: center;
vertical-align: middle;
line-height: 40px;
display: inline-block;
margin-top: 250px;
margin-left: 115px;
letter-spacing: 1px;
word-spacing: normal;
background-color: rgba(5, 4, 2, 0.1);
border: 2px solid white;
font-size: 90%;
width: 150px;
height: 40px;
text-decoration: none;
color: white;
}
li {
text-decoration: none;
color: white;
}
ul li:hover,
ul li:active {
background-color: white;
color: black;
text-decoration: none;
}
ul li:hover a,
ul li a:active {
background-color: white;
color: black;
}
ul li a {
color: white;
text-decoration: none;
height: 100%;
width: 100%;
display: inline-block;
}
<center>
<h1>A Girl With A Passion</h1>
</center>
<ul>
<li><strong>MY LIFE</strong>
</li>
<li><strong>PORTFOLIO</strong>
</li>
<li><strong>RESUME</strong>
</li>
<li><strong>ABOUT ME</strong>
</li>
</ul>
Add this to your CSS to make the whole "box" clickable
ul li a {
display: inline-block;
height: 100%;
width: 100%;
color: white;
text-decoration: none;
}
And change this to get color right
ul li a:hover, ul li a:active {
background-color: white;
color: black;
}
Update: Base on your request, I made some markup changes, to make it more responsive
Snippet demo
html, body {
margin: 0;
padding:0;
}
body {
background:URL("https://lh3.googleusercontent.com/-lYQ3vQHE3Mo/VrVKGwg8pqI/AAAAAAAADMQ/QKjs5ALViKo/w530-d-h253-p-rw/desk%2Bbackground.png") #363634 no-repeat center top;
background-size: 100%;
background-color:#3D5771;
}
.wrapper {
padding-top: 10%;
}
h1 {
color: white;
font-family:Arial;
font-size: 4.6vw;
letter-spacing: 1px;
text-align: center;
}
ul {
word-spacing: .2em;
letter-spacing: .2em;
text-align: center;
margin: 0;
padding: 0;
}
ul li {
font-family:Arial;
text-align: center;
vertical-align: middle;
line-height: 40px;
display: inline-block;
background-color: rgba(5,4,2,0.1);
border: 2px solid white;
color: white;
font-size: 90%;
width: 150px;
height: 40px;
margin: 30px;
}
ul li a:hover, ul li a:active {
background-color: white;
color: black;
}
ul li a {
display: inline-block;
height: 100%;
width: 100%;
text-decoration: none;
color: white;
}
#media screen and (max-width: 700px) {
.wrapper {
padding-top: 5%;
}
ul li {
margin: 10px;
}
}
<div class="wrapper">
<h1>A Girl With A Passion</h1>
<ul>
<li><a href="www.youtube.com" class="life" ><strong>MY LIFE</strong></a></li>
<li><strong>PORTFOLIO</strong></li>
<li><strong>RESUME</strong></li>
<li><strong>ABOUT ME</strong></li>
</ul>
</div>
that is because you haven't used text-decoration property for your a.to do that in your css use,
li a{
text-decoration:none;
}
instead of this.
li{
text-decoration:none;
}
Goal:
Make the text "bbb" to have the same font height as "aaa" but the height of the li.ttt should have the same height as the font-size: xx-large;
Problem:
Don't know how to do it. I tried using "height" but it doesn't work.
https://jsfiddle.net/qc89dwz7/
LI.filtered A {
position: relative;
padding: 1px 20px 1px 4px;
background: #F0F0FF url(https://cdn3.iconfinder.com/data/icons/luchesa-vol-9/128/Lollipop-16.png) no-repeat scroll right 0;
background-position: right bottom;
font-weight: 400;
color: #08C;
text-decoration: none;
}
LI.filtered .testt {
background: #F0F0FF;
padding: 1px 4px 1px 4px;
font-weight: 400;
color: #08C;
text-decoration: none;
}
#result-filters {
margin: 0, 0, -30px;
}
#result-filters UL {
display: inline;
list-style: outside none none;
margin: 0;
padding: 0;
font-size: 12px;
font-family: arial, helvetica, sans-serif;
}
LI.filtered,
#result-filters LI.filtered {
padding-left: 0;
background: transparent none repeat scroll 0 0;
}
#result-filters UL LI {
margin: 0 8px 0 0;
float: left;
}
LI.ttt A {
position: relative;
padding: 1px 4px 1px 20px;
background: #F0F0FF url(https://cdn3.iconfinder.com/data/icons/luchesa-vol-9/128/Lollipop-16.png) no-repeat scroll left 0;
background-position: left;
font-weight: 400;
color: #08C;
text-decoration: none;
font-size: xx-large;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background-color: #F4F4F4;
min-height: 61px;
border: 0;
line-height: 1.2;
letter-spacing: 1px;
width: 137px;
text-align: center;
font-family: Tahoma;
}
<div id="result-filters">
<ul>
<li class="filtered">
<a href="">
aaa
</a>
</li>
<li class="ttt">
bbb
</li>
</ul>
</div>
xx-large translates to 32px
Knowing this, you can establish the height and line-height of the two list-items separately:
li.filtered {
height: 12px;
line-height: 12px;
}
li.ttt {
height: 32px;
line-height: 32px;
}
You can then establish the font-size of aaa and bbb as 12px:
li.filtered a,
li.ttt a {
font-size: 12px;
}
Putting it all together:
LI.filtered A {
position: relative;
padding: 1px 20px 1px 4px;
background: #F0F0FF url(https://cdn3.iconfinder.com/data/icons/luchesa-vol-9/128/Lollipop-16.png) no-repeat scroll right 0;
background-position: right bottom;
font-weight: 400;
color: #08C;
text-decoration: none;
}
LI.filtered .testt {
background: #F0F0FF;
padding: 1px 4px 1px 4px;
font-weight: 400;
color: #08C;
text-decoration: none;
}
#result-filters {
margin: 0, 0, -30px;
}
#result-filters UL {
display: inline;
list-style: outside none none;
margin: 0;
padding: 0;
font-size: 12px;
font-family: arial, helvetica, sans-serif;
}
LI.filtered,
#result-filters LI.filtered {
padding-left: 0;
background: transparent none repeat scroll 0 0;
}
#result-filters UL LI {
margin: 0 8px 0 0;
float: left;
}
LI.ttt A {
position: relative;
padding: 1px 4px 1px 20px;
background: #F0F0FF url(https://cdn3.iconfinder.com/data/icons/luchesa-vol-9/128/Lollipop-16.png) no-repeat scroll left 0;
background-position: left;
font-weight: 400;
color: #08C;
text-decoration: none;
font-size: xx-large;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background-color: #F4F4F4;
min-height: 61px;
border: 0;
line-height: 1.2;
letter-spacing: 1px;
width: 137px;
text-align: center;
font-family: Tahoma;
}
li.filtered,
li.ttt {
display:block;
background-color: rgba(244,244,244,1);
}
li.filtered {
height: 12px;
line-height: 12px;
margin: 10px;
}
#result-filters li.filtered {
margin-top: 10px;
}
li.ttt {
height: 32px;
line-height: 32px;
}
li.filtered a,
li.ttt a {
font-size: 12px;
}
<div id="result-filters">
<ul>
<li class="filtered">
<a href="">
aaa
</a>
</li>
<li class="ttt">
bbb
</li>
</ul>
</div>
=====
A Simpler Alternative for Plain Colour Backgrounds
If you wish to middle-align the two same-font-size list-items over a plain colour background, simply colour in the background of li.ttt and leave the background of li.filtered transparent:
li.filtered,
li.ttt {
display:block;
height: 32px;
line-height: 32px;
}
li.ttt {
background-color: rgba(244,244,244,1);
}
li.filtered a,
li.ttt a {
font-size: 12px;
}
Putting it all together (simpler version):
LI.filtered A {
position: relative;
padding: 1px 20px 1px 4px;
background: #F0F0FF url(https://cdn3.iconfinder.com/data/icons/luchesa-vol-9/128/Lollipop-16.png) no-repeat scroll right 0;
background-position: right bottom;
font-weight: 400;
color: #08C;
text-decoration: none;
}
LI.filtered .testt {
background: #F0F0FF;
padding: 1px 4px 1px 4px;
font-weight: 400;
color: #08C;
text-decoration: none;
}
#result-filters {
margin: 0, 0, -30px;
}
#result-filters UL {
display: inline;
list-style: outside none none;
margin: 0;
padding: 0;
font-size: 12px;
font-family: arial, helvetica, sans-serif;
}
LI.filtered,
#result-filters LI.filtered {
padding-left: 0;
background: transparent none repeat scroll 0 0;
}
#result-filters UL LI {
margin: 0 8px 0 0;
float: left;
}
LI.ttt A {
position: relative;
padding: 1px 4px 1px 20px;
background: #F0F0FF url(https://cdn3.iconfinder.com/data/icons/luchesa-vol-9/128/Lollipop-16.png) no-repeat scroll left 0;
background-position: left;
font-weight: 400;
color: #08C;
text-decoration: none;
font-size: xx-large;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background-color: #F4F4F4;
min-height: 61px;
border: 0;
line-height: 1.2;
letter-spacing: 1px;
width: 137px;
text-align: center;
font-family: Tahoma;
}
li.filtered,
li.ttt {
display:block;
height: 32px;
line-height: 32px;
}
li.ttt {
background-color: rgba(244,244,244,1);
}
li.filtered a,
li.ttt a {
font-size: 12px;
}
<div id="result-filters">
<ul>
<li class="filtered">
<a href="">
aaa
</a>
</li>
<li class="ttt">
bbb
</li>
</ul>
</div>
I want to set equal margins between "Li" elements in the navigation.
right now there is slightly difference between the
margin left and right as shown in the pic below.
Here is a fiddle link
Here is the css:
.nav {
background-color: white;
width: 100%;
min-height: 29px;
line-height: 26px;
border-top: solid 1px #999;
border-bottom: solid 2px #333333;
font-weight: bold;
position: relative;
border: none;
font-size: 15px;
font-weight: normal;
}
.nav, .nav ul {
padding: 0;
margin: 0;
list-style: none;
line-height: 2.5;
/* font-size: 13px; */
z-index: 100;
}
.nav li {
float: left;
}
.nav a {
background-color: white;
text-decoration: none;
display: block;
z-index: 9999;
padding-right: 5px;
padding-left: 5px;
}
.nav ul a {
/* border-right: 1px solid #333333; */
text-indent: 4px;
padding-left: 4px;
padding-top: 4px;
padding-bottom: 4px;
width: 6.5em;
line-height: 16pt;
}
.nav > ul > li > a {
width: 6em;
}
Remove the width on your <a> elements:
and add this:
.nav li {margin-right: 10px /* or whatever margin you want */}
.nav li:last-child {margin-right: 0}
.nav {
background-color: white;
width: 100%;
border-top: solid 1px #999;
border-bottom: solid 2px #333333;
font-weight: bold;
font-size: 15px;
font-weight: normal;
}
.nav, .nav ul {
padding: 0;
margin: 0;
list-style: none;
line-height: 2.5;
/* font-size: 13px; */
z-index: 100;
}
.nav li {
display: inline;
margin: 0 10px;
}
.nav li a {
background-color: white;
text-decoration: none;
padding-right: 5px;
padding-left: 5px;
}
add the reset of the styling as you wish.
edit: use position and z-index only when it is necessary
fiddle
You could try adding word-spacing: 5px; in the nav class:
.nav {
background-color: white;
width: 100%;
min-height: 29px;
line-height: 26px;
border-top: solid 1px #999;
border-bottom: solid 2px #333333;
font-weight: bold;
position: relative;
border: none;
font-size: 15px;
font-weight: normal;
word-spacing: 5px;
}
Hope this helps.
For some reason, when I hover over my navigation items, the drop downs are appearing on the very left of the screen instead of under that menu item and I can't figure out why. If anybody could help, it would be greatly appreciated.
Here's my code (JSFIDDLE: http://jsfiddle.net/A5jtC/):
HTML:
<div id="nav" class="wrapper">
<ul class="site-navigation">
<li>About</li>
<li>Work
<ul>
<li>Testing</li>
</ul>
</li>
</ul>
</div>
CSS:
.wrapper{
width: 1000px;
background-color: rgb(255,255,255);
margin: 0 auto;
overflow: hidden;
}
ul.site-navigation {
text-align: center;
list-style: none;
}
ul.site-navigation li a{
font-family: 'Arvo', serif, Georgia;
width: 125px;
float: left;
padding: 50px 0 47px 0;
letter-spacing: 4px;
text-transform: uppercase;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
color: rgb(82,82,82);
border-bottom: 3px solid transparent;
}
ul.site-navigation a:hover{
font-weight: bold;
border-bottom: 3px solid rgb(4,141,195);
text-shadow: rgb(200, 200, 200) 1px 1px 0px;
padding: 97px 0 0 0;
}
ul.site-navigation ul {
list-style: none;
width: 100px;
height: 30px;
position: absolute;
top: 125px;
left: 0;
display: none;
z-index: 1000;
}
ul.site-navigation ul li {
float: none;
line-height: 30px;
}
ul.site-navigation ul li a {
transition:none;
font-weight: regular;
font-size: 14px;
}
ul.site-navigation li:hover ul {
display: block;
}
Try this css, it might get you to where you need to be:
.wrapper{
width: 100%;
background-color: rgb(255,255,255);
margin: 0 auto;
overflow: hidden;
}
ul.site-navigation {
text-align: center;
list-style: none;
}
ul.site-navigation li{
display: block;
width: 125px;
float: left;
}
ul.site-navigation li a{
font-family: 'Arvo', serif, Georgia;
width: 125px;
float: left;
padding: 50px 0 47px 0;
letter-spacing: 4px;
text-transform: uppercase;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
color: rgb(82,82,82);
border-bottom: 3px solid transparent;
}
ul.site-navigation a:hover{
font-weight: bold;
border-bottom: 3px solid rgb(4,141,195);
text-shadow: rgb(200, 200, 200) 1px 1px 0px;
padding: 97px 0 0 0;
}
ul.site-navigation li>ul {
list-style: none;
height: 50px;
position: relative;
display: none;
z-index: 1000;
}
ul.site-navigation li>ul>li {
float: none;
line-height: 50px;
}
ul.site-navigation ul li a {
font-weight: regular;
font-size: 20px;
}
ul.site-navigation>li:hover ul {
display: block;
}
You've got a couple of issues.
First, in order to have an element that appears under another element, the parent element has to be position: relative; and the direct child position: absolute;.
Next, your overflow:hidden on your wrapper element would hide any child that appears below the parent.
Third, your list items had to be floated and given a width x height, otherwise the browser thinks they all line up on the left side of the page since the elements inside of the list items are all floated.
Finally, after all of that, your submenu s have a 40px left padding by default. You have to get rid of that for the sub-items to line up.
Check this out:
.wrapper{
width: 1000px;
background-color: rgb(255,255,255);
margin: 0 auto;
}
ul.site-navigation {
text-align: center;
list-style: none;
}
ul.site-navigation li a{
padding: 50px 0 47px 0;
font-family: 'Arvo', serif, Georgia;
width: 125px;
float: left;
letter-spacing: 4px;
text-transform: uppercase;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
color: rgb(82,82,82);
border-bottom: 3px solid transparent;
}
ul.site-navigation > li {
position: relative;
width: 125px;
float:left;
margin: 0;
}
ul.site-navigation a:hover{
font-weight: bold;
border-bottom: 3px solid rgb(4,141,195);
text-shadow: rgb(200, 200, 200) 1px 1px 0px;
padding: 97px 0 0 0;
}
ul.site-navigation ul {
list-style: none;
height: 50px;
left: 0;
z-index: 1000;
padding: 0;
display: none;
}
ul.site-navigation ul li {
float: none;
line-height: 50px;
}
ul.site-navigation ul li a {
font-weight: regular;
font-size: 20px;
}
ul.site-navigation li:hover ul {
display: block;
position: absolute;
width: 125px;
top: 100%;
left: 0;
}
http://jsfiddle.net/A5jtC/74/
UPDATE: I can't comment on others' posts yet, but JRulle's solution will push all of the content under your menu down when you hover over it and a submenu is displayed. In order to prevent that, you HAVE to use the relative/absolute positioning above so that your submenus don't take up page space when they are displayed.
You have some issues in your styles: Try these: JSFiddle
.wrapper{
background-color: rgb(255,255,255);
width: 100%;
overflow: hidden;
}
ul.site-navigation {
list-style: none;
}
ul.site-navigation:after {
clear: both;
}
ul.site-navigation li {
display: block;
float: left;
}
ul.site-navigation li a{
font-family: 'Arvo', serif, Georgia;
letter-spacing: 4px;
text-transform: uppercase;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
color: rgb(82,82,82);
border-bottom: 3px solid transparent;
}
ul.site-navigation li a:hover{
font-weight: bold;
border-bottom: 3px solid rgb(4,141,195);
text-shadow: rgb(200, 200, 200) 1px 1px 0px;
}
ul.site-navigation li ul {
list-style: none;
display: none;
z-index: 1000;
padding: 0;
margin: 0;
}
ul.site-navigation ul li {
line-height: 50px;
}
ul.site-navigation ul li a {
font-weight: regular;
font-size: 20px;
}
ul.site-navigation li:hover ul {
display: block;
}