Mobile navigation bar is not appearing - html

I have got a basic mobile navigation bar, but it is not appearing. It is there, but it is just not showing up on live site. When i look on inspect element then i can see the mobile nav is there, but it is just not showing up on the live site.
I have googled for a solution, I have searched on here and nothing seems to helps.
HTML
<span class="header-nav">
<header ng-controller="Headerng-controller" mouseleave="hideHoverMenu()" class="scope" id="headerRoot">
<div class="top">
<h1>Galaxy Games</h1>
<h1>Galaxy Games</h1>
<nav role="navigation" aria-labelledby="main-nav" class="hidden-xxs hidden-xs hidden-sm">
Home
Games
Videos
Newswire
Social Club
Downloads
Warehouse
Support
</div>
</div>
</nav>
CSS
header#headerRoot a{
text-decoration:none !important
}
header#headerRoot .gl-wrapper{
font-size:10px;
position:absolute;
z-index:75;
right:15px;
bottom:0
}
#media screen and (max-width:991px){
header#headerRoot .gl-wrapper
{
bottom:auto;
top:50%;
transform:translateY(-50%)
}
}
header#headerRoot>.top{
width:100%;
position:absolute;
z-index:50;
color:#fff
}
header#headerRoot>.top a.hamburger-menu-btn{
background-image:url(../img/global/mobile-nav-sprite.png);
background-repeat: no-repeat;
vertical-align: middle;
position: absolute;
top: 50%;
left: 15px;
transform: translateY(-50%);
width: 40px;
height: 40px;
}
header#headerRoot a {
text-decoration: none!important;
}
#media (max-width: 767px){
.visible-xs {
display: block!important;
}
}
.mobile-nav-shown #siteMobileNav {
z-index: 10;
position: relative;
min-height: 100vh;
transform: matrix(1,0,0,1,0,0);
}
#siteMobileNav {
position: fixed;
box-shadow: inset -10px 3px 17px -16px rgba(50,50,50,.71);
padding: 5px 0;
left: 0;
width: 270px;
background: #fff;
color: #fff;
min-height: 100%;
transform: matrix(1,0,0,1,-270,0);
}
#media screen and (max-width:991px){
header#headerRoot>.top
{
border-bottom:1px solid #000;
height:70px
}
header#headerRoot>.top nav
{
margin:0
}
}
header#headerRoot>.top a.logo.logo-side{
width:36px;
position:absolute;
left:15px;
padding-top:16px;
z-index:100;
transform:matrix(1,0,0,1,0,-175);
transition:transform .3s cubic-bezier(.19,1,.22,1)
}
.header-collapsed header#headerRoot>.top a.logo.logo-side{
transform:matrix(1,0,0,1,0,-8)
}
#media screen and (max-width:991px){
header#headerRoot>.top a.logo.logo-side
{
display:none;
}
}
header#headerRoot>.top a.logo.logo-main{
z-index:20;
left:0;
right:0;
width:650px;
height:75px;
margin:20px auto;
position:absolute;
transform:matrix(1,0,0,1,0,0);
transition:transform .3s cubic-bezier(.19,1,.22,1)
}
.header-collapsed header#headerRoot>.top a.logo.logo-main{
transform:matrix(.5,0,0,.5,0,-100)
}
#media screen and (max-width:991px){
header#headerRoot>.top a.logo.logo-main
{
margin:0 auto;
height:100%;
padding:10px;
transform:matrix(1,0,0,1,0,0) !important
}
}
header#headerRoot>.top a.logo.white{
background-position:50% !important
}
header#headerRoot>.bottom{
z-index:20;
position:absolute;
width:100%;
top:100%;
margin-top:-1px;
transform:translateY(-1px)
}
header#headerRoot nav{
z-index:20;
position:relative;
max-width:1920px;
margin:99px auto 0;
padding:0 15px;
transition:margin-top .3s cubic-bezier(.19,1,.22,1);
font-size:1em;
-webkit-backface-visibility:hidden;
backface-visibility:hidden
}
#media screen and (max-width:991px){
header#headerRoot nav
{
font-size:.9em
}
}
.header-collapsed header#headerRoot nav{
margin-top:0
}
header#headerRoot nav a{
display:inline-block;
zoom:1;
*display:inline;
vertical-align:top;
float:none !important;
color:inherit;
margin-right:20px;
padding:15px 0;
position:relative;
outline:none;
transition:all .2s
}
header#headerRoot nav a:lang(en_us){
padding:15px 4px
}
#media screen and (max-width:991px){
header#headerRoot nav a
{
margin-right:10px !important
}
header#headerRoot nav a:first-child
{
margin-left:-30px
}
}
header#headerRoot nav a:before{
content:"";
position:absolute;
bottom:0;
left:0;
width:100%;
height:0;
background:#ff0000;
transition:height .15s linear
}
header#headerRoot nav a:hover{
text-decoration:none;
color:#fff
}
header#headerRoot nav a#active:before,header#headerRoot nav a:hover:before{
height:3px
}
header#headerRoot nav .search{
position:relative;
display:inline-block;
zoom:1;
*display:inline;
vertical-align:top;
float:none !important;
margin-top:15px
}
header#headerRoot nav .search span{
cursor:pointer;
position:relative;
z-index:7
}
header#headerRoot nav .search .searchbox{
pointer-events:none;
position:fixed;
z-index:6;
top:99px;
left:0;
padding-top:7px;
background:#000;
text-align:center;
opacity:0;
width:100%;
transform:translateZ(0);
transition:top .3s cubic-bezier(.19,1,.22,1),opacity .3s cubic-bezier(.19,1,.22,1)
}
.header-collapsed header#headerRoot nav .search .searchbox{
top:0
}
header#headerRoot nav .search.shown span{
text-shadow:none
}
header#headerRoot nav .search.shown span:before{
color:#fff !important
}
header#headerRoot nav .search.shown .searchbox{
pointer-events:auto;
opacity:1
}
header#headerRoot section.hover-menu{
background:#fff;
border-top:1px solid #000;
border-bottom:4px solid #000;
width:100%;
position:absolute;
z-index:10;
text-align:left;
font-size:.9em
}
Screenshot:
https://imgur.com/0PlRMIb
Any help appreciated and thanks in advance.

It's just for color:inherit in the header#headerRoot nav a, now it's white and you cannot see the links. so, replace it to some color that you can see it like black:
header#headerRoot nav a{
display:inline-block;
zoom:1;
*display:inline;
vertical-align:top;
float:none !important;
color:inherit; // -> change it to black or ...
margin-right:20px;
padding:15px 0;
position:relative;
outline:none;
transition:all .2s
}
I created a snippet to show you what should you do:
Notice: There are some unclosed tags that you should care about it in your original code.
header#headerRoot a{
text-decoration:none !important
}
header#headerRoot .gl-wrapper{
font-size:10px;
position:absolute;
z-index:75;
right:15px;
bottom:0
}
#media screen and (max-width:991px){
header#headerRoot .gl-wrapper
{
bottom:auto;
top:50%;
transform:translateY(-50%)
}
}
header#headerRoot>.top{
width:100%;
position:absolute;
z-index:50;
color:#fff
}
header#headerRoot>.top a.hamburger-menu-btn{
background-image:url(../img/global/mobile-nav-sprite.png);
background-repeat: no-repeat;
vertical-align: middle;
position: absolute;
top: 50%;
left: 15px;
transform: translateY(-50%);
width: 40px;
height: 40px;
}
header#headerRoot a {
text-decoration: none!important;
}
#media (max-width: 767px){
.visible-xs {
display: block!important;
}
}
.mobile-nav-shown #siteMobileNav {
z-index: 10;
position: relative;
min-height: 100vh;
transform: matrix(1,0,0,1,0,0);
}
#siteMobileNav {
position: fixed;
box-shadow: inset -10px 3px 17px -16px rgba(50,50,50,.71);
padding: 5px 0;
left: 0;
width: 270px;
background: #fff;
color: #fff;
min-height: 100%;
transform: matrix(1,0,0,1,-270,0);
}
#media screen and (max-width:991px){
header#headerRoot>.top
{
border-bottom:1px solid #000;
height:70px
}
header#headerRoot>.top nav
{
margin:0
}
}
header#headerRoot>.top a.logo.logo-side{
width:36px;
position:absolute;
left:15px;
padding-top:16px;
z-index:100;
transform:matrix(1,0,0,1,0,-175);
transition:transform .3s cubic-bezier(.19,1,.22,1)
}
.header-collapsed header#headerRoot>.top a.logo.logo-side{
transform:matrix(1,0,0,1,0,-8)
}
#media screen and (max-width:991px){
header#headerRoot>.top a.logo.logo-side
{
display:none;
}
}
header#headerRoot>.top a.logo.logo-main{
z-index:20;
left:0;
right:0;
width:650px;
height:75px;
margin:20px auto;
position:absolute;
transform:matrix(1,0,0,1,0,0);
transition:transform .3s cubic-bezier(.19,1,.22,1)
}
.header-collapsed header#headerRoot>.top a.logo.logo-main{
transform:matrix(.5,0,0,.5,0,-100)
}
#media screen and (max-width:991px){
header#headerRoot>.top a.logo.logo-main
{
margin:0 auto;
height:100%;
padding:10px;
transform:matrix(1,0,0,1,0,0) !important
}
}
header#headerRoot>.top a.logo.white{
background-position:50% !important
}
header#headerRoot>.bottom{
z-index:20;
position:absolute;
width:100%;
top:100%;
margin-top:-1px;
transform:translateY(-1px)
}
header#headerRoot nav{
z-index:20;
position:relative;
max-width:1920px;
margin:99px auto 0;
padding:0 15px;
transition:margin-top .3s cubic-bezier(.19,1,.22,1);
font-size:1em;
-webkit-backface-visibility:hidden;
backface-visibility:hidden
}
#media screen and (max-width:991px){
header#headerRoot nav
{
font-size:.9em
}
}
.header-collapsed header#headerRoot nav{
margin-top:0
}
header#headerRoot nav a{
display:inline-block;
zoom:1;
*display:inline;
vertical-align:top;
float:none !important;
color:black;
margin-right:20px;
padding:15px 0;
position:relative;
outline:none;
transition:all .2s
}
header#headerRoot nav a:lang(en_us){
padding:15px 4px
}
#media screen and (max-width:991px){
header#headerRoot nav a
{
margin-right:10px !important
}
header#headerRoot nav a:first-child
{
margin-left:-30px
}
}
header#headerRoot nav a:before{
content:"";
position:absolute;
bottom:0;
left:0;
width:100%;
height:0;
background:#ff0000;
transition:height .15s linear
}
header#headerRoot nav a:hover{
text-decoration:none;
color:#fff
}
header#headerRoot nav a#active:before,header#headerRoot nav a:hover:before{
height:3px
}
header#headerRoot nav .search{
position:relative;
display:inline-block;
zoom:1;
*display:inline;
vertical-align:top;
float:none !important;
margin-top:15px
}
header#headerRoot nav .search span{
cursor:pointer;
position:relative;
z-index:7
}
header#headerRoot nav .search .searchbox{
pointer-events:none;
position:fixed;
z-index:6;
top:99px;
left:0;
padding-top:7px;
background:#000;
text-align:center;
opacity:0;
width:100%;
transform:translateZ(0);
transition:top .3s cubic-bezier(.19,1,.22,1),opacity .3s cubic-bezier(.19,1,.22,1)
}
.header-collapsed header#headerRoot nav .search .searchbox{
top:0
}
header#headerRoot nav .search.shown span{
text-shadow:none
}
header#headerRoot nav .search.shown span:before{
color:#fff !important
}
header#headerRoot nav .search.shown .searchbox{
pointer-events:auto;
opacity:1
}
header#headerRoot section.hover-menu{
background:#fff;
border-top:1px solid #000;
border-bottom:4px solid #000;
width:100%;
position:absolute;
z-index:10;
text-align:left;
font-size:.9em
}
<span class="header-nav">
<header ng-controller="Headerng-controller" mouseleave="hideHoverMenu()" class="scope" id="headerRoot">
<div class="top">
<h1>Galaxy Games</h1>
<h1>Galaxy Games</h1>
<nav role="navigation" aria-labelledby="main-nav" class="hidden-xxs hidden-xs hidden-sm">
Home
Games
Videos
Newswire
Social Club
Downloads
Warehouse
Support
</div>
</div>
</nav>

Related

how to put article below section and aside, but above footer

so at first i was just doing a section and aside, with footer at bottom. no problem, they were where i wanted, now i want to add another
so i want the yellow bit which is the article to be centered below the achievements and favorites section, but above footer. i've been messing around with positions, clear, float, margins and i'm losing my sanity for this assignment that's due next week. So far all i've managed to achieve is either putting it behind or on top of the section and article.
please help.
keep in mind: i have to have a liquid page layout
body{
background:white;
margin:0;
font-family:arial;
margin-left:0;
margin-right:0;
}
#typeAbout{
font-family:'Fira Mono', monospace;
text-align:center;
position:relative;
color:black;
font-size:40px;
margin:0.5%;
width:max-content;/*this is interefering with text alignment for some reason*/
}
#typeAbout::before,
#typeAbout::after{
content:"";
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
}
#typeAbout::before{
background:white;
animation:typewriter 2s steps(11) 500ms forwards;/*steps stand for letter characters*/
}
#typeAbout::after{
width:0.125em;
background:black;
animation:typewriter 2s steps(11) 500ms forwards, blink 500ms steps(11) infinite;
}
#keyframes typewriter{
to{
left:100%;
}
}
#keyframes blink{
to{
background:transparent;
}
}
.navbar ul{
top:0;
list-style:none;
text-align:center;
background:purple;
margin:0;
margin-top:0;
padding:0.5%;
box-shadow:0 0 40px 0;
}
.navbar li{
display:inline-block;
}
.navbar a{
text-decoration:none;
text-align:center;
color:black;
width:100px;
display:block;
padding:10% 10%;
text-transform:uppercase;
}
.navbar a:hover{
background:lightgray;
}
section{
font-family:'Fira Mono', monospace;
position:absolute;
float:left;
width:28%;
height:50%;
margin-top:1%;
margin-bottom:5%;
margin-left:20%;
padding-left:1%;
background-color:white;
border-radius: 10px;
box-shadow:2px 2px 2px 2px lightgray;
}
aside{
float:right;
width:25%;
height:100%;
margin-top:1%;
margin-right:20%;
padding-left:1%;
background-color:lightgray;
border-radius: 10px;
box-shadow:2px 2px 2px 2px lightgray;
}
article{
position:inital;
background:yellow;
clear:both;
}
footer{
position: absolute;
bottom:0;
clear:both;
width:100%;
height:10%;
background-color:red;
}
Maybe you can try something like this. You didn't provide all your code so I just made something similar with your code. Let me know
body{
background:white;
margin:0;
font-family:arial;
margin-left:0;
margin-right:0;
}
#typeAbout{
font-family:'Fira Mono', monospace;
text-align:center;
position:relative;
color:black;
font-size:40px;
margin:0.5%;
width:max-content;/*this is interefering with text alignment for some reason*/
}
#typeAbout::before,
#typeAbout::after{
content:"";
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
}
#typeAbout::before{
background:white;
animation:typewriter 2s steps(11) 500ms forwards;/*steps stand for letter characters*/
}
#typeAbout::after{
width:0.125em;
background:black;
animation:typewriter 2s steps(11) 500ms forwards, blink 500ms steps(11) infinite;
}
#keyframes typewriter{
to{
left:100%;
}
}
#keyframes blink{
to{
background:transparent;
}
}
.navbar ul{
top:0;
list-style:none;
text-align:center;
background:purple;
margin:0;
margin-top:0;
padding:0.5%;
box-shadow:0 0 40px 0;
}
.navbar li{
display:inline-block;
}
.navbar a{
text-decoration:none;
text-align:center;
color:black;
width:100px;
display:block;
padding:10%;
text-transform:uppercase;
}
.navbar a:hover{
background:lightgray;
}
.wrapper{
display: flex;
justify-content: space-evenly;
}
section{
font-family:'Fira Mono', monospace;
width:100%;
height:auto;
margin-top:1%;
margin-bottom:5%;
margin-left:20%;
padding-left:1%;
background-color:white;
border-radius: 10px;
box-shadow:2px 2px 2px 2px lightgray;
}
aside{
width:100%;
height:100%;
margin-top:1%;
margin-right:20%;
padding-left:1%;
background-color:lightgray;
border-radius: 10px;
box-shadow:2px 2px 2px 2px lightgray;
}
article{
position:inital;
background:yellow;
clear:both;
}
footer{
position: absolute;
bottom:0;
clear:both;
width:100%;
height:10%;
background-color:red;
}
<nav class="navbar">
<ul>
<li>HOME</li>
<li>ORIGIN</li>
<li>ABOUT</li>
<li>STUDY</li>
<li>ANIMATION</li>
</ul>
</nav>
<div class="wrapper">
<div>
<section>This is the achievements</section>
</div>
<div>
<article> This is your article</article>
</div>
<div>
<aside> This is your Favourite</aside>
</div>
</div>

nav menu with icon html

Trying to make a responsive nav menu with icons in html. Its supposed to look like "image 1" but instead it looks like "image 2". Any ideas on how to fix it? it was working fine, but when I added icons to the nav menu, it went wrong. Thanks in advance.
My code
Home
My Work
About Me
Get in Touch
</ul>
<a class="toggle-nav" href="#">☰</a>
</nav>
<style>
.icons1 {
width: 40px;
height: 30.5px;
margin-left: 38px;
background: url('http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png') no-repeat;
background-size: contain;
margin-top: 15px;
float: left;
}
.current-item{
width: 40px;
height: 30.5px;
margin-top: 30px;
background: url('http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png') no-repeat;
background-size: contain;
}
/*----- Toggle Button -----*/
.toggle-nav {
display:none;
}
/*----- Menu -----*/
#media screen and (min-width: 860px) {
.menu {
width:100%;
height:100px;
box-shadow:0px 1px 1px rgba(0,0,0,0.15);
border-radius:3px;
background:#303030;
}
}
.menu ul {
display:inline-block;
margin-top:10px;
height:90px;
}
.menu li {
margin:0px 50px 0px 0px;
float:left;
list-style:none;
font-size:17px;
margin-top:10px;
height:70px;
}
.menu li:last-child {
margin-right:0px;
}
.menu a {
text-shadow:0px 1px 0px rgba(0,0,0,0.5);
color:#777;
transition:color linear 0.15s;
text-decoration: none;
line-height:6;
}
.menu a:hover, .menu .current-item a {
text-decoration:none;
color:#66a992;
}
/*----- Responsive -----*/
#media screen and (max-width: 1150px) {
.wrap {
width:90%;
}
}
#media screen and (max-width: 970px) {
.search-form input {
width:120px;
}
}
#media screen and (max-width: 860px) {
.menu {
position:relative;
display:inline-block;
width:100%;
text-align:center;
background-color:red;
}
.menu ul.active {
display:none;
}
.menu ul {
width:100%;
position:absolute;
top:120%;
left:0px;
padding:10px 0px;
box-shadow:0px 1px 1px rgba(0,0,0,0.15);
border-radius:3px;
background:#303030;
}
.menu ul:after {
width:0px;
height:0px;
position:absolute;
top:0%;
left:22px;
content:'';
transform:translate(0%, -100%);
border-left:7px solid transparent;
border-right:7px solid transparent;
border-bottom:7px solid #303030;
}
.menu li {
margin:5px 0px 5px 0px;
float:none;
display:block;
}
.menu a {
display:block;
}
.toggle-nav {
padding:20px;
float:left;
display:inline-block;
box-shadow:0px 1px 1px rgba(0,0,0,0.15);
border-radius:3px;
background:#303030;
text-shadow:0px 1px 0px rgba(0,0,0,0.5);
color:#777;
font-size:20px;
transition:color linear 0.15s;
}
.toggle-nav:hover, .toggle-nav.active {
text-decoration:none;
color:#66a992;
}
.search-form {
margin:12px 0px 0px 20px;
float:left;
}
.search-form input {
box-shadow:-1px 1px 2px rgba(0,0,0,0.1);
}
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function() {
jQuery('.toggle-nav').click(function(e) {
jQuery(this).toggleClass('active');
jQuery('.menu ul').toggleClass('active');
e.preventDefault();
});
});
</script>
try adding white-space:nowrap; to .menu a
.menu a {
text-shadow:0px 1px 0px rgba(0,0,0,0.5);
color:#777;
transition:color linear 0.15s;
text-decoration: none;
line-height:6;
white-space:nowrap;
}

Responsive html the tablet resolution css messes up the desktop resolution css

I'm making a responsive demo website and i'm having trouble with the medium resolution as when i put the css for it in my style sheet the high res no longer works. anyone know why that is/ how to fix it? My code below:
#charset "utf-8";
/* CSS Document */
/* low res or phone */
#media only screen and (max-width: 480px) {
.LoginStuff li
{
display: inline;
float: right!important;
position:relative;
top: -50px;
right: 10px;
}
.reg1 a
{
border-radius: 0px 3px 3px 0px;
border-left-width: 1px;
border-left-style:solid;
border-left-color:#ce542c;
padding: 5px 5px;
font-size:15px;
font-family:Arial;
font-weight:bold;
color: #fff;
background-color:#f7cf1c;
text-decoration:none;
}
.log1 a
{
border-radius: 3px 0px 0px 3px;
border-right-width: 0.5px;
border-right-style:solid;
border-right-color:#ce542c;
padding: 5px 12px;
font-size:15px;
font-family:Arial;
font-weight:bold;
color: #fff;
background-color:#f7cf1c;
text-decoration:none;
}
.nav
{
visibility: hidden;
}
/*start menu*/
.clearfix a
{
background-color:#f7cf1c;
margin-right:auto;
margin-left:auto;
width:277px;
height:30px;
position:relative;
left: -34px;
}
.AMenu
{
margin-right:auto;
margin-left:auto;
padding-left: 100px;
position:relative;
left:35px;
}
.menu-wrap
{
width:100%;
background-color:#f7cf1c;
align-content:center;
margin-right:auto;
margin-left:auto;
}
.menu
{
width:100%;
height:40px;
background-color:#f7cf1c;
position:relative;
margin-left:auto;
margin-right:auto;
}
.menu li {
margin:0px;
text-decoration:none;
list-style:none;
font-family:"Alfa Slab One";
margin-right:auto;
margin-left:auto;
}
.menu a {
transition:all linear 0.15s;
text-decoration:none;
color:#fff;
margin-right:auto;
margin-left:auto;
}
.menu .arrow {
font-size:11px;
line-height:0%;
}
/*----- Top Level -----*/
.menu > ul > li {
display:inline-block;
position:relative;
font-size:19px;
}
.menu > ul > li > a {
padding:10px 40px;
display:inline-block;
}
/*----- Bottom Level -----*/
.menu li:hover .sub-menu {
z-index:1;
opacity:1;
}
.menu li:active .sub-menu {
z-index:1;
opacity:1;
}
.sub-menu {
width:160%;
padding:5px 0px;
position:absolute;
top:100%;
left:0px;
z-index:-1;
opacity:0;
transition:opacity linear 0.15s;
background:#f7cf1c;
}
.sub-menu li {
display:block;
font-size:16px;
}
.sub-menu li a {
padding:10px 30px;
display:block;
}
/*finish menu*/
.topnav
{
margin-bottom: 10px;
}
.mobistrip
{
width: 200px;
height: 200px;
margin-right:auto;
margin-left:auto;
background-color:#f7cf1c;
position:relative;
left: 0px;
}
.createYearbook
{
position:relative;
left:0px;
margin-right:auto;
margin-left:auto;
padding-bottom:20px;
width:350px;
height:50px;
font-family:"Alfa Slab One";
font-size: 15px;
font-weight:lighter;
text-align:center
}
.createYearbook a
{
color: #000;
text-decoration:none;
background-color:#ce542c;
padding: 5px 15px;
border-radius: 3px 3px 3px 3px;
}
.continue
{
position:relative;
left:0px;
margin-right:auto;
margin-left:auto;
width:340px;
height:50px;
text-align:center;
}
.continue a
{
font-size:24px;
font-family:Arial;
font-weight:bolder;
color: #fff;
background-color:#ce542c;
text-decoration:none;
padding: 10px 10px;
border-radius: 3px 3px 3px 3px;
}
.undernav li
{
position:relative;
top: -150px;
display:inline;
height: 50px;
}
.ach
{
width:450px;
height:50px;
padding-top:20px;
padding-bottom:20px;
position:relative;
left:0px;
top: 140px;
}
.ach a
{
font-family:Arial;
font-size:25px;
color:#4e4d4d;
font-weight:bold;
text-decoration:none;
padding-right: 25px;
padding-left: 25px;
padding-bottom:20px;
border-bottom-width:8px;
border-bottom-color:#4e4d4d;
border-bottom-style:solid;
}
.jumbotron
{
visibility: hidden;
padding: 0px;
}
/*choose size Stuff*/
.ChooseSizeA2
{
width:237px;
font-family:Arial;
font-size:15px;
color:#4e4d4d;
font-weight:bold;
background-color:#fff;
position:relative;
top:-900px;
margin-right:auto;
margin-left:auto;
}
.ChooseSize
{
align-content:center;
background-color:#fff;
}
.picksize
{
position:relative;
top:-900px;
left: -15;
margin-right:auto;
margin-left:auto;
}
.sizepics img
{
background-color:#fff;
border-width:6px;
border-color:#f7cf1c;
border-style:solid;
margin-right:auto;
margin-left:auto
}
}
/* med res or ipad */
#media only screen and (min-width: 481px) {
.nav
{
visibility:hidden;
}
.LoginStuff li
{
display: inline;
float: right!important;
position:relative;
top: -50px;
right: 10px;
}
.reg1 a
{
border-radius: 0px 3px 3px 0px;
border-left-width: 1px;
border-left-style:solid;
border-left-color:#ce542c;
padding: 10px 10px;
font-size:20px;
font-family:Arial;
font-weight:bold;
color: #fff;
background-color:#f7cf1c;
text-decoration:none;
}
.log1 a
{
border-radius: 3px 0px 0px 3px;
border-right-width: 0.5px;
border-right-style:solid;
border-right-color:#ce542c;
padding: 10px 20px;
font-size:20px;
font-family:Arial;
font-weight:bold;
color: #fff;
background-color:#f7cf1c;
text-decoration:none;
}
.nav
{
visibility: hidden;
}
/*start menu*/
.clearfix a
{
background-color:#f7cf1c;
margin-right:auto;
margin-left:auto;
width:300px;
height:20px;
padding-bottom:10px;
position:relative;
left: -30px;
}
.AMenu
{
margin-right:auto;
margin-left:auto;
padding-left: 100px;
position:relative;
left:40px;
}
.menu-wrap
{
width:100%;
background-color:#f7cf1c;
align-content:center;
margin-right:auto;
margin-left:auto;
}
.menu
{
width:100%;
height:68px;
background-color:#f7cf1c;
position:relative;
margin-left:auto;
margin-right:auto;
}
.menu li
{
margin:0px;
text-decoration:none;
list-style:none;
font-family:"Alfa Slab One";
margin-right:auto;
margin-left:auto;
position:relative;
top: 15px;
}
.menu a
{
transition:all linear 0.15s;
text-decoration:none;
color:#fff;
margin-right:auto;
margin-left:auto;
}
.menu .arrow
{
font-size:24px;
line-height:0%;
}
/*----- Top Level -----*/
.menu > ul > li
{
display:inline-block;
position:relative;
font-size:24px;
}
.menu > ul > li > a
{
padding:0px 20px;
display:inline-block;
}
/*----- Bottom Level -----*/
.menu li:hover .sub-menu
{
z-index:1;
opacity:1;
}
.menu li:active .sub-menu
{
z-index:1;
opacity:1;
}
.sub-menu
{
width:500px;
height:300px;
padding:0px 0px;
padding-bottom:60px;
padding-top:20px;
padding-left:35px;
position:absolute;
top:100%;
left:-100px;
z-index:-1;
opacity:0;
transition:opacity linear 0.15s;
background:#f7cf1c;
border-radius: 0px 0px 3px 3px;
}
.sub-menu li
{
display:block;
font-size:25px;
}
.sub-menu li a
{
padding:20px 20px;
display:block;
}
/*finish menu*/
.topnav
{
margin-bottom: 10px;
}
.createYearbook
{
position:relative;
left:-10px;
bottom:90px;
margin-right:auto;
float:left;
padding-bottom:50px;
width:500px;
height:70px;
font-family:"Alfa Slab One";
font-size: 14px;
font-weight:lighter;
text-align:center
}
.createYearbook h1
{
width:380px;
}
.createYearbook a
{
color: #000;
text-decoration:none;
background-color:#ce542c;
padding: 15px 30px;
border-radius: 3px 3px 3px 3px;
}
.continue
{
position:relative;
right:-10px;
bottom: 209px;
float:right;
margin-left:auto;
width:400px;
height:70px;
text-align:center;
}
.continue a
{
font-size:28px;
font-family:Arial;
font-weight:bolder;
color: #fff;
background-color:#ce542c;
text-decoration:none;
padding: 17.4px 10px;
border-radius: 3px 3px 3px 3px;
}
.undernav li
{
position:relative;
top: -300px;
display:inline;
height: 50px;
}
.ach
{
width:600px;
height:50px;
padding-top:20px;
padding-bottom:20px;
position:relative;
left:-10px;
top: 140px;
margin-right:auto;
margin-left:auto;
}
.ach a
{
font-family:Arial;
font-size:32px;
color:#4e4d4d;
font-weight:bold;
text-decoration:none;
padding-right: 25px;
padding-left: 25px;
padding-bottom:20px;
border-bottom-width:8px;
border-bottom-color:#4e4d4d;
border-bottom-style:solid;
margin-right:10px;
margin-left:10px;
}
.circlesT
{
visibility:hidden;
}
.jumbotron
{
padding-top: 20px;
background-image:url(http://yourprintsolution.co.uk/littlechickdemo/pics/pic_1.gif);
height: 200px;
background-repeat: no-repeat;
background-size: cover;
position:relative;
top: 10px;
}
.jumbotron .container
{
position: relative;
background-color:transparent;
}
.jumbotron h1
{
color: #fff;
font-size: 20px;
font-family:"Alfa Slab One";
text-outline:#DFDFDF;
background-color:transparent;
padding-left:140px;
position:relative;
bottom:50px;
display: inline;
float: left!important;
margin-right: auto;
}
/*choose size Stuff*/
.ChooseSizeA2
{
width:237px;
font-family:Arial;
font-size:15px;
color:#4e4d4d;
font-weight:bold;
background-color:#fff;
position:relative;
top:-0px;
margin-right:auto;
margin-left:auto;
}
.ChooseSize
{
align-content:center;
background-color:#fff;
}
.picksize
{
position:relative;
top:0px;
left: -15;
margin-right:auto;
margin-left:auto;
}
.sizepics img
{
background-color:#fff;
border-width:6px;
border-color:#f7cf1c;
border-style:solid;
margin-right:auto;
margin-left:auto
}
}
/* high res or computer */
#media only screen and (min-width: 1024px) {
.menu-wrap
{
visibility: hidden;
}
.bg
{
background-color:#fff;
}
.filler
{
width: 100%;
height: 200px;
background-color:#f7cf1c;
}
.fillera
{
padding-top:30px;
background-color:#fff;
}
*
{
background-color:#eae9e9;
}
.LoginStuff li
{
display: inline;
float: right!important;
position:relative;
top: 140px;
}
.reg1 a
{
border-radius: 0px 3px 3px 0px;
border-left-width: 1px;
border-left-style:solid;
border-left-color:#ce542c;
padding: 14px 10px;
font-size:18px;
font-family:Arial;
font-weight:bold;
color: #fff;
background-color:#f7cf1c;
text-decoration:none;
transition-property: background;
transition-duration: 0.3s;
transition-timing-function: ease;
transition-delay: 0;
}
.reg1 a:hover
{
border-radius: 0px 3px 3px 0px;
border-left-width: 1px;
border-left-style:solid;
border-left-color:#ce542c;
padding: 14px 10px;
font-size:18px;
font-family:Arial;
font-weight:bold;
color: #000;
background-color:#ce542c;
text-decoration:none;
}
.log1 a
{
border-radius: 3px 0px 0px 3px;
border-right-width: 1px;
border-right-style:solid;
border-right-color:#ce542c;
padding: 14px 20px;
font-size:18px;
font-family:Arial;
font-weight:bold;
color: #fff;
background-color:#f7cf1c;
text-decoration:none;
transition-property: background;
transition-duration: 0.3s;
transition-timing-function: ease;
transition-delay: 0;
}
.log1 a:hover
{
border-radius: 3px 0px 0px 3px;
border-right-width: 1px;
border-right-style:solid;
border-right-color:#ce542c;
padding: 14px 20px;
font-size:18px;
font-family:Arial;
font-weight:bold;
color: #000;
background-color:#ce542c;
text-decoration:none;
}
.list
{
padding-top:200px;
}
.nav{
padding-top:200px;
}
.nav ul {
padding-left: 0;
}
.nav a {
padding: 30px 20px;
font-size:22px;
font-family:"Alfa Slab One";
color: #fff;
background-color:#f7cf1c;
text-decoration:none;
float: left!important;
margin-right: auto;
transition-property: background;
transition-duration: 0.3s;
transition-timing-function: ease;
transition-delay: 0;
}
.nav a:hover
{
padding: 30px 20px;
font-size:22px;
font-family:"Alfa Slab One";
color: #000;
background-color:#ce542c;
text-decoration:none;
float: left!important;
margin-right: auto;
}
.nav li {
display: inline;
float: left!important;
margin-right: auto;
}
.hide
{
visibility: hidden;
}
.createYearbook
{
padding-top:50px;
width:330px;
height:70px;
font-family:"Alfa Slab One";
font-size:14px;
font-weight:lighter;
float:left;
text-align:left;
}
.createYearbook a
{
color:#f7cf1c;
padding: 10px 10px;
border-radius: 3px 3px 3px 3px;
transition-property: background;
transition-duration: 0.3s;
transition-timing-function: ease;
transition-delay: 0;
text-decoration:none;
}
.createYearbook a:hover
{
color: #fff;
background-color:#f7cf1c;
padding: 10px 10px;
border-radius: 3px 3px 3px 3px;
}
.undernav li
{
display:inline;
padding: 15px 20px;
height: 70px;
}
.ach
{
width:500px;
height:70px;
float:right;
padding-top:50px;
padding-bottom:0px;
}
.ach a
{
font-family:Arial;
font-size:24px;
color:#4e4d4d;
font-weight:bold;
text-decoration:none;
padding: 28px 10px;
border-bottom-width:8px;
border-bottom-color:#eae9e9;
border-bottom-style:solid;
transition-property:all;
transition-duration: 0.3s;
transition-timing-function: ease;
transition-delay: 0;
}
.ach a:hover
{
font-family:Arial;
font-size:24px;
color:#4e4d4d;
font-weight:bold;
text-decoration:none;
padding: 28px 10px;
border-bottom-width:8px;
border-bottom-color:#4e4d4d;
border-bottom-style:solid;
}
.continue
{
width:340px;
height:70px;
float:right!important;
padding-top:50px;
text-align:right;
}
.continue a
{
font-size:24px;
font-family:Arial;
font-weight:bolder;
color: #fff;
background-color:#f7cf1c;
text-decoration:none;
padding: 14px 10px;
border-radius: 3px 3px 3px 3px;
transition-property: background;
transition-duration: 0.3s;
transition-timing-function: ease;
transition-delay: 0;
}
.continue a:hover
{
font-size:24px;
font-family:Arial;
font-weight:bolder;
color: #000;
background-color:#ce542c;
text-decoration:none;
padding: 14px 10px;
border-radius: 3px 3px 3px 3px;
}
.pic img
{
padding-top: 8px;
background-color:transparent;
}
.jumbotron {
padding-top: 20px;
background-image:url(http://yourprintsolution.co.uk/littlechickdemo/pics/pic_1.gif);
height: 500px;
background-repeat: no-repeat;
background-size: cover;
position:relative;
top: 130px;
}
.jumbotron .container {
position: relative;
background-color:transparent;
}
.jumbotron h1 {
color: #fff;
font-size: 44px;
font-family:"Alfa Slab One";
background-color:transparent;
padding-left:380px;
display: inline;
float: left!important;
margin-right: auto;
}
.circlesT
{
padding-top:400px;
background-color:transparent!important;
padding-left:80px;
padding-right:80px;
}
.circlesT a
{
background-color:#fff;
}*
{
background-color:#eae9e9;
}
.thumbnail{
max-width: 360px;
margin-right: auto;
display:inline;
float: left!important;
}
.list
{
padding-top:200px;
}
.a1
{
width:25%;
display:inline;
padding-left:6%;
padding-right:6%;
background-color:#fff;
}
.a1 img
{
background-color:transparent!important;
}
.mobiBG
{
height:91px;
width:100%;
background-color:#f7cf1c;
}
/*Teacher Login Stuff*/
.pagelogin
{
padding-top:20px;
padding-bottom:20px;
padding-left:300px;
}
.Tlogin form
{
background-color:#fff;
}
.Tlogin p
{
background-color:#fff;
}
.Tlogin
{
background-color:#fff;
width:400px;
padding: 20px;
}
/*Choose Size Stuff*/
.ChooseSize
{
padding-top:220px;
align-content:center;
background-color:#fff;
}
.ChooseSize h1
{
background-color:#fff;
}
.ChooseSizeA2
{
width:500px;
font-family:Arial;
font-size:27px;
color:#4e4d4d;
font-weight:bold;
background-color:#fff;
}
.picksize
{
width:100%;
background-color:#fff;
}
.sizepics
{
width:30%;
display:inline;
padding: 10px;
background-color:#fff;
}
.sizepics a
{
background-color:#fff;
border-width:6px;
border-color:#fff;
border-style:solid;
}
.sizepics img
{
background-color:#fff;
border-width:13px;
border-color:#fff;
border-style:solid;
transition-property:all;
transition-duration: 0.3s;
transition-timing-function: ease;
transition-delay: 0;
}
.sizepics img:hover
{
background-color:#fff;
border-width:13px;
border-color:#f7cf1c;
border-style:solid;
}
/*Year Group YG*/
.ChooseYG
{
padding-top:220px;
align-content:center;
background-color:#fff;
}
.ChooseYG h1
{
background-color:#fff;
}
.ChooseYGA2
{
width:800px;
font-family:Arial;
font-size:27px;
color:#4e4d4d;
font-weight:bold;
background-color:#fff;
}
/*Choose Cover 8x8 Stuff*/
.choosecover8x8
{
padding-top:220px;
align-content:center;
background-color:#fff;
}
.choosecover8x8 h1
{
background-color:#fff;
}
.a2-8x8
{
width:500px;
font-family:Arial;
font-size:27px;
color:#4e4d4d;
font-weight:bold;
background-color:#fff;
}
.pickcover8x8
{
width:100%;
background-color:#fff;
}
.cover8x8pics
{
width:30%;
display:inline;
padding: 10px;
background-color:#fff;
}
.cover8x8pics a
{
background-color:#fff;
border-width:6px;
border-color:#fff;
border-style:solid;
}
.cover8x8pics img
{
background-color:#fff;
border-width:13px;
border-color:#fff;
border-style:solid;
transition-property:all;
transition-duration: 0.3s;
transition-timing-function: ease;
transition-delay: 0;
}
.cover8x8pics img:hover
{
background-color:#fff;
border-width:13px;
border-color:#f7cf1c;
border-style:solid;
}
/*Choose Cover 6x8 Stuff*/
.choosecover6x8
{
padding-top:220px;
align-content:center;
background-color:#fff;
}
.choosecover6x8 h1
{
background-color:#fff;
}
.a2-6x8
{
width:500px;
font-family:Arial;
font-size:27px;
color:#4e4d4d;
font-weight:bold;
background-color:#fff;
}
.pickcover6x8
{
width:100%;
background-color:#fff;
}
.cover6x8pics
{
width:30%;
display:inline;
padding: 10px;
background-color:#fff;
}
.cover6x8pics a
{
background-color:#fff;
border-width:6px;
border-color:#fff;
border-style:solid;
}
.cover6x8pics img
{
background-color:#fff;
border-width:13px;
border-color:#fff;
border-style:solid;
transition-property:all;
transition-duration: 0.3s;
transition-timing-function: ease;
transition-delay: 0;
}
.cover6x8pics img:hover
{
background-color:#fff;
border-width:13px;
border-color:#f7cf1c;
border-style:solid;
}
/*Build Yearbook Stuff*/
.BuildYearbook
{
padding-top:220px;
align-content:center;
background-color:#fff;
}
.BuildYearbook h1
{
background-color:#fff;
}
.BuildYearbookA2
{
width:800px;
font-family:Arial;
font-size:27px;
color:#4e4d4d;
font-weight:bold;
background-color:#fff;
}
.price
{
font-family: Arial;
font-size:32px;
color:#e15152;
font-weight:bold;
background-color:#fff;
padding: 20px;
}
.BuildButton
{
padding: 25px;
background-color:#fff;
}
.BuildButton a
{
font-size:30px;
font-family:"Alfa Slab One";
color: #fff;
text-decoration:none;
background-color:#f7cf1c;
text-decoration:none;
border-radius: 3px 3px 3px 3px;
padding: 25px 50px;
transition-property: background;
transition-duration: 0.3s;
transition-timing-function: ease;
transition-delay: 0;
}
.BuildButton a:hover
{
font-size:30px;
font-family:"Alfa Slab One";
color: #000;
background-color:#ce542c;
text-decoration:none;
text-decoration:none;
border-radius: 3px 3px 3px 3px;
padding: 25px 50px;
}
.info
{
font-family:Arial;
font-size:24px;
color:#4e4d4d;
font-weight:bold;
background-color:#fff;
padding:30px;
}
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Yearbooks - Size</title>
<link rel="stylesheet" type="text/css" media="all" href="styles1.css">
</head>
<body>
<div class="top">
<div class="thumbnail">
<img src="http://yourprintsolution.co.uk/littlechickdemo/pics/Logo-01.png" width="177" height="183" alt="0">
</div>
<div class="LoginStuff">
<ul>
<div class="reg1"><li class="reg">Register</li></div>
<div class="log1"><li class="login">Login</li></div>
</ul>
</div>
</div>
<!-- Mobile Menu -->
<div class="menu-wrap" align="center">
<nav class="menu" align="center">
<ul class="clearfix">
<li>
<div class="AMenu" align="center">▼</span></div>
<ul class="sub-menu">
<li>Yearbooks</li>
<li>Leaving Cards</li>
<li>Mugs</li>
<li>School Calendars</li>
<li>Teachers Section</li>
</ul>
</li>
</ul>
</nav>
</div>
<!-- Normal Menu -->
<div class="nav" style="height:100%; width:100%;">
<ul>
<div class="Yearbooks"><li>Yearbooks</li></div>
<div class="LeavingCards"><li>Leaving Cards</li></div>
<div class="Mugs"><li>Mugs</li></div>
<div class="SchoolCalendars"><li>School Calendars</li></div>
<div class="TeacherSection"><li>Teachers Section</li></div>
</ul>
</div>
<div class="mobiBG"></div>
<div class="undernav">
<div class="createYearbook">
<h1>Create a Yearbook</h1>
</div>
<div class="continue">
<!-- same as login/register just bold -->
<h2>Continue Your Yearbook</h2>
</div>
<div class="ach" align="center">
<ul>
<li>About</li>
<li>Create</li>
<li>How To</li>
</ul>
</div>
</div>
<div class="jumbotron">
<div class="container">
<h1>Creating a Yearbook is Easy
<br><br>
Simply Choose Your Options Below.
</h1>
</div>
<div class="circlesT" style="background-color:#fff;">
<div class="a1">
<img src="http://yourprintsolution.co.uk/littlechickdemo/pics/circle_test.gif" width="180" height="176" alt=""/>
</div>
<div class="a1">
<img src="http://yourprintsolution.co.uk/littlechickdemo/pics/circle_test.gif" width="180" height="176" alt=""/>
</div>
<div class="a1">
<img src="http://yourprintsolution.co.uk/littlechickdemo/pics/circle_test.gif" width="180" height="176" alt=""/>
</div>
<div class="a1">
<img src="http://yourprintsolution.co.uk/littlechickdemo/pics/circle_test.gif" width="180" height="176" alt=""/>
</div>
</div>
</div>
<div class="bg">
<div class="ChooseSize" align="center">
<div class="ChooseSizeA2">
<h1 align="center">1. Choose a Size</h1>
</div>
</div>
<div class="picksize" align="center">
<div class="sizepics" align="center">
<img src="http://yourprintsolution.co.uk/littlechickdemo/pics/8x6.gif" alt="" width="30%" height="30%">
</div>
<div class="sizepics" align="center">
<img src="http://yourprintsolution.co.uk/littlechickdemo/pics/11x8.gif" alt="" width="30%" height="30%">
</div>
<div class="sizepics" align="center">
<img src="http://yourprintsolution.co.uk/littlechickdemo/pics/8x8.gif" alt="" width="30%" height="30%">
</div>
</div>
<div class="fillera"><div class="filler"></div></div>
</div>
</body>
</html>
That's because of this :
/* med res or ipad */
#media only screen and (min-width: 481px) {
Your media query just use min-width. So every screen with a higher resolution will take CSS rules in it too. Add a max-width rule to it :
/* med res or ipad */
#media only screen and (min-width: 481px) and (max-width: 1023px) {
There's too much css in your example to go through, but perhaps you haven't properly thought through the css for the desktop, as it will be taking the ipad styles as well, considering it too is over 481px.
Try
#media only screen and (min-width: 481px) and (max-width: 1023px)

min and max width don't work

i'm creating a horizontal submenu but the width doesn't extend check this please
CSS
nav{
width:62px;
height:409px;
float:left;
margin-left:0;
margin-top:25px;
}
nav a:link,nav a:visited{
width:59px;
height:67px;
float:left;
display:block;
background:#ccc;
margin-bottom:19px;
font-family:tahoma;
font-weight:bold;
font-size:9px;
text-transform:uppercase;
color:#fff;
line-height:62px;
text-align:center;
}
nav .menu{
width:59px;
height:67px;
float:left;
position:relative;
margin-bottom:19px;
}
nav .submenu{
position:absolute;
top:0;
left:59px;
background:#f78f1e;
height:40px;
min-width: 20px;
max-width: 600px;
}
nav .submenu a{
display:block;
float:left;
height:40px;
line-height:40px;
width:50px;
}
HTMLnav{
width:62px;
height:409px;
float:left;
margin-left:0;
margin-top:25px;
}
nav a:link,nav a:visited{
width:59px;
height:67px;
float:left;
display:block;
background:#ccc;
margin-bottom:19px;
font-family:tahoma;
font-weight:bold;
font-size:9px;
text-transform:uppercase;
color:#fff;
line-height:62px;
text-align:center;
}
nav .menu{
width:59px;
height:67px;
float:left;
position:relative;
margin-bottom:19px;
}
nav .submenu{
position:absolute;
top:0;
left:59px;
background:#f78f1e;
height:40px;
min-width: 20px;
max-width: 600px;
}
nav .submenu a{
display:block;
float:left;
height:40px;
line-height:40px;
width:50px;
}
HTML
<nav>
contact
works
partners
<div class="menu">
about us
<div class="submenu">
audio
video
<div style="clear:both"></div>
</div>
</div>
services
</nav>
Fiddle
http://jsfiddle.net/7D9hV/
Try using backgournd:inherit for your anchor-styling
nav .submenu a{
background:inherit;
display:block;
float:left;
height:40px;
line-height:40px;
width:50px;
}
This is working for me. Try it
nav .submenu a {
background: inherit; /// remove 'none'
display: block;
float: left;
height: 40px;
line-height: 40px;
width: 50px;
}
nav .submenu {
position: absolute;
top: 0;
left: 59px;
background: #f78f1e;
height: 40px;
width: 100px; // assign width
min-width: 20px;
max-width: 600px;
}
Sorry, scratch previous comment. It's the background: none; on nav .submenu a. Remove this and they appear. Your setting the background to none so you can't see them as the text is white:
http://jsfiddle.net/7D9hV/7/

CSS Dropdown navigation change hover colour

i have the following CSS for a navigation menu
ul#css3menu_top,ul#css3menu_top ul {
margin:0;
list-style:none;
padding:0;
}
ul#css3menu_top,ul#css3menu_top .submenu {
background-color:#EEEEEE;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
ul#css3menu_top .submenu {
visibility:hidden;
position:absolute;
left:0;
top:100%;
opacity:0;
-moz-transition:all 0.5s;
-webkit-transition:opacity 0.5s;
-o-transition:opacity 0.5s;
-moz-box-shadow:3.5px 3.5px 5px #000000;
-webkit-box-shadow:3.5px 3.5px 5px #000000;
box-shadow:3.5px 3.5px 5px #000000;
float:left;
background-color:#EEEEEE;
border-width:2px;
border-radius:6px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-color:#FFF;
padding:0 10px 10px;
}
ul#css3menu_top li:hover>.submenu {
visibility:visible;
opacity:1;
}
ul#css3menu_top li {
position:relative;
display:block;
white-space:nowrap;
font-size:0;
float:left;
}
ul#css3menu_top li:hover {
z-index:1;
}
ul#css3menu_top ul .submenu {
z-index:2;
position:absolute;
left:100%;
top:0;
}
ul#css3menu_top {
font-size:0;
width:100%;
z-index:999;
position:relative;
display:inline-block;
zoom:1;
padding:0 0%;
margin:0 0%;
*display:inline;
}
ul#css3menu_top .column {
float:left;
}
* html ul#css3menu_top li a{
display:inline-block;
}
ul#css3menu_top>li {
margin:0;
width:17%;
}
ul#css3menu_top li.toplast{
width:15%;
}
ul#css3menu_top a:active, ul#css3menu_top a:focus {
outline-style:none;
}
ul#css3menu_top a{
display:block;
vertical-align:middle;
text-align:left;
text-decoration:none;
font:bold 14px Calibri;
color:#EEEEEE;
text-shadow:#FFF 0 0 1px;
cursor:pointer;
padding:6px 15px 6px 3px;
background-color:#666666;
background-image:url("mainbk.png");
background-repeat:repeat;
background-position:0 0;
border-width:0 0 0 1px;
border-style:solid;
border-color:#c0c0c0;
}
ul#css3menu_top ul li {
float:none;
margin:10px 0 0;
}
ul#css3menu_top ul a {
text-align:left;
padding:4px;
background-color:#EEEEEE;
background-image:none;
border-width:0;
border-radius:0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
font:14px Calibri;
color:#666666;
text-decoration:none;
}
ul#css3menu_top li:hover>a,ul#css3menu_top li a.pressed {
background-color:#EEEEEE;
color:#666666;
background-position:0 100px;
text-decoration:none;
}
ul#css3menu_top img {
border:none;
vertical-align:middle;
margin-right:6px;
}
ul#css3menu_top span {
display:block;
overflow:visible;
background-position:right center;
background-repeat:no-repeat;
padding-right:0px;
}
ul#css3menu_top ul span {
padding-right:8px;
}
ul#css3menu_top ul li:hover>a,ul#css3menu_top ul li a.pressed {
background-color:#EEEEEE;
background-image:none;
color:#666666;
text-decoration:none;
}
ul#css3menu_top li.topfirst>a {
padding-left: 7px;
border-width:0;
border-radius:4px 0 0 4px;
-moz-border-radius:4px 0 0 4px;
-webkit-border-radius:4px;
-webkit-border-top-right-radius:0;
-webkit-border-bottom-right-radius:0;
}
ul#css3menu_top li.toplast>a {
padding-right: 7px;
border-radius:0 4px 4px 0;
-moz-border-radius:0 4px 4px 0;
-webkit-border-radius:0;
-webkit-border-top-right-radius:4px;
-webkit-border-bottom-right-radius:4px;
}
#media only screen and (max-width:900px),only screen and (max-device-width:900px){
ul#css3menu_top>li{width:33%;}ul#css3menu_top>li:nth-child(3){width:34%}ul#css3menu_top>li:nth-child(n+4){width:33%;}ul#css3menu_top>li:nth-child(6){width:34%}}
#media only screen and (max-width:600px),only screen and (max-device-width:600px){
ul#css3menu_top>li{width:50%;}ul#css3menu_top>li:nth-child(n+3){width:50%;}ul#css3menu_top>li:nth-child(n+5){width:50%;}}
#media only screen and (max-width:450px),only screen and (max-device-width:450px){
ul#css3menu_top>li{width:100%;}ul#css3menu_top>li:nth-child(n+2){width:100%;}ul#css3menu_top>li:nth-child(n+3){width:100%;}ul#css3menu_top>li:nth-child(n+4){width:100%;}ul#css3menu_top>li:nth-child(n+6){width:100%;}}
/*opera hack*/
#media only screen and (min-width:900px){
html>/**/body noindex:-o-prefocus, html>/**/body ul#css3menu_top{
display:table;
}
html>/**/body noindex:-o-prefocus, html>/**/body ul#css3menu_top>li{
width:auto;
float:none;
display:table-cell;
}
html>/**/body noindex:-o-prefocus, html>/**/body ul#css3menu_top li.toplast{
width:auto;
display:table-cell;
}
}
i cannot work out how to make the text colour change when i hover over it on the sub menu
here is a fiddle of it working
http://jsfiddle.net/n3FAq/
any one got any ideas?
Try this
ul#css3menu_top ul li a:hover {
color: #c00;
}
DEMO
You don't have a hover rule for links in the submenu.
ul#css3menu_top .submenu a:hover {
color: red;
}
JSFiddle