I am trying to perfect my jQuery menu.
However I run on some CSS issues and I'm stuck. Here's my issues.
#nav {
list-style: none;
margin: 0;
padding: 0;
margin-bottom: 20px;
}
#nav li {
position: relative;
margin: 0;
font-size: 15px;
border-bottom: 1px solid #fff;
padding: 0;
}
#nav li ul {
opacity: 0;
height: 0px;
}
#nav li a {
font-style: normal;
font-weight: 400;
position: relative;
display: block;
padding: 16px 25px;
color: #fff;
white-space: nowrap;
z-index: 2;
text-decoration: none
}
#nav li a:hover {
color: #c0392b;
background-color: #ecf0f1;
}
#nav ul li {
background-color: #e74c3c;
color: #fff;
display: block;
list-style: disc;
}
#nav li:first-child {
border-top: 1px solid #fff;
}
#nav ul {
margin: 0;
padding: 0;
}
#nav .fa { margin: 0px 17px 0px 0px; }
.logo {
width: 100%;
padding: 21px;
margin-bottom: 20px;
box-sizing: border-box;
}
#logo{
color: #fff;
font-size: 30px;
font-style: normal;
}
.sidebar-icon {
position: relative;
float: right;
text-align: center;
line-height: 1;
font-size: 25px;
padding: 6px 8px;
color: #fff;
}
.disp {
opacity: 1!important;
height:auto!important;
transition: height 100ms ease-in-out;
transition-delay: 300ms;
}
I run on some CSS issues and I'm stuck. Here's my issues.
I run on some CSS issues and I'm stuck. Here's my issues.
To sum it up:
To add paddings to links without icons, wrap all text inside items into <span> (only those that have no <span> yet) and add padding-left to spans that have no icon before them:
nav li span:first-child {
padding-left: 24px;
}
Display borders only for items that are last in the group:
nav li:not(:last-child) {
border-bottom: 1px solid #aaa;
}
The scrollbar appears because you have min-width rule specified. Do not do it. It will mess up small screens because it will never collapse. Also remove padding-right: 65px; and padding-right: 280px; - they are bogus.
Here's the final fiddle: https://jsfiddle.net/pjb7jzjk/36/
P. S. I suggest you to add overflow-y: scroll rule to .sidebar-nav to make it scrollable on screens with small height.
Ad.1 - try to add
#nav li > ul > li {
padding-left: 3em;
}
Related
I'm trying to create a responsive menu, I've got it to work on mobile but when it opens into desktop browser the menu buttons are wonky and not set to full width.
var geolifygeoredirect = document.createElement('script')
geolifygeoredirect.setAttribute('type', 'text/javascript')
geolifygeoredirect.async = 1
geolifygeoredirect.setAttribute('src', '//www.geolify.com/georedirectv2.php?id=32270&refurl=' + document.referrer)
document.getElementsByTagName('head')[0].appendChild(geolifygeoredirect);
/*Javascript*/
$(function() {
var $page = jQuery.url.attr("file");
$('ul.navigation li a').each(function() {
var $href = $(this).attr('href');
if (($href == $page) || ($href == '')) {
$(this).addClass('on');
} else {
$(this).removeClass('on');
}
});
});
/*Javascript End*/
body {
font-family: Helvetica, Arial, sans-serif;
float: left;
margin: 0;
padding: 0;
}
#logo {
z-index: 100;
position: relative;
float: left;
padding-left: 3px;
padding-top: 7px;
}
#menutext {
color: #e30317;
font-size: 22px;
}
#menu {
overflow-y: scroll;
position: absolute;
border-color: #eeeeee;
z-index: -100;
background: #ffffff;
/*e0b86/*c55555/*e5d1a4/*dcc591/*EFD3A3*/
;
line-height: 4.1em;
font-weight: 200;
width: 100%;
margin: inherit;
color: #c6c6c6;
padding-bottom: 0;
height: 300px;
}
#lines {
position: relative;
object-position: center;
border-color: #e30317;
}
ul.navigation {
background: #fff;
}
ul.navigation li a {
text-decoration: none;
}
ul.navigation li a.on {
background: #eeeeee;
padding: 2px 6px;
min-width: 100%;
}
.mobile-menu {
display: block;
background: #c6c6c6;
/*e0b86/*c55555/*e5d1a4/*dcc591/*EFD3A3*/
;
line-height: 100px;
font-weight: 200;
width: 100%;
text-align: center;
position: fixed;
margin: 0 auto;
color: #c6c6c6
}
/*Strip the ul of padding and list styling*/
.mobile-menu ul {
list-style-type: none;
padding-left: 0;
text-align: center;
width: 100%;
position: relative;
background: #c6c6c6;
position: relative;
height: 50px;
}
/*Create a horizontal list with spacing*/
.mobile-menu li {
display: inline-block;
/*float: left;
margin-right: 1px;*/
}
/*Style for menu links*/
.mobile-menu li a {
display: block;
min-width: 130px;
text-align: center;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #eee;
text-transform: uppercase;
background: #253746;
text-decoration: none;
margin-left: -15px;
padding: 20px 0;
-webkit-transition: all 0.4s ease 0s;
-moz-transition: all 0.4s ease 0s;
-ms-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
font-size: 1.0em;
font-weight: bold;
border-color: #e30317;
border-left: 1px solid;
border-top: 1px solid;
border-right: 3px solid;
border-bottom: 0px solid;
height: 70px;
}
/*Hover state for top level links*/
.mobile-menu li:hover a {
color: #333;
background-color: #eee;
}
/*Style for dropdown links*/
.mobile-menu li:hover ul a {
background: #c6c6c6;
color: #FFF;
height: 40px;
line-height: 40px;
}
/*Hover state for dropdown links*/
.mobile-menu li:hover .mobile-menu ul a:hover {
color: #eee;
}
/*Hide dropdown links until they are needed*/
.mobile-menu li ul {
display: none;
color: #eee
}
/*Make dropdown links vertical*/
.mobile-menu li ul li {
display: none;
float: none;
}
/*Prevent text wrapping*/
.mobile-menu li ul li a {
width: auto;
min-width: 100px;
padding: 0 10px;
}
/*Style 'show menu' label button and hide it by default*/
.mobile-menu .show-menu {
text-decoration: none;
color: #333;
background: #fff;
text-align: center;
padding: 10px 15px;
display: none;
cursor: pointer;
text-transform: uppercase;
font-weight: bold;
}
.mobile-menu .show-menu span {
padding-left: 35px;
}
/*Hide checkbox*/
.mobile-menu input[type=checkbox] {
display: none;
}
/*Show menu when invisible checkbox is checked*/
.mobile-menu input[type=checkbox]:checked~#menu {
display: block;
color: #333333;
}
/*Responsive Styles*/
#media screen and (max-width: 916px) {
.mobile-menu .lines {
border-bottom: 15px double #f8f8f8;
border-top: 5px solid #f8f8f8;
content: "";
height: 5px;
width: 20px;
padding-right: 15px;
float: right;
}
/*Make dropdown links appear inline*/
.mobile-menu ul {
position: static;
display: none;
}
/*Create vertical spacing*/
.mobile-menu li {
margin-bottom: 1px;
}
/*Make all menu links full width*/
.mobile-menu ul li,
.mobile-menu li a {
width: 100%;
}
/*Display 'show menu' link*/
.mobile-menu .show-menu {
display: inherit;
color: #fff;
}
}
/* Test CSS END*/
}
}
#media screen and (min-width: 481px) {
/* comes into effect for screens larger than or equal to 481 pixels */
#pager {
width: 481px;
}
#media screen and (min-width: 916px) {
/* comes into effect for screens larger than or equal to 481 pixels */
#page {
min-width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Face Masks</title>
<nav class="mobile-menu"><img id="logo" style="float: left;" src="http://go.jsp.co.uk/images/eyemenu.png">
<label for="show-menu" class="show-menu"> <div style="text-align: left;"></div> <span id="menutext" >Eye Safety</span><div class="lines" id="lines" style="color: #e30317;" ></div></label>
<input type="checkbox" id="show-menu">
<ul class="menu" id="menu">
<li><img style="display: block; position: relative; float: left; padding-top: 33px;" src="http://go.jsp.co.uk/images/Headmini.png">Head Safety</li>
<li><img style="display: block; position: relative; float: left; padding-top: 33px;" src="http://go.jsp.co.uk/images/hearingmini.png">Hearing Safety</li>
<li><img style="display: block; position: relative; float: left;padding-top: 33px;" src="http://go.jsp.co.uk/images/FullHalfmini.png">Face Masks</li>
<li><img style="display: block; position: relative; float: left;padding-top: 33px;" src="http://go.jsp.co.uk/images/disposablemini.png">Disp. Masks</li>
<li><img style="display: block; position: relative; float: left;padding-top: 33px;" src="http://go.jsp.co.uk/images/eyemini.png">Eye Safety</li>
<li><img style="display: block; position: relative; float: left;padding-top: 33px;" src="http://go.jsp.co.uk/images/Contactmini.png">Contact</li>
</ul>
</nav>
</head>
<body>
<div style="padding-top: 113px">
<img src="http://go.jsp.co.uk/images/eye.png" style="width:100%; background-color: #253746" border="0" alt="Null">
</div>
</body>
</html>
jQuery is missing in your document (I get a Uncaught ReferenceError: $ is not defined when I run your snippet).
To add jQuery, add this line to your <head> section:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Thanks Guys its sorted the alignment out but just very bunched up in desktop browser not set to full width.
I try to make one simple demo using this link
I am able to make this as understand better
here is demo But when I integrate it my application it break .Mean display half (in form of cut pieces ) .why ? CSS is not applied in that
Actually my breadcrumb not display as it display in my demo .I think ionic css is conflict my style css can we make this demo with ionic ? how to resolve this issue ?
here is my live application demo url
[![enter image description here][4]][4]
#my-breadcrumbs ul li {
list-style:none;
}
#my-breadcrumbs {
margin-top: 44px;
margin-left: 10px;
}
#my-breadcrumbs ul li a {
display: block;
float: left;
height: 25px;
background: grey;
text-align: center;
padding: 15px 20px 0 20px;
position: relative;
margin: 0 22.5px 0 0;
font-family: "Open Sans", Helvetica, Arial, sans-serif;
font-size: 12px;
text-decoration: none;
color: #fff;
}
#my-breadcrumbs ul li a:after {
content: "";
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid grey;
position: absolute; right: -20px; top: 0;
}
#my-breadcrumbs ul li a:before {
content: "";
position: absolute;
margin-top: -15px;
border-width: 20px 0 20px 20px;
border-style: solid;
border-color: grey grey grey transparent;
left: -20px;
}
/* Hide the Before Pseudo Element */
#my-breadcrumbs ul li:first-child a:before {
display: none; }
/* Add Border Radius */
#my-breadcrumbs ul li:first-child a{
border-bottom-right-radius: 1px;
}
Try this
#my-breadcrumbs ul li a {
display: block;
float: left;
line-height: 13px; //Add this
height: 40px; //Change this
background: grey;
text-align: center;
padding: 15px 20px 0 20px;
position: relative;
margin: 0 22.5px 0 0;
font-family: "Open Sans", Helvetica, Arial, sans-serif;
font-size: 12px;
text-decoration: none;
color: #fff;
}
If you wantmargin between each links change margin: 0 22.5px 0 0; to margin: 0 30px 0 0;
I'd like to integrate a menu similar to this one on my website.
The issue is that for some reason I can't get the sub-items of the menu aligned to the left of the main menu item like on the code pen version.
See my JSFiddle: http://jsfiddle.net/Tw9Er/
What is the issue? Thanks
How it looks like on JSFiddle:
How it should look like (like on code pen):
JS:
function dropDown() {
$(this).find('ul').stop().slideToggle();
$(this).find('ul').parent().find('a').toggleClass('activeNav');
$(this).find('ul > li > a').removeClass('activeNav');
}
$('nav ul li ul').hide();
$('nav ul li').mouseenter(dropDown);
$('nav ul li').mouseleave(dropDown);
CSS:
#import url(http://fonts.googleapis.com/css?family=Roboto:400,300,100);
html, body {width: 100%; height: 100%}
body {font-family: 'Roboto'; background: url(http://www.prestonise.com/images/nyc.jpg) no-repeat center center; background-size: cover}
body:after {
content : "";
display: block;
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.1);
background-size: cover;
width: 100%;
height: 100%;
opacity: 1;
z-index: 1;
-webkit-animation: subtleFade 25s infinite;
animation: subtleFade 25s infinite
}
#-webkit-keyframes subtleFade
{
0% {background: rgba(0,0,0,0)}
50% {background: rgba(0,0,0,0.3)}
100% {background: rgba(0,0,0,0)}
}
#keyframes myfirst
{
0% {background: rgba(0,0,0,0)}
50% {background: rgba(0,0,0,0.3)}
100% {background: rgba(0,0,0,0)}
}
* {box-sizing: border-box}
.wrapper {position: relative; z-index: 5; height: 100%; padding: 20px}
header {margin-top: 20px; text-align: center}
header h1 {font-weight: 100; font-size: 2.5em; color: rgba(255,255,255,0.75)}
nav {margin: 20px auto}
nav ul li {display: inline-block; margin-right: -4px; margin-left: 5px; vertical align: top}
nav a {padding: 7px 10px; text-decoration: none; color: rgba(255,255,255,0.9); background: rgba(0,0,0,0); border-radius: 5px; font-weight: 300; text-transform: uppercase; letter-spacing: 1.5px; font-size: 13px}
nav a:hover {background: rgba(0,0,0,0.25)}
.activeNav {background: rgba(0,0,0,0.25)}
nav ul li ul {position: absolute; display: block; margin-top: 5px; border-radius: 5px; border-top-left-radius: 0; background: none; padding-top: 5px}
nav ul li ul li {display: block; float: none; margin: 0; padding: 0}
nav ul li ul li a {display: block; text-align: left; color: rgba(255,255,255,0.9); text-shadow: 0 1px rgba(0,0,0,0.33); padding: 10px}
nav ul li ul li a:hover {background: rgba(20,150,220,0.5); color: white; text-shadow: 0 1px rgba(0,0,0,0.5)}
.hover a {display: block;}
.hover span { color: rgba(255,255,255,0.9); background: rgba(20,150,220,0.5); border-radius: 5px; position: absolute; display: block; margin: 5px 0 0 -57px; padding: 10px; font-size: 13px; font-weight: 300; letter-spacing: 1.5px; text-transform: uppercase; text-align: center; cursor: default;}
article {width: 80%; display: block; margin: 0 auto; text-align: center}
article span {font-size: 128px; color: rgba(255,255,255,0.75)}
article span span {font-size: 48px; position: absolute; top: 152px; margin-left: -88px; color: rgba(255,255,255,.75)}
footer {position: absolute; bottom: 0px; background: rgba(0,0,0,0.8); width: 100%; padding: 20px 0; text-align: center; color: #ddd; font-weight: 300}
footer span.fa {color: #ea0; display: block; font-size: 25px; margin-bottom: 10px}
Set padding-left to 0 for your ul element. It was fixed using that on fiddle.
http://jsfiddle.net/Tw9Er/1/
EDIT:
If you inspect the element, you will see that you have 40px padding-left from -webkit-padding-start: 40px. So basically, either set the padding-left or -webkit-padding-start to fix the issue.
The reason it works on codepen is because of the padding: 0 line in reset.css file:
Try apply this;
ul {
padding-left: 0px !important;
}
If you consider them as irritating try this;
http://meyerweb.com/eric/tools/css/reset/
And rember that using !important is not a good practite - better take a look where it is being overwritten and replace it.
Once I click a menu option the whole page scrolls with it? How Do I stop this?
located on line 411 in jsfiddle
<style>#import url(http://fonts.googleapis.com/css?family=Oswald:400,300|Raleway:400,600,300|Source+Sans+Pro:400,600,300);
#charset 'UTF-8';
/* Base Styles */
#cssmenu,
#cssmenu ul,
#cssmenu li,
#cssmenu a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
font-weight: normal;
text-decoration: none;
line-height: 1;
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 15px;
position: relative;
}
#cssmenu a {
line-height: 1.3;
}
#cssmenu {
width: 200px;
}
#cssmenu > ul > li > a {
padding-right: 40px;
font-size: 13px;
font-weight: bold;
display: block;
background: #000000;
color: #9C9C9C;
border-bottom: 1px solid #393939;
text-transform: uppercase;
}
#cssmenu > ul > li > a > span {
background: #000000;
padding: 10px;
display: block;
font-size: 15px;
font-weight: 300;
}
#cssmenu > ul > li > a:hover {
text-decoration: none;
}
#cssmenu > ul > li.active {
border-bottom: none;
}
#cssmenu > ul > li.active > a {
color: #fff;
}
#cssmenu > ul > li.active > a span {
background: #000000;
}
#cssmenu span.cnt {
position: absolute;
top: px;
right: 15px;
padding: 0;
margin: 0;
background: none;
padding-top: 20px;
}
/* Sub menu */
#cssmenu ul ul {
display: none;
}
#cssmenu ul ul li {
border: 1px solid #2A2A2A;
border-top: 0;
}
#cssmenu ul ul a {
padding: 10px;
display: block;
color: #FFFFFF;
font-size: 13px;
font-weight: 200;
font-family: 'Source Sans Pro', sans-serif;
}
#cssmenu ul ul a:hover {
color: gray;
}
#cssmenu ul ul li.odd {
background: #2E2E2E;
}
#cssmenu ul ul li.even {
background: #2E2E2E;
}</style>
<style>
.class_slidshow2 {
padding-left: 200px;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
padding-left: 200px;
}
<style>.slideshow {
font-size: 30px;
text-transform: uppercase;
font-family: Arial, Verdana, sans-serif;
color: #a81c11;
display:inline;
width: 80%; /* or dependent on what you like */
float: left;
}
.slideshow {
float: right;
display:inline;
width: 20%; /* relative to width for introtekst */
}</style>
I also several have other problems. How do I keep or "stick" the whole navmenu to the right when scrolling? In a more detailed question. I want my content to be on the right of the navmenu, there will be a lot of content so once the user scrolls they should still be able to see the navmenu without having to scroll back up, and it's for my personal appeal.
located on line 411 in jsfiddle
<style>#import url(http://fonts.googleapis.com/css?family=Oswald:400,300|Raleway:400,600,300|Source+Sans+Pro:400,600,300);
#charset 'UTF-8';
/* Base Styles */
#cssmenu,
#cssmenu ul,
#cssmenu li,
#cssmenu a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
font-weight: normal;
text-decoration: none;
line-height: 1;
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 15px;
position: relative;
}
#cssmenu a {
line-height: 1.3;
}
#cssmenu {
width: 200px;
}
#cssmenu > ul > li > a {
padding-right: 40px;
font-size: 13px;
font-weight: bold;
display: block;
background: #000000;
color: #9C9C9C;
border-bottom: 1px solid #393939;
text-transform: uppercase;
}
#cssmenu > ul > li > a > span {
background: #000000;
padding: 10px;
display: block;
font-size: 15px;
font-weight: 300;
}
#cssmenu > ul > li > a:hover {
text-decoration: none;
}
#cssmenu > ul > li.active {
border-bottom: none;
}
#cssmenu > ul > li.active > a {
color: #fff;
}
#cssmenu > ul > li.active > a span {
background: #000000;
}
#cssmenu span.cnt {
position: absolute;
top: px;
right: 15px;
padding: 0;
margin: 0;
background: none;
padding-top: 20px;
}
/* Sub menu */
#cssmenu ul ul {
display: none;
}
#cssmenu ul ul li {
border: 1px solid #2A2A2A;
border-top: 0;
}
#cssmenu ul ul a {
padding: 10px;
display: block;
color: #FFFFFF;
font-size: 13px;
font-weight: 200;
font-family: 'Source Sans Pro', sans-serif;
}
#cssmenu ul ul a:hover {
color: gray;
}
#cssmenu ul ul li.odd {
background: #2E2E2E;
}
#cssmenu ul ul li.even {
background: #2E2E2E;
}</style>
<style>
.class_slidshow2 {
padding-left: 200px;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
padding-left: 200px;
}
<style>.slideshow {
font-size: 30px;
text-transform: uppercase;
font-family: Arial, Verdana, sans-serif;
color: #a81c11;
display:inline;
width: 80%; /* or dependent on what you like */
float: left;
}
.slideshow {
float: right;
display:inline;
width: 20%; /* relative to width for introtekst */
}</style>
I also noticed that on all browsers the background moves when the user scrolls. This causes the whole page to look disorientated. I did try to , position: fix; , but that had no effect.
Jsfiddle: http://jsfiddle.net/8GzLv/
Paste the whole markup in: http://www.jmarshall.com/easy/html/testbed.html ,so you can see what I am talking about. Or zoom out of Jsfiddle within the browser.
This is the styling for the background: located on line 334 in Jsfiddle
<style>#headerWrapper {
position: fixed;
width: 200px;
height: 100%;
background-color: black; /* Omit to see body content scroll behind radius. */
}
#headerBorder{
border: black;
border-radius: 35px;
-moz-border-radius: 35px;
-webkit-border-radius: 35px;
overflow:hidden;
}
#headerContent {
background-image:url("http://www.fimfiction-static.net/images/story_images/92970_r.png?1364253348");
background-position: left;
background-repeat: no-repeat;
background-size: cover;
height: 200px;
opacity: 1;
}</style>
And how do I get the content to the top of the screen, and right next to the navmenu
You'll want to float your menu to the left if you want the content to appear at the top of the screen, as well as give your slideshows widths that are less than 1100px. Next, if you want the nav-bar to stop affecting your content, the content will have to be in its own div. I would float that div to the right instead of the individual slideshow divs. Lastly, to get the navbar to scroll with you, you need to give it a position of fixed, or use some javascript. Anyways, it seems that you'll want to use a column layout, so I suggest looking that up.
Here's the jsfiddle: http://jsfiddle.net/8GzLv/1/
I tried not to change your code too much, so the css is in one of your style tags. But like I mentioned above, there is now a div around your slideshows with the class of content, and a div around your menu with the class of menu-placeholder.
But the important css parts to look at are:
.content {
width:800px;
overflow:hidden;
}
.menu-placeholder {
float:left;
clear:left;
min-height:250px;
width:200px;
}
#cssmenu {
position:fixed;
top:150px;
}
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