When you hover over a nav li item on my website, it should slide down the nav ul ul item, but when it slides down for some reason it is skinny, then widens after. Please look at my JSFiddle and help me out :D
JSFiddle Demo
HTML:
<body>
<header>
<nav>
<ul>
<li>Home
<ul>
<li>About Me</li>
</ul>
</li>
<li>Purposeful Living
<ul>
<li>7th - 8th</li>
<li>9th - 10th</li>
<li>11th - 12th</li>
</ul>
</li>
<li>Academic Excellence
<ul>
<li>7th - 8th</li>
<li>9th - 10th</li>
<li>11th - 12th</li>
</ul>
</li>
<li>Ethical Responsibility
<ul>
<li>7th - 8th</li>
<li>9th - 10th</li>
<li>11th - 12th</li>
</ul>
</li>
</ul>
</nav>
</header>
<div id="headershow">Toggle Nav Bar</div>
<div id="mainnamesection">
<h1 id="mainname">
Title
</h1>
<div id="flyingsection">
</div>
<h1 id="mainname1">
<span id="smallname">Subtitle</span>
</h1>
</div>
</body>
Javascript/Jquery:
$(document).ready(function() {
$("#smallname").click(function() {
$("html, body").animate({scrollTop: "0px"});
});
$("#headershow").click(function() {
$("header").slideToggle();
});
$(".grades td a").mouseover(function() {
$(this).animate({backgroundColor: "white", color: "black"}, 200);
$(this).mouseleave(function() {
$(this).animate({backgroundColor: "transparent", color: "white"}, 200);
});
});
$('nav li').hover(
function () {
$('ul', this).slideDown();
},
function () {
$('ul', this).stop().slideUp();
}
);
});
CSS:
` #import url(http://fonts.googleapis.com/css?family=Open+Sans);
body {
background-image: url(file:///Users/jakesager/Desktop/Websites/Jake%20Sager/img/starrynight.jpg);
background-size: 110%;
background-position: center -100px;
background-attachment: fixed;
margin:0;
padding:0;
}
header {
width: 100%;
margin:auto;
background: rgba(255,255,255,0.7);
height: 60px;
z-index: 20;
display: none;
}
.inline {
display: inline-block;
}
#flyingbird {
height: 60px;
width: 90px;
left: 100px;
position: relative;
top: -30px;
}
#bird {
height: 60px;
width: 90px;
display: inline-block;
position: relative;
top: 15px;
z-index: 1;
}
#flyingsection {
width: 700px;
margin:auto;
margin-top: 0px;
margin-bottom: 0px;
}
nav {
height: 60px;
margin-top: 0px;
text-align: center;
z-index: 20;
}
nav ul ul {
display:none;
}
#headershow {
background-color: rgba(255,255,255,0.7);
position: static;
left: 0;
top: 0;
width: 125px;
text-align:center;
border-bottom-right-radius: 10px;
padding: 5px;
height: 20px;
cursor: pointer;
font-family: open sans;
}
nav ul {
list-style:none;
display: inline-table;
position:relative;
padding: 0;
font-family: open sans;
display: inline-block;
}
nav ul li {
float: left;
margin-top: -16px;
border-right: 2px solid black;
text-align:center;
height: 60px;
padding-left: 25px;
padding-right: 25px;
}
nav ul li:last-child {
border-right: none;
}
nav ul li a {
color:black;
text-decoration: none;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 5px;
padding-right: 5px;
position: relative;
top: 18px;
}
nav ul li:first-child {
border-left: 2px solid black;
}
nav ul li:last-child {
border-right: 2px solid black;
}
nav ul li:hover {
background: rgba(255,255,255,0.6)
}
nav ul ul {
position: absolute;
top: 100%;
z-index: 20;
}
nav ul ul li {
float:none;
background-color: rgba(255,255,255,0.82);
width: 100%;
margin-top: 0;
margin-left: -27px;
border-left: 2px solid black;
border-right: 2px solid black;
border-top: 1px solid black;
}
nav ul ul li:last-child {
border-bottom: 2px solid black;
}
nav ul ul li:hover {
background-color: rgba(255,255,255,0.9);
}
#mainnamesection {
width: 1050px;
margin:auto;
}
#mainname {
font-size: 180px;
font-family: open sans;
text-align:center;
margin-top: 20px;
color: white;
}
#mainname1 {
font-size: 180px;
font-family: open sans;
text-align:center;
color: white;
margin-top: -100px;
}
#smallname {
font-size: 50px;
font-family: open sans;
color: #47BCEA;
}
nav ul ul {
margin-left: 0;
}
.maincontent {
width: 100%;
margin-top: 30px;
padding-top: 7px;
padding-bottom: 10px;
color: white;
}
.maincontent p {
font-family: open sans;
margin-left: 20px;
font-size: 18px;
}
.maincontent h1 {
font-family: open sans;
margin-left: 20px;
}
.grades {
margin-left: 20px;
background-color: rgba(000,000,000, 0.7);
font-family: open sans;
font-size: 23px;
}
.grades td {
padding: 10px;
border-right: 2px solid white;
}
.grades td:last-child {
border: none;
}
.grades td a {
width: 100%;
color: white;
text-decoration: none;
padding: 5px;
}
.wrapper {
width: 941px;
margin:auto;
}
.maintitle {
font-family: Open sans;
margin-left: 20px;
}
.mainparagraph {
font-family: Open sans;
margin-left: 20px;
}
During the animation overflow is set to hidden. When animation completes the inline overflow style is removed.
You have negative margin set on sub menu <li> so while the animation is in progress the part that is outside the parent is not visible.
Suggest you remove the negative margin and set the <ul> to left:0
Related
if press the button, id #footer gets padding-top as much as class .box's outerHeight. When I press the button again, #footer's padding-top must be "0". but now #footer's padding-top doesn't change.
I tried many codes that ("padding-top",null), ("padding-top",0), $("button").toggle(function(){}); etc..
$(document).ready(function() {
$("button").click(function() {
var boxHeight = $(".box").stop().fadeToggle(10).outerHeight();
$("#footer").css("padding-top", boxHeight);
});
});
#charset "utf-8";
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul,
ol {
list-style: none;
}
a {
color: #000;
text-decoration: none;
}
button {
background: transparent;
cursor: pointer;
}
img,
button,
input {
border: 0;
}
html {
-webkit-text-size-adjust: none;
}
body {
font-family: 'Noto Sans KR', sans-serif;
font-size: 16px;
letter-spacing: 0.5px;
}
html,
body {
height: 100%;
}
/* layout */
.layout {
position: relative;
max-width: 1200px;
margin: 0 auto;
}
.layout:after {
display: block;
clear: both;
content: "";
}
/* footer */
#footer {
position: relative;
font-size: 14px;
border-top: 1px solid #0067ac;
background-color: #e4e4e4;
color: #6f6f6f;
letter-spacing: 0;
}
#footer .layout {
position: static;
padding: 50px 0;
font-size: 0;
}
#footer .wrap-btn {
float: right;
}
#footer .wrap-btn button {
position: relative;
width: 121px;
height: 38px;
margin-right: 10px;
padding-right: 10px;
font-size: 14px;
}
#footer .wrap-btn button:before {
position: absolute;
top: 16px;
right: 7px;
width: 11px;
height: 6px;
background: url(../img/ir-common.png) no-repeat -115px -146px;
content: "";
}
#footer .wrap-btn button,
#btn-top {
display: inline-block;
font-size: 12px;
border: 1px solid #0067ac;
color: #6f6f6f;
}
#footer .wrap-btn .box {
display: none;
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
padding: 30px;
border-bottom: 1px solid #0067ac;
font-size: 16px;
background-color: #f8f8f8;
}
#footer .wrap-btn .box ul {
max-width: 1200px;
margin: 0 auto;
}
#footer .wrap-btn .box ul:after {
display: block;
clear: both;
content: "";
}
#footer .wrap-btn .box ul li {
float: left;
width: 20%;
margin-top: 10px;
}
#footer .wrap-btn .box ul li a {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<footer id="footer">
<div class="layout">
<div class="wrap-btn">
<button type="button">button</button>
<div class="box">
<ul>
<li>contents</li>
<li>contents</li>
<li>contents</li>
<li>contents</li>
<li>contents</li>
<li>contents</li>
<li>contents</li>
<li>contents</li>
<li>contents</li>
<li>contents</li>
<li>contents</li>
<li>contents</li>
<li>contents</li>
</ul>
</div>
</div>
</div>
</footer>
You could check if the .box is visible, and if not set the padding-top to 0;
$(document).ready(function() {
$("button").click(function() {
var v = $(".box").is(":visible");
var boxHeight = $(".box").stop().fadeToggle(10).outerHeight();
$("#footer").css("padding-top", v == false ? boxHeight : 0);
});
});
Demo
$(document).ready(function() {
$("button").click(function() {
var v = $(".box").is(":visible");
var boxHeight = $(".box").stop().fadeToggle(10).outerHeight();
$("#footer").css("padding-top", v == false ? boxHeight : 0);
});
});
#charset "utf-8";
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul,
ol {
list-style: none;
}
a {
color: #000;
text-decoration: none;
}
button {
background: transparent;
cursor: pointer;
}
img,
button,
input {
border: 0;
}
html {
-webkit-text-size-adjust: none;
}
body {
font-family: 'Noto Sans KR', sans-serif;
font-size: 16px;
letter-spacing: 0.5px;
}
html,
body {
height: 100%;
}
/* layout */
.layout {
position: relative;
max-width: 1200px;
margin: 0 auto;
}
.layout:after {
display: block;
clear: both;
content: "";
}
/* footer */
#footer {
position: relative;
font-size: 14px;
border-top: 1px solid #0067ac;
background-color: #e4e4e4;
color: #6f6f6f;
letter-spacing: 0;
}
#footer .layout {
position: static;
padding: 50px 0;
font-size: 0;
}
#footer .wrap-btn {
float: right;
}
#footer .wrap-btn button {
position: relative;
width: 121px;
height: 38px;
margin-right: 10px;
padding-right: 10px;
font-size: 14px;
}
#footer .wrap-btn button:before {
position: absolute;
top: 16px;
right: 7px;
width: 11px;
height: 6px;
background: url(../img/ir-common.png) no-repeat -115px -146px;
content: "";
}
#footer .wrap-btn button,
#btn-top {
display: inline-block;
font-size: 12px;
border: 1px solid #0067ac;
color: #6f6f6f;
}
#footer .wrap-btn .box {
display: none;
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
padding: 30px;
border-bottom: 1px solid #0067ac;
font-size: 16px;
background-color: #f8f8f8;
}
#footer .wrap-btn .box ul {
max-width: 1200px;
margin: 0 auto;
}
#footer .wrap-btn .box ul:after {
display: block;
clear: both;
content: "";
}
#footer .wrap-btn .box ul li {
float: left;
width: 20%;
margin-top: 10px;
}
#footer .wrap-btn .box ul li a {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<footer id="footer">
<div class="layout">
<div class="wrap-btn">
<button type="button">button</button>
<div class="box">
<ul>
<li>
contents
</li>
<li>
contents
</li>
<li>
contents
</li>
<li>
contents
</li>
<li>
contents
</li>
<li>
contents
</li>
<li>
contents
</li>
<li>
contents
</li>
<li>
contents
</li>
<li>
contents
</li>
<li>
contents
</li>
<li>
contents
</li>
<li>
contents
</li>
</ul>
</div>
</div>
</div>
</footer>
You need to track if your footer is open or not in order to achieve what you are trying to do.
Something like :
$(document).ready(function(){
let footerOpen = false;
$("button").click(function(){
var boxHeight = $(".box").stop().fadeToggle(10).outerHeight();
if(!footerOpen) {
$("#footer").css("padding-top",boxHeight);
footerOpen = true;
} else {
$("#footer").css("padding-top", 0);
footerOpen = false;
}
});
});
Here is a working codepen: https://codepen.io/antonbks/pen/jONMNLB
On a mobile version of the website I've a hamburger jquery menu that shows all the menu and submenu items. So far so good, but the problem is, if I have a lot of menu items, it will not fit the screensize thus some of the items or not visible. It would be a simple solution to just scroll in the menu itself to access them.
In short: how do I enable scrolling in the jquery menu when the menu is open?
I've included a screenshot to give you an idea how my menu looks like:
/* Site navigation */
.navbar {
position: relative;
width: 100%;
height: 70px;
background-color: rgba(0,120,191,0.8);
z-index: 9999;
}
.default-menu {
display: block;
float: right;
}
/* Expanding submenus */
ul.jquerymenu li.parent {
position: relative;
}
ul.jquerymenu li.parent span.parent {
display: none;
}
.ie ul.jquerymenu li.parent span.parent {
display: none;
}
ul.jquerymenu li.parent span.closed {
background: transparent;
}
ul.jquerymenu li.parent span.open {
background: transparent;
}
ul.jquerymenu li.parent ul {
margin: 0;
width: auto;
position: absolute;
top: 70px;
left: 0;
box-shadow: -3px 3px 10px 0px rgba(0,0,0,0.2);
}
ul.jquerymenu li.parent ul li {
width: 100%;
background-color: #006699;
text-align: left;
margin: 0 !important;
padding: 0 !important;
line-height: 1;
}
ul.jquerymenu li.parent ul li a {
padding: 20px !important;
margin: 0;
display: block;
line-height: 1.5;
text-decoration: none;
color: #fff;
}
.hamburger.mean-container {
position: absolute;
z-index: 1;
right: 0;
}
.mean-container .mean-bar {
width: 100%;
height: 70px;
min-height: 70px;
position: relative;
background: transparent;
padding: 0;
}
.mean-container .mean-nav ul li {
margin: 0;
font-size: 1.6rem;
}
.mean-container .mean-nav ul li:hover {
background: rgba(23,41,59,0.8);
}
.mean-container .mean-nav ul li a {
display: block;
float: left;
width: 88%;
padding: 20px;
margin: 0;
text-align: left;
color: #fff;
text-decoration: none;
text-transform: uppercase;
border-top: 0;
}
.mean-container .mean-nav ul li a:hover {
color: #fff;
}
.mean-container .mean-nav {
float: left;
width: 100%;
background: #006699;
margin-top: 70px;
}
.mean-container a.meanmenu-reveal {
width: 36px;
height: 30px;
padding: 20px 16px;
font-size: 2.8rem;
line-height: 32px;
}
.mean-container a.meanmenu-reveal span {
display: block;
background: #fff;
height: 5px;
margin-top: 5px;
}
.mean-container .mean-nav ul li a.mean-expand {
margin-top: -2px;
width: 100%;
height: 44px;
padding: 12px !important;
text-align: right;
position: absolute;
right: 0;
top: 0;
z-index: 2;
font-weight: 500;
background: transparent;
border: 0!important;
border-left: 0 !important;
border-bottom: 0 !important;
font-size: 3rem;
}
.mean-container .mean-nav ul li a.mean-expand:hover {
background: transparent;
}
.mean-container .mean-nav ul li li a {
border-top: 0;
}
<nav class="navbar" style="position: fixed; top: 0px;">
<div class="container">
<div class="site-logo">
<a href="/" title="Title img" rel="home" id="logo">
<img src="storm-logo-56x182.png" alt="Alt text">
</a>
</div>
<div class="hamburger mean-container"><div class="mean-bar">X<nav class="mean-nav">
<div class="content">
<!--[if IE]><div class="ie"><![endif]--><ul style="display: block;"><li><span></span>De rijschool<ul style="display: none;"><li>De auto's</li><li>Voordelen</li><li>Bovag</li><li>De instructeurs</li><li>Slagingspercentage</li><li>Ervaringen</li></ul><a class="mean-expand" href="#" style="font-size: 20">+</a></li><li><span></span>Opleidingen<ul style="display: none;"><li>Overzicht</li><li>Automaat</li><li>Handgeschakeld</li><li>Theorielessen</li></ul><a class="mean-expand" href="#" style="font-size: 20">+</a></li><li><span></span>Specialisme<ul style="display: none;"><li>Aanpassingen</li><li>Automaat</li><li>Rijles ADHD</li><li>Rijles en ASS</li><li>Rijtest</li><li>Vastgelopen</li></ul><a class="mean-expand" href="#" style="font-size: 20">+</a></li><li><span></span>Trainingen<ul style="display: none;"><li>Hybride rijden</li></ul><a class="mean-expand" href="#" style="font-size: 20">+</a></li><li><span></span>Prijzen<ul style="display: none;"><li>Auto</li><li>Theorie</li></ul><a class="mean-expand" href="#" style="font-size: 20">+</a></li><li><span></span>Contact<ul style="display: block;"><li>Aanmelden</li><li>Informatie aanvraag</li><li>Bel mij terug</li><li class="mean-last">Contactgegevens</li></ul><a class="mean-expand mean-clicked" href="#" style="font-size: 20">-</a></li></ul><!--[if IE]></div><![endif]--> </div>
</nav></div></div>
</div>
<span class="js-responsive-dom-placeholder"></span>
</nav>
This may sound stupid, But I am on edge here. Does anyone knows how to do this in css or javascript? (preferably css)
You could try this:
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
}
.section_header {
background-color: #7e9489;
border-radius: 20px;
width: 200px;
height: 20px;
color: #fff;
text-align: center;
padding: 10px;
line-height: 20px;
}
.section_content {
margin: 0px;
padding: 0px;
display: block;
border-left: solid 2px #7e9489;
margin-left: 99px;
padding-top: 10px;
}
.section_content > li {
display: block;
position: relative;
line-height: 40px;
}
.section_content > li::before {
position: relative;
display: inline-block;
vertical-align: middle;
content: '';
width: 12px;
height: 12px;
border-radius: 10px;
background-color: #7e9489;
margin-left: -7px;
margin-right: 20px;
z-index: 10;
}
.section_content > li > span {
display: inline-block;
vertical-align: middle;
}
.section_content > li:last-child::after {
content: '';
display: block;
position: absolute;
bottom: 0px;
left: -2px;
width: 2px;
height: 50%;
background-color: white;
z-index: 1;
}
<div class="section_header">OCT 5, 2016</div>
<ul class="section_content">
<li><span>Segment 1</span></li>
<li><span>Segment 2</span></li>
<li><span>Segment 3</span></li>
<li><span>Segment 4</span></li>
</ul>
Quick and dirty:-
.date {
border-radius: 30px;
background-color: #7C9288;
width: 200px;
text-align: center;
padding: 10px;
color: #fff;
}
.box {
border-left: 2px solid #7C9288;
margin-left: 110px;
margin-top: -16px;
padding-top: 20px;
}
li {
color: #7C9288;
list-style-type:none;
}
li:before{
content:'\00b7';
font-size:100px;
line-height:24px;
vertical-align:middle;
}
ul {
margin-left: -57px;
}
<div class="date">Today</div>
<div class="box">
<ul>
<li>Test</li>
<li>Test 2</li>
<li>Test 3</li>
</ul>
</div>
I want to make a code where I hover my mouse through the menu items, and appears a submenu with a list ...
Here's my html nav code on CSS first and then the HTML code ...:
nav {
background-color: #FFF;
width: 960px;
margin: 0 auto;
}
div.ajuste {
clear: both;
}
nav ul {
width: 95%;
margin: 5px 5px 0 5px;
padding: 10px 10px 10px 6px;
height: 40px;
line-height: 100%;
background: #FFF;
/* position:relative;
z-index:999;
overflow: hidden;*/
float:left;
list-style-type: none;
}
nav li {
margin-bottom: 10px;
padding-right: 25px;
float: left;
/*position: relative;*/
/*list-style: none;*/
}
nav a {
color: #36E;
font-weight: bold;
text-decoration: none;
/*margin-right: 6%;*/
font-family: arial, sans-serif;
font-style: normal;
font-size: 15px;
text-decoration: none;
display: block;
padding: 6px 20px 6px 20px;
/*margin-bottom: 10px;*/
}
nav a:hover {
color: #0505B4;
}
nav a.active {
color: #1414D3;
}
ul.dropdown, ul.dropdown li, ul.dropdown ul {
list-style: none;
margin: 0;
padding: 0;
}
ul.dropdown {
position: relative;
z-index: 597;
float: left;
}
ul.dropdown li {
float: left;
min-height: 1px;
line-height: 1.3em;
vertical-align: middle;
}
ul.dropdown li.hover, ul.dropdown li:hover {
position: relative;
z-index: 599;
}
ul.dropdown ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}
ul.dropdown ul li {
float: none;
}
ul.dropdown ul ul {
top: 1px;
left: 99%;
}
ul.dropdown li:hover > ul {
visibility: visible;
}
<nav>
<ul id="menu_bar" class="dropdown">
<li>Inicio</li>
<li>Biografía</li>
<li class="submenu">Discografía</li>
<ul>
<li>Innerspeaker</li>
<li>Lorenism</li>
<li>Currents</li>
</ul>
</li>
</ul>
<div class="ajuste">
<nav>
My fail occurs when I hover it ... List submenu don't appears...
What's bad on my code?
The second UL, need to be inside the LI tag.
nav {
background-color: #FFF;
width: 960px;
margin: 0 auto;
}
div.ajuste {
clear: both;
}
nav ul {
width: 95%;
margin: 5px 5px 0 5px;
padding: 10px 10px 10px 6px;
height: 40px;
line-height: 100%;
background: #FFF;
/* position:relative;
z-index:999;
overflow: hidden;*/
float:left;
list-style-type: none;
}
nav li {
margin-bottom: 10px;
padding-right: 25px;
float: left;
/*position: relative;*/
/*list-style: none;*/
}
nav a {
color: #36E;
font-weight: bold;
text-decoration: none;
/*margin-right: 6%;*/
font-family: arial, sans-serif;
font-style: normal;
font-size: 15px;
text-decoration: none;
display: block;
padding: 6px 20px 6px 20px;
/*margin-bottom: 10px;*/
}
nav a:hover {
color: #0505B4;
}
nav a.active {
color: #1414D3;
}
ul.dropdown, ul.dropdown li, ul.dropdown ul {
list-style: none;
margin: 0;
padding: 0;
}
ul.dropdown {
position: relative;
z-index: 597;
float: left;
}
ul.dropdown li {
float: left;
min-height: 1px;
line-height: 1.3em;
vertical-align: middle;
}
ul.dropdown li.hover, ul.dropdown li:hover {
position: relative;
z-index: 599;
}
ul.dropdown ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}
ul.dropdown ul li {
float: none;
}
ul.dropdown ul ul {
top: 1px;
left: 99%;
}
ul.dropdown li:hover > ul {
visibility: visible;
}
<nav>
<ul id="menu_bar" class="dropdown">
<li>Inicio</li>
<li>Biografía</li>
<li class="submenu">
Discografía
<ul>
<li>Innerspeaker</li>
<li>Lorenism</li>
<li>Currents</li>
</ul>
</li>
</ul>
<nav>
You have an extra li tag. Get rid of it, and it should work
<nav>
<ul id="menu_bar" class="dropdown">
<li>Inicio
</li>
<li>Biografía
</li>
<li class="submenu">Discografía
<ul>
<li>Innerspeaker
</li>
<li>Lorenism
</li>
<li>Currents
</li>
</ul>
</li>
</ul>
<div class="ajuste">
<nav>
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 9 years ago.
Improve this question
Hi I am looking to build a navigation bar similar to yahoos, however I was unable to find an example. Some of the features I am looking for are a sticky navigation bar, that kind of looks like it pops out of it's place when the user scrolls.
CSS
* { margin: 0; padding: 0; }
html { overflow-y: scroll; }
body {
font: 62.5% Arial, Helvetica, sans-serif;
background: #FFFFFF;
}
ul { list-style: none inside; }
p { font-size: 1.2em; line-height: 1.2em; margin-bottom: 1.2em; }
a img { border: none; }
.floatleft { float: left; }
.floatright { float: right; }
.clear { clear: both; }
a {
text-decoration: none;
outline: none;
color: #335588;
}
a:hover {
text-decoration: underline;
}
#top-bar {
background: #330000;
min-height: 60px;
padding: 0 10px;
font-size: 1.3em;
font-weight: bold;
}
#right-side {
float: right;
padding-top: 15px;
}
#right-side img {
border: 1px solid white;
vertical-align: middle;
}
#right-side a {
color: white;
border-left: 1px solid white;
height: 10px;
padding-left: 10px;
}
#right-side a.first {
border: none;
padding: 0;
}
#left-side {
float: left;
padding-top: 15px;
padding-left: 20px;
color: white;
font-size: 20px;
}
#sub-menu {
background: white;
min-height: 20px;
padding: 5px 10px 0 10px;
}
#sub-menu ul {
display: block;
color: #000000;
}
#sub-menu ul li {
height: 18px;
padding: 5px 10px 0 5px;
position: relative;
float: left;
margin-right: 10px;
color: #000000;
}
#sub-menu ul li:hover {
background: red;
height: 10px;
}
#sub-menu ul li a {
display: block;
float: left;
height: 23px;
position: relative;
top: -5px;
right: -5px;
padding-right: 3px;
color: #000000;
font-weight: bold;
font-size: 1.1em;
text-decoration: none;
}
#sub-menu ul li a span {
position: relative;
top: 6px;
}
#sub-menu ul li ul {
display: none;
position: absolute;
top: 29px;
left: 0px;
width: 150px;
border: 1px solid #ccc;
background: white;
padding: 10px 0 0 0;
}
#sub-menu ul li ul li {
float: none;
padding: 0; margin: 0;
height: 100%;
}
#sub-menu ul li ul li:hover {
background: none;
}
#sub-menu ul li ul li a {
display: block;
float: none;
margin-left: -5px;
padding: 5px 0 0 10px;
width: 140px;
}
#sub-menu ul li ul li a:hover {
background: #000000;
}
HTML
<div id="top-bar">
<img src="images/logo.png" alt="TEST" class="floatleft" />
<div id="left-side">
TEST
</div>
<div id="right-side">
Logout
</div>
</div>
<div id="sub-menu">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
here is an updated jsfiddle, i got the line to show up but it still wont be sticky jsfiddle.net/cc48t/1549
It's probably not purely CSS. With jQuery, you can put something like this:
$(window).scroll(function() {
$(this).scrollTop() > 0 ? $('body').css('background', '#f0f') : $('body').css('background', '#0f0');
}).scroll();
Fiddle