I created a mega menu that has 4 items, it is working well.
The problem is when hovering over an item it goes to the previous last one I hover over it.
here is a snap of my code,
<nav class="main-menu">
<div class="navbar-header">
<div class="navbar-collapse collapse clearfix">
<ul class="navigation clearfix">
<li class="dropdown has-mega-menu is-dropdown-submenu-parent">
<a href="home.php" >Home</a>
<div class="mega-menu">
/* list of items */
</div>
</li>
<li class="dropdown has-mega-menu is-dropdown-submenu-parent">
<a href="projects.php" >Projects</a>
<div class="mega-menu">
/* list of items */
</div>
</li>
/* two more li items for the menu */
</ul>
</div>
</div>
</nav>
CSS Code,
.main-menu .navigation > li > .mega-menu{
position:absolute;
left:0px;
width:100%;
background-color: #ffffff;
padding: 30px;
top: 100%;
z-index:-1;
margin-top:0px;
display:none;
background-position:right bottom;
background-repeat:no-repeat;
transition:all 500ms ease;
-webkit-transition:all 500ms ease;
-moz-transition:all 500ms ease;
-ms-transition:all 500ms ease;
-o-transition:all 500ms ease;
-webkit-box-shadow:0px 2px 5px 1px rgba(0,0,0,0.4),0px 0px 5px 1200px rgba(0,0,0,0.55);
-ms-box-shadow:0px 2px 5px 1px rgba(0,0,0,0.4),0px 0px 5px 1200px rgba(0,0,0,0.55);
-o-box-shadow:0px 2px 5px 1px rgba(0,0,0,0.4),0px 0px 5px 1200px rgba(0,0,0,0.55);
-moz-box-shadow:0px 2px 5px 1px rgba(0,0,0,0.4),0px 0px 5px 1200px rgba(0,0,0,0.55);
box-shadow:0px 2px 5px 1px rgba(0,0,0,0.4),0px 0px 5px 1200px rgba(0,0,0,0.55);}
.main-menu .navigation > li:hover > .mega-menu{
opacity:1;
visibility:visible;
}
I want to know what is causing this problem, I just add in the CSS file simple hovering effects to show the drop-down menu.
Related
Roughly a week ago all my divs were properly aligned on the same line.
I'm not sure what I did to cause them to stack. "fbox" is set to inline-block but its acting as a block.
I really didn't want to ask a question about it, but I am losing time by getting frustrated about this.
<div class="fbox" id="breast">
<span class="title">Breast Procedures</span>
<ul>
<li>Breast Augmentation</li>
<li>Breast Lift</li>
<li>Breast Reduction</li>
<li>Gynecomastia Surgery</li>
<li>Breast Implant</li>
<li>Nipple Surgery</li>
<li>Breast Asymmetry</li>
</ul>
<span class="read">View Descriptions</span>
</div>
<div class="fbox" id="facial">
<span class="title">Facial Procedures</span>
<ul>
<li>Brow Lift</li>
<li>Face Lift</li>
<li>Eyelid Lift</li>
<li>Nose Surgery</li>
<li>Facial Implant</li>
<li>Neck Lift</li>
<li>Earlobe Repair</li>
<li>Ear Reshaping</li>
<li>Chin Implant</li>
<li>Chin Augmentation</li>
</ul>
<span class="read">View Descriptions</span>
</div>
<div class="padding">
<div class="fbox" id="body">
<span class="title">Body Procedures</span>
<ul>
<li>Tummy Tuck</li>
<li>Liposuction</li>
<li>Mommy Makeover</li>
<li>Butt Lift</li>
<li>Body Contouring</li>
<li>Labiaplasty</li>
<li>Brachioplasty</li>
<li>Thigh Lift</li>
<li>Upper Body Lift</li>
</ul>
<span class="read">View Descriptions</span>
</div>
</div>
<div class="fbox" id="surgery">
<span class="title">Non-Surgical Procedures</span>
<ul>
<li>Fat Injection</li>
<li>Latisse</li>
<li>Botox</li>
<li>Dermabrasion</li>
<li>Chemical Peels</li>
</ul>
<span class="read">View Descriptions</span>
</div>
CSS: (Main code at bottom. .fbox, .read, .title)
.controls{
display:none;
}
.col span_6 {
text-color:black;
color:black;
}
.subheader{
text-color:black;
color:black;
}
.callbox{
background-color:white;
border-style:solid;
border-width:1px;
border-color:black;
display:block;
text-align:center;
height:75px;
width:1116.95px;
line-height:75px;
font-size:22px;
font-weight:bold;
}
.toggle h3 a{
color:black;
}
body .toggle > div {
padding: 10px 14px;
border-top: 0px;
border:1px solid #D2691E;
display: none;
background-color: #fff!important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
/** .receptionist{
border:1px solid #D2691E;
display:block;
padding:5px;
border-radius:5px;
}
**/
.menu-item{
font-weight:600;
}
.hr{
display: block;
height: 1px;
border: 1px solid #8CAAD2;
margin: 1em 0;
padding: 0;
}
.settingsFront{
height:10px;
}
.settingsMessage{
height:150px;
}
.settingsMessageMain{
height:200px;
}
/** Start here ! **/
.title{
font-size:16px;
margin:0 auto;
text-align:center;
font-weight:600;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color:white;
background:white;
font-family:Futura;
-webkit-transition: box-shadow 1s ease;
-moz-transition: box-shadow 1s ease;
-o-transition: box-shadow 1s ease;
-ms-transition: box-shadow 1s ease;
transition: box-shadow 1s ease;
-moz-box-shadow: 0px 0px 5px 1px rgb(139, 139, 139);
-webkit-box-shadow: 0px 0px 5px 1px rgb(139, 139, 139);
box-shadow: 0px 0px 5px 1px rgb(139, 139, 139);
}
.main-content ul li{
list-style-type:none;
}
.main-content ul{
margin:0 auto;
}
.fbox{
width: 250px;
height: 300px;
background: rgb(250, 250, 250);
-moz-box-shadow: 0px 0px 5px 1px rgb(139, 139, 139);
-webkit-box-shadow: 0px 0px 5px 1px rgb(139, 139, 139);
box-shadow: 0px 0px 5px 1px rgb(139, 139, 139);
display:inline-block;
vertical-align:top;
text-align:center;
margin:0 auto;
position:relative;
}
.read{
width: 100%;
left: 0;
bottom: 0;
background-color:white;
background:white;
font-size:22px;
height:40px;
line-height:40px;
font-family:Futura;
-webkit-transition: box-shadow 1s ease;
-moz-transition: box-shadow 1s ease;
-o-transition: box-shadow 1s ease;
-ms-transition: box-shadow 1s ease;
transition: box-shadow 1s ease;
-moz-box-shadow: 0px 0px 5px 1px rgb(139, 139, 139);
-webkit-box-shadow: 0px 0px 5px 1px rgb(139, 139, 139);
box-shadow: 0px 0px 5px 1px rgb(139, 139, 139);
}
.read a{
color:#7e99bd;
}
.wpcf7-form-control-wrap{
background:white;
background-color:white;
}
#media (max-width:767px){
.fbox{
width: 200px;
height: 250px;
background: rgb(250, 250, 250);
-moz-box-shadow: 0px 0px 5px 1px rgb(139, 139, 139);
-webkit-box-shadow: 0px 0px 5px 1px rgb(139, 139, 139);
box-shadow: 0px 0px 5px 1px rgb(139, 139, 139);
display:inline-block;
font-size:12px;
}
}
Fiddle
Your third div.fbox is wrapped in a parent div with class .padding which is causing a break in the display: inline-box rule. Remove the div.padding element around the third div.fbox element and your div tags will line up again.
#Travis the fbox is working as inline-block if you want to know more information go through this.
If you want all three boxes inline-block, you will need all three in the same div
The full source can be viewed at:
www.anthonysusedcars.com
Chrome Status: Works!
Safari Status: Broken!
Firefox Status: Untested
Question:
What is causing this webpage to break within Safari, while Chrome renders it fine? Can anyone figure out a quick fix?
Note: there is a bug in Chrome, where if you hover over the left-most, non selected, nav tab, the whole page is thrown into disarray. Ignore this for now.
Supporting Details [Extra]
Google Chrome shows this page with an interesting effect that I stumble upon by accident with basic CSS3. The navigation tab pulls down while pulling the upper header and lower content downward with it, but the rest of the navigation tabs stay in place.
It threw me off when I looked at the site in Safari, expecting seamless webkit compatibility, to find a very broken page. I then read about Chrome's recent change to Blink. So, scrap the chanced-upon feature and go with something easier to replicate cross-browser, right?
Well... My boss likes the feature the way that it's seen in Chrome, and wants me to fix it up to work cross-browser. And that's that. I've failed to fix the issue thus far, so i'm turning to the experts!
I'm focusing here on simply Webkit - Blink compatibility. The solution to this problem needs to solve both the broken position, and keep the movement functionality.
HTML Markup [Simplified]
<!DOCTYPE html>
<html>
<head>
... Content ...
</head>
<body>
<div class="wrapper"><!-- begin wrapper -->
<div class="frame_anchor"><!-- begin frame anchor -->
<div class="header_frame"><!-- begin header frame -->
<div class="nav_bar"><!-- begin header nav bar -->
<a id="selected" href="index.php">
Home
</a>
<a href="car1.php">
Dodge Avenger
</a>
<a href="car2.php">
Jeep Grand Cherokee
</a>
<a href="car3.php">
Chevy Suburban
</a>
<a href="contact.php">
Contact Us
</a>
</div><!-- end head nav bar -->
</div><!-- end header frame -->
</div><!-- end frame anchor -->
<div class="body_center"><!-- begin body center -->
<div class="header"><!-- begin header -->
<div class="header_image"><!-- begin header image -->
<div class="header_title_strip"><!-- begin header title strip -->
<p class="title">
ANTHONY'S AUTO
</p>
<p class="subtitle">
USED CARS AT GREAT PRICES
</p>
<p class="contact_title">
Cell: (318) 332 2031
</p>
</div><!-- end header title strip -->
</div><!-- end header image -->
</div><!-- end header -->
<div class="body"><!-- begin body -->
<div class="body_head_spacer"><!-- begin spacer -->
</div><!-- end spacer -->
<div class="module_title">
<p>
ABOUT US
</p>
</div>
<div class="body_desc"><!-- begin body description -->
<p>
We sell nice, clean cars in good condition, ready for the highway.
</p>
</div><!-- end body description -->
... Content ...
<div class="footer"><!-- begin footer -->
... Content ...
</div><!-- end footer -->
</div><!-- end body center -->
</div><!-- end wrapper -->
</body>
</html>
CSS: [Gradients Removed]
#import url(http://fonts.googleapis.com/css?family=Orbitron:400,700);
body
{
font-family:Arial;
... cross-browser gradient bg ...
}
a:link, a:visited, a:active, a:hover
{
}
p
{
}
div
{
}
.wrapper
{
margin:0px;
padding:0px;
width:100%;
min-height:800px;
}
.body_center
{
overflow:hidden;
transition:min-height 1s;
... cross-browser gradient bg ...
width:800px;
min-height:800px;
margin-left:auto;
margin-right:auto;
-webkit-box-shadow: 7px 7px 5px #000;
-moz-box-shadow: 7px 7px 5px #000;
box-shadow: 0px 0px 80px 7px #000;
padding:0px 0px 0px 0px;
}
.header_image
{
-moz-transition:min-height 1s, background-size 1s;
transition:min-height 1s, background-size 1s;
z-index:2;
background-position:65% 0%;
background-size:100% 160%;
background-repeat:no-repeat;
background-image:url('images/head.png');
position:absolute;
max-height:300px;
min-height:300px;
width:800px;
margin-top:-250px;
-webkit-box-shadow: 0px 0px 30px #000;
-moz-box-shadow: 0px 0px 30px #000;
box-shadow: 0px 0px 30px #000;
}
.header_title_strip
{
z-index:2;
opacity:1;
position:absolute;
padding:0px;
width:100%;
height:100px;
... cross-browser gradient bg ...
transition:opacity 2s, height 2s;
-moz-transition:opacity 2s, height 2s;
}
.contact_title
{
float:right;
color:#ffbb28;
margin-right:20px;
font-family: 'Orbitron', sans-serif;
}
.header_title_strip:hover
{
opacity:1;
height:120px;
}
.title span
{
float:left;
display:block;
width:30px;
/* -webkit-transform:rotate(0deg); */
transition:/*-webkit-transform 0.1s,*/ color 0.5s, text-shadow 0.3s;
text-shadow: 4px 4px 4px #000;
}
.title span:hover
{
/* -webkit-transform:rotateY(180deg);
color:#2580be;
*/
text-shadow: 5px 5px 7px #000;
}
.space
{
float:left;
width:20px;
overflow:hidden;
opacity:0;
}
.title
{
position:absolute;
word-spacing:-8px;
top:-15px;
padding:0px 0px 0px 10px;
font-size:35px;
color:white;
font-family: 'Orbitron', sans-serif;
}
.subtitle
{
position:absolute;
margin:55px 0px 0px 10px;
font-size:18px;
color:#ffb400;
font-family: 'Orbitron', sans-serif;
}
.frame_anchor
{
width:800px;
height:20px;
margin-left:auto;
margin-right:auto;
}
.header_frame
{
-webkit-box-shadow: 0px 0px 30px #000;
-moz-box-shadow: 0px 0px 30px #000;
box-shadow: 0px 0px 30px #000;
transition:height 1s;
position:relative;
margin-left:-20px;
top:90px;
z-index:0;
padding:0px 20px 0px 20px;
width:800px;
height:250px;
... cross-browser gradient bg ...
opacity:.77;
}
.nav_bar
{
transition:margin 1s;
padding:210px 0px 0px 0px;
width:100%;
height:70px;
position:relative;
z-index:2;
}
.nav_bar a:link, .nav_bar a:active, .nav_bar a:visited
{
margin-top:0px;
-webkit-box-shadow: 0px 0px 5px #000;
-moz-box-shadow: 0px 0px 5px #000;
box-shadow: 0px 0px 5px #000;
float:left;
text-decoration:none;
color:black;
display:block;
height:30px;
font-weight:bold;
font-size:12px;
margin:0px 0px 0px 20px;
padding:15px 10px 0px 10px;
text-align:center;
... cross-browser gradient bg ...
border-style: inset;
border-width:0px;
opacity:1;
-moz-transition:opacity 0.1s, box-shadow 0.2s, margin-top 0.2s, padding-top 0.2s;
transition:opacity 0.1s, box-shadow 0.2s, margin-top 0.2s, padding-top 0.2s;
border-radius:0px 0px 5px 5px;
}
#selected
{
... cross-browser gradient bg ...
}
#selected:hover
{
padding-top:15px;
}
.nav_bar a:hover
{
padding-top:20px;
opacity:1;
-moz-box-shadow: 0px 0px 5px #000;
box-shadow: 0px -5px 20px #000;
}
.body_head_spacer
{
transition:min-height 1s;
min-height:105px;
}
.body_desc
{
-webkit-box-shadow: 250px -30px 70px -40px#000;
-moz-box-shadow: 250px -30px 70px -40px#000;
box-shadow: 250px -30px 70px -40px#000;
-moz-transition:min-height 1s;
transition:min-height 1s;
position:relative;
top:0px;
z-index:0;
padding:5px;
width:790px;
min-height:250px;
... cross-browser gradient bg ...
opacity:.77;
margin-top:0px;
}
.body_desc p
{
padding:5px;
margin:0px;
background-color:white;
min-height:20px;
text-align:center;
}
.body_module
{
-webkit-box-shadow: 250px -30px 70px -40px#000;
-moz-box-shadow: 250px -30px 70px -40px#000;
box-shadow: 250px -30px 70px -40px#000;
-moz-transition:min-height 1s;
transition:min-height 1s;
position:relative;
margin-top:0px;
top:0px;
z-index:0;
padding:5px 5px 5px 5px;
width:790px;
min-height:180px;
... cross-browser gradient bg ...
opacity:.77;
}
.footer
{
-webkit-box-shadow: 0px 0px 30px #000;
-moz-box-shadow: 0px 0px 30px #000;
box-shadow: 0px 0px 30px #000;
-moz-transition:min-height 1s;
transition:min-height 1s;
margin-top:30px;
top:0px;
z-index:0;
width:800px;
min-height:70px;
... cross-browser gradient bg ...
opacity:.77;
}
.footer p
{
padding:25px 10px 10px 10px;
min-height:20px;
text-align:center;
color:white;
}
.module_title p
{
margin:0px;
padding:10px 5px 5px 0px;
min-height:20px;
}
.module_title
{
-webkit-box-shadow: 0px 0px 30px #000;
-moz-box-shadow: 0px 0px 30px #000;
box-shadow: 0px 0px 30px #000;
font-family: 'Orbitron', sans-serif;
font-weight:bold;
color:#2454e5;
transition:height 1s;
position:relative;
z-index:0;
text-align:center;
margin-top:20px;
padding:5px 5px 5px 5px;
width:25%;
min-height:35px;
... cross-browser gradient bg ...
opacity:.77;
border-radius:0px 170px 0px 0px;
}
Ok, as Venom said above, I ended up being forced to removed the hover movement effect. THere seemed to be no other solution. Thanks!
I can not seem to figure out why my menu does not align properly on the sub dropdowns. They display at the lower edge of its parent cell and it makes trying to navigate through them almost impossible. You have to drop down diagonally just right to get the next menu.
http://imgur.com/zxWcmZf "Screenshot of menu"
I have posted the menu's code below does anything stand out to anyone as to what I am missing? This is my first play with bootstrap. Thanks a million for everyone's time on help with this.
<div class="navbar-wrapper">
<div class="container">
<div class="navbar">
<div class="navbar-inner">
<div class="buttons-container">
</div>
<ul class="blue nav" id="css3-menu">
<li>Home </li>
<li class="dropdown"><a tabindex="-1" class="dropdown-toggle_" data-toggle="dropdown"
href="">Choice 1</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu"><a tabindex="-1" href="#">Choice 1a</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">Choice 1a1
<ul class="dropdown-menu">
<li><a tabindex="-1" href="">Choice 1a1a</a></li>
<li><a tabindex="-1" href="">Choice 1a1b</a></li>
</ul>
</li>
<li class="dropdown-submenu">Choice 1a2
<ul class="dropdown-menu">
<li><a tabindex="-1" href="">Choice 1a2a</a></li>
<li><a tabindex="-1" href="">Choice 1a2b</a></li>
</ul>
</li>
<li class="dropdown">Choice 1b </li>
</ul>
</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle_" data-toggle="dropdown" href="">Choice
2</a>
<ul class="dropdown-menu">
<li>Choice 2a</li>
<li>Choice 2b</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle_" data-toggle="dropdown" href="">Choice
3</a>
<ul class="dropdown-menu">
<li>Choice 3a</li>
<li>Choice 3b</li>
</ul>
</li>
<li>Choice 4 </li>
<li>Choice 5 </li>
</ul>
</div>
</div>
</div>
</div>
EDIT:
Sorry I forgot the CSS don't know what I was thinking. Here is the CSS relating to it. Thanks for the input so far :)
/* css3 menu */
ul#css3-menu{
width: 940px;
min-width: 940px;
margin: 0 auto;
list-style: none;
font-family: 'Open Sans', Arial, "MS Trebuchet", sans-serif;
height: 46px;
padding: 0;
}
ul#css3-menu > li{
display: block;
float: left;
-webkit-transition: background .4s linear;
-moz-transition: background .4s linear;
-ms-transition: background .4s linear;
-o-transition: background .4s linear;
transition: background .4s linear;
<!--[if IE]>
position: relative;
<![endif]-->
}
ul#css3-menu > li:first-child{
border-left: none !important;
-webkit-border-top-left-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
-moz-border-radius-topleft: 4px;
-moz-border-radius-bottomleft: 4px;
-ms-border-top-left-radius: 4px;
-ms-border-bottom-left-radius: 4px;
-o-border-top-left-radius: 4px;
-o-border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
ul#css3-menu > li:last-child{
border-right: none !important;
}
ul#css3-menu > li > a{
display: block;
padding: 15px 30px;
color: white;
text-decoration: none;
font-weight: 600;
font-weight: bold;
}
/*
ul#css3-menu > li:hover > div{
-webkit-transform: translateY(-80px);
-moz-transform: translateY(-80px);
-ms-transform: translateY(-80px);
-o-transform: translateY(-80px);
transform: translateY(-80px);
}
*/
/*visibility: visible;*/
ul#css3-menu > li > div{
-webkit-transition: -webkit-transform .2s linear;
-moz-transition: -moz-transform .2s linear;
-ms-transition: -ms-transform .2s linear;
-o-transition: -o-transform .2s linear;
transition: transform .2s linear;
text-align: center;
margin: 0 auto;
-webkit-transform: translateY(-60px);
-moz-transform: translateY(-60px);
-ms-transform: translateY(-60px);
-o-transform: translateY(-60px);
transform: translateY(-60px);
width: 37px;
height: 37px;
/*visibility: hidden;*/
margin-bottom: -37px;
z-index: -1;
<!--[if IE]>
margin-top: -60px;
<![endif]-->
}
ul#css3-menu.blue > li > div{
background: url(../img/icons-blue.png) 0 0 no-repeat;
}
.navbar-wrapper {
background: #2773AE;
background-color:#2773AE; filter: progid:DXImageTransform.Microsoft.dropShadow(color=#2773AE, offX=0, offY=0, positive=true);
box-shadow: 0 -10px 8px -10px #074979 inset, 0 10px 8px -10px #074979 inset;
-webkit-box-shadow: 0 -10px 8px -10px #074979 inset, 0 10px 8px -10px #074979 inset;
-moz-box-shadow: 0 -10px 8px -10px #074979 inset, 0 10px 8px -10px #074979 inset;
}
ul#css3-menu.blue{
background: #2773AE;
background-color:#2773AE; filter: progid:DXImageTransform.Microsoft.dropShadow(color=#2773AE, offX=0, offY=0, positive=true);
box-shadow: 0 -10px 8px -10px #074979 inset, 0 10px 8px -10px #074979 inset;
-webkit-box-shadow: 0 -10px 8px -10px #074979 inset, 0 10px 8px -10px #074979 inset;
-moz-box-shadow: 0 -10px 8px -10px #074979 inset, 0 10px 8px -10px #074979 inset;
}
ul#css3-menu.blue > li{
border-right: 1px #074979 solid;
border-left: 1px #3e92d0 solid;
height: 46px;
}
ul#css3-menu.blue > li:hover{
background: #074979;
}
It is something in your additional CSS file (that you haven't posted) that is causing this, not the html you posted, nor any of the bootstrap css files. When I test the html you posted (my entire html file below), I get the dropdowns to align as expected: http://imgur.com/XyYV5pE.
You may want to post the CSS you are including so folks can look at what might be causing this -- or simplify your CSS to bare bones and add each part back one by one to track the culprit.
<!DOCTYPE html>
<html lang="en">
<head>
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" media="screen" rel="stylesheet" type="text/css"/>
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" media="screen" rel="stylesheet" type="text/css"/>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js"></script>
</head>
<body>
<!--your exact markup posted in its entirety, unaltered, here-->
</body>
I am trying to use the CSS3 ease-in-out effect when mouseover the tabs, here the background color is changing, but the text color is not changing.
My HTML code is:
<html>
<body>
<div id="tab" class="links">
Rang De
</div>
<div id="tab" class="links">
Robin Sharma
</div>
<div id="tab" class="links">
Programme
</div>
<div id="tab" class="links">
Book now
</div>
<div id="tab" class="links">
Contact
</div>
</body>
</html>
My CSS is:
#tab
{
float: left;
padding: 15px 10px 10px 10px;
background: url(images/menutop.gif) repeat-x 0px 0px #EDEDED;
height: 25px;
width: 176px;
font-size: 16px;
text-align: center;
border: 1px solid #FAFAFA;
box-shadow: 0px 4px 4px #d5d5d5;
-moz-box-shadow: 0px 4px 4px #d5d5d5;
-webkit-box-shadow: 0px 4px 4px #d5d5d5;
}
.links:hover
{
background: #00a9dd !important;
color: #fff;
text-shadow: 0.1em 0.1em 0.05em #333;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
Here's a jsFiddle.
Add .links:hover a { color:#fff; }
Code: http://jsfiddle.net/MnZDd/13/
It's as simple as adding:
.links:hover a {
color: #000;
}
http://jsfiddle.net/MnZDd/15/
after applying a background image to the body, the menu buttons backgrounds are overridden as seen below. i want the menu buttons to preserve their visibility.
link to image is below
http://s11.postimage.org/4ndla4hxf/111111111.jpg
/********markup********/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
</head>
<body>
<div class="page">
<header>
<div id="title">
<h1>My MVC Application</h1>
</div>
<div id="logindisplay">
#Html.Partial("_LogOnPartial")
</div>
<nav>
<ul id="menu">
<li >#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
</ul>
</nav>
</header>
<section id="main">
#RenderBody()
</section>
<footer>
</footer>
</div>
</body>
</html>
/*******body***********/
body
{
font-size: .85em;
font-family: "Trebuchet MS" , Verdana, Helvetica, Sans-Serif;
margin: 0;
padding: 0;
background-image:url('/Content/bw.jpg');
}
/*******menu**********/
#menu
{
position:relative;
float:left;
clear:left;
margin-right:50px;
}
#menu li
{
list-style-type: none;
padding: 0px;
display: block;
width:150px;
overflow:visible;
}
#menu li a
{
overflow:visible;
background: rgba(0,0,0,0.2);
text-shadow: 0px 0px 1px white;
color: white;
text-decoration: none;
font-size: 13px;
display: block;
font-family: arial;
text-transform: uppercase;
text-shadow: 0px 0px 5px #eee;
padding:10px 20px 10px;
margin: 5px;
font-weight: bold;
letter-spacing: 1px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
-webkit-box-shadow: 2px 3px 3px rgba(0,0,0,0.6);
-moz-box-shadow: 2px 3px 3px rgba(0,0,0,0.6);
box-shadow: 2px 3px 3px rgba(0,0,0,0.6);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
#menu li a:hover
{
opacity: 1;
color:White;
background:#FF00D0 ;
text-shadow: 0px 0px 1px #ffffff;
-webkit-transform: scale(1.1);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
#menu li a:active {
background: rgba(0,0,0,0.1);
-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
-moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
}
Are you sure the buttons don't just look grey when there's no background image as opacity is so low.
When you then apply the background image you cant see the buttons background colour as the the opacity is so low and the background colour so strong.
Temporarily update #menu li a and see if the problem still exists.
background: #FF0000;
Example here: http://benjaminhopkins.co.uk/BGLostExample.html