I'm trying to put a drop down menu on Blogger and found one that actually works. The only problem is that these three thin black vertical lines appear underneath the menu. I can't figure out what in the code is causing them, or if it's something else entirely. I've tried editing the borders, but it doesn't seem to do anything. The site uses HTML/CSS.
/----- MBT Drop Down Menu ----/
#mbtnavbar {
background: #000000;
width: 960px;
color: #FFF;
margin: 0px;
padding: 0;
position: relative;
height:35px;
}
#mbtnav {
margin: 0;
padding: 0;
}
#mbtnav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#mbtnav li {
list-style: none;
margin: 0;
padding: 0;
height:35px;
}
#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {
color: #FFF;
display: block;
font:normal 18px josefin sans; margin: 0;
padding: 17px 12px 10px 12px;
text-decoration: none;
}
#mbtnav li a:hover, #mbtnav li a:active {
background: #E3E4FA;
color: #000000;
display: block;
text-decoration: none;
margin: 0;
padding:17px 12px 10px 12px;
}
#mbtnav li {
float: left;
padding: 0;
}
#mbtnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: 100%;
width: 160px;
margin: 0;
padding: 0;
}
#mbtnav li ul a {
width: 140px;
}
#mbtnav li ul ul {
margin: -25px 0 0 161px;
}
#mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul {
left: -999em;
}
#mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul {
left: auto;
}
#mbtnav li:hover, #mbtnav li.sfhover {
position: static;
}
#mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited {
background: #000000;
width: 120px;
color: #FFF;
display: block;
font:normal 15px josefin sans, sans-serif;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border-bottom:1px dotted #333;
}
#mbtnav li li a:hover, #mbtnavli li a:active {
background: #E3E4FA;
color: #000000;
display: block; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
Related
When i hover the mouse over the links a sub drop down menu appears starting right from the link itself and the sub drop down menu appearing goes down?
How do i make it appear from the top of the menu that is to say the first link in the drop down menu?
here is the code i got
<style>
#mbtnavbar {
background: #3B5998;
width: 100%;
color: #FFF;
margin: -50px 0;
padding: 0;
position: relative;
border-top:0px solid #960100;
height:35px;
}
#mbtnav {
margin: 0;
padding: 0;
}
#mbtnav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#mbtnav li {
list-style: none;
margin: 0;
padding: 0;
}
#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {
color: #FFF;
display: block;
font:bold 16px Helvetica, sans-serif;
margin: 0;
padding: 9px 16px 11px 16px;
text-decoration: none;
border-right:0px solid #627AAD;
}
#mbtnav li a:hover, #mbtnav li a:active {
background: #627AAD;
color: #FFF;
display: block;
text-decoration: none;
margin: 0;
padding: 9px 16px 11px 16px;
}
#mbtnav li {
float: left;
padding: 0;
}
#mbtnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 140px;
margin: 0;
padding: 0;
}
#mbtnav li ul a {
width: 140px;
}
#mbtnav li ul ul {
margin: -25px 0 0 161px;
}
#mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul {
left: -999em;
}
#mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul {
left: auto;
}
#mbtnav li:hover, #mbtnav li.sfhover {
position: static;
}
#mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited {
background: #EDEFF4;
width: 120px;
color: #3B5998;
display: block;
font:normal 12px Helvetica, sans-serif;
margin: 1px 0 0 0;
padding: 9px 16px 10px 16px;
text-decoration: none;
z-index:9999;
border:1px solid #ddd;
-moz-border-radius:8px;
-webkit-border-radius:8px;
}
#mbtnav li li a:hover, #mbtnav li li a:active {
background: #627AAD;
color: #FFF;
display: block;
}
#mbtnav li li li a, #mbtnav li li li a:link, #mbtnav li li li a:visited {
background: #EDEFF4;
width: 120px;
color: #3B5998;
display: block;
font:normal 16px Helvetica, sans-serif;
padding: 9px 16px 10px 16px;
text-decoration: none;
z-index:9999;
border:1px solid #ddd;
margin: 1px 0 0 -14px;
}
#mbtnav li li li a:hover, #mbtnav li li li a:active {
background: #627AAD;
color: #FFF;
display: block;
overflow:visible
}
</style>
I have a funny issue, I developed a Wordpress navigation in my theme, on my homepage the menu renders out good but for some reason when I click on about for example the menu styling is lost on IE only and no other browser.
Here is a testing link of the site where one can have a look:
http://rcb.com.mt/wordpresstesting/melita/safepay/
This is the menu calling part in the header.php file:
<?php wp_nav_menu( array( 'theme_location' => 'header-menu','sort_column' => 'menu_order','container_id' => 'cssmenu' ) ); ?>
This is the CSS I am applying on the menu above:
/*Main Menu CSS*/
#import url(http://fonts.googleapis.com/css?family=Oxygen+Mono);
#cssmenu {padding: 0; margin: 0; border: 0;}
#cssmenu ul, #cssmenu li {list-style: none; margin: 0; padding: 0;}
#cssmenu ul {position: relative; z-index: 597; }
#cssmenu ul li { float: left; min-height: 1px; vertical-align: middle;}
#cssmenu ul li.hover,
#cssmenu ul li:hover {position: relative; z-index: 599; cursor: default;}
#cssmenu ul ul {visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598;}
#cssmenu ul ul li {float: none;}
#cssmenu ul ul ul {top: 0; left: auto; right: -99.5%; }
#cssmenu ul li:hover > ul { visibility: visible;}
#cssmenu ul ul {bottom: 0; left: 0;}
#cssmenu ul ul {margin-top: 0; }
#cssmenu ul ul li {font-weight: normal;}
#cssmenu a { display: block; line-height: 1em; text-decoration: none; }
#cssmenu {
background: #333;
border-bottom: 4px solid #1b9bff;
font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
font-size: 16px;
}
#cssmenu > ul { *display: inline-block; }
#cssmenu:after, #cssmenu ul:after {
content: '';
display: block;
clear: both;
}
#cssmenu a {
background: #333;
color: #CBCBCB;
padding: 0 20px;
position: relative;
}
#cssmenu ul { text-transform: uppercase; }
#cssmenu ul ul {
border-top: 4px solid #1b9bff;
text-transform: none;
min-width: 190px;
}
#cssmenu ul ul a {
background: #1b9bff;
color: #FFF;
border: 1px solid #0082e7;
border-top: 0 none;
line-height: 150%;
padding: 16px 20px;
}
#cssmenu ul ul ul { border-top: 0 none; }
#cssmenu ul ul li { position: relative }
#cssmenu > ul > li > a { line-height: 80px; }
#cssmenu ul ul li:first-child > a { border-top: 1px solid #0082e7; }
#cssmenu ul ul li:hover > a { background: #35a6ff; }
#cssmenu ul ul li:last-child > a {
border-radius: 0 0 3px 3px;
box-shadow: 0 1px 0 #1b9bff;
}
#cssmenu ul ul li:last-child:hover > a { border-radius: 0 0 0 3px; }
#cssmenu ul ul li.has-sub > a:after {
content: '+';
position: absolute;
top: 50%;
right: 15px;
margin-top: -8px;
}
#cssmenu li.current-menu-item > a{
background: #1b9bff;
color: #FFF;
}
#cssmenu ul li:hover > a, #cssmenu ul li.active > a{
background: #1b9bff;
color: #FFF;
}
#cssmenu ul li.has-sub > a:after {
content: '+';
margin-left: 5px;
}
#cssmenu ul li.last ul {
left: auto;
right: 0;
}
#cssmenu ul li.last ul ul {
left: auto;
right: 99.5%;
}
Can someone guide through fixing this please! Many thanks!
I can't see any DOCTYPE declared in the page.
Also try to clear the floating elements of your nav possibly at the end of the parents div.
If you are using HTML5 you need to add libraries which support it on IE8 in the head of your html file like this:
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
So I have a drop down menu which works just fine as is, however when I attempt to change the font size found under:
#mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited {
background: #897768;
/* width: 140px; */
color: #FFF;
display: block;
font:bold 13px Futura, Impact, Helvetica, Arial, sans-serif;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border-bottom:0px;
}
from 15px to anything larger, it causes the drop-down menu to disappear - whenever you move the mouse down from the static object to select one of the options.
I'm not sure what I need to alter in order to make the menu work with larger text.
Below is the full CSS code and an example of the HTML:
.Header h1 {text-shadow: 2px 2px #FFFFFF; }
/*----- MBT Drop Down Menu ----*/
#mbtnavbar {
/* background: #897768; */
width: 100%;
color: #897768;
margin: 0px;
padding: 0;
position: relative;
border-top:0px solid #FFF;
height: auto;
}
#mbtnav {
background: #FFF;
margin: 0;
padding: 0;
}
#mbtnav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#mbtnav li {
list-style: none;
margin: 0;
padding: 0;
/* border-left:1px solid #333;
border-right:1px solid #333; */
height:41px;
}
#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {
color: #4F4F4F;
display: block;
font:bold 15px Crushed, sans-serif;
margin: 0;
padding:9px 12px 10px 12px;
text-decoration: none;
}
#mbtnav li a:hover, #mbtnav li a:active {
background: #FFFFFF;
color: #65a5b2;
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 10px 12px;
}
#mbtnav li {
float: left;
padding: 0;
}
#mbtnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: 200px;
width: 200px;
margin: 0;
padding: 0;
}
#mbtnav li ul a {
width: 180px;
}
#mbtnav li ul ul {
margin: -35px 0 0 161px;
}
#mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul {
left: -999em;
}
#mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul {
left: auto;
}
#mbtnav li:hover, #mbtnav li.sfhover {
position: static;
}
#mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited {
background: #897768;
/* width: 140px; */
color: #FFF;
display: block;
font:bold 13px Futura, Impact, Helvetica, Arial, sans-serif;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border-bottom:0px;
}
#mbtnav li li a:hover, #mbtnavli li a:active {
background: #897768;
color: #000000;
display: block;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
.tabs-inner .widget #mbtnavbar li a {
border-left:none;
}
.tabs-outer .widget, .section {
margin:0;
}
.tabs-inner {
padding: 0px;
}
HTML:
<div id="mbtnavbar">
<ul id="mbtnav">
<li>
Home
</li>
<li>
About
<ul>
<li>#1</li>
<li>#2</li>
<li>#3</li>
</ul>
</li>
</ul>
</div>
I gave this,and its working..Do you want something like this?
#mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited {
background: #897768;
/* width: 140px; */
color: #FFF;
display: block;
font:bold 13px Futura, Impact, Helvetica, Arial, sans-serif;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border-bottom:0px;
font-size:20px;
}
I have tried making making all the margins 0 auto, I tried changing all the Float: (to center instead of left) this just centered my tabs in the middle of the page going down rather than across. What should I change and where? Do I change just the CSS or the html too?
My blog:
(http://icantaffordmylifestyle.blogspot.com/)
My HTML:
<center>
<div id='mbtnavbar'>
<ul id='mbtnav'>
<li> <a href=/ >| HOME</a>
</li>
<li>
| ABOUT
</li>
<li>| LIFESTYLE
<ul>
<li>| MUSIC</li>
<li>| DIY</li>
<li>| MY ART</li>
<li>| NAIL ART</li>
<li>| BEAUTY</li>
</ul>
</li>
<li>| FASHION
<ul>
<li>| OOTD FASHIONS</li>
<li>| LIFESTYE LOOKS</li>
<li>| FASHION RECAPS</li>
</ul>
<li>| OM-NOMNOM
<ul>
<li>| NOM DIARIES</li>
<li>| NOM-ventures</li>
<li>| LINKS TO MY DRINKS</li>
<li>| HEALTHY NOMS</li>
</ul>
</li>
<li>
| WISH LIST
</li>
<li> | CONTACT
<ul>
<li>| SERVICES</li>
<li>| DISCLAIMER</li>
</ul>
<!-- etc. -->
</li></li></ul></div>
</center>
My CSS:
<center>
#mbtnavbar {
/* background: #ffffff; */
width: auto;
color: #3cd0b6;
margin: 0 auto;
padding: 0;
position: relative;
border-top:0px solid #ffffff;
height: 40px;
vertical-align: text-middle;
}
#mbtnav {
background: #ffffff;
margin: 0;
padding: 0;
}
#mbtnav ul {
float: center;
list-style: none;
margin: 0;
padding: 0;
}
#mbtnav li {
list-style: none;
margin: 0;
padding: 0;
/* border-left:1px solid#ffffff;
border-right:1px solid #ffffff; */
vertical-align: text-middle;
}
#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {
color: #3cd0b6;
display: inline-block;
font:bold 24px sue ellen francisco;
margin: 0;
padding: 6px 9px 7px 9px;
text-decoration: none;
}
#mbtnav li a:hover, #mbtnav li a:active {
background: #ffffff;
color: #FC9F35;
display: inline-block;
text-decoration: none;
margin: 0;
padding: 6px 9px 7px 9px;
}
#mbtnav li {
float: left;
padding: 0;
}
#mbtnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: 40;
width: 200px;
margin: 0 auto;
padding: 0;
}
#mbtnav li ul a {
width: 200px;
}
#mbtnav li ul ul {
margin: -35px 0 0 161px;
}
#mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul {
left: -999em;
}
#mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul {
left: auto;
}
#mbtnav li:hover, #mbtnav li.sfhover {
position: static;
}
#mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited {
background: #ffffff;
/* width: 200px; */
color: #3cd0b6;
display: inline-block;
font:bold 19px sue ellen francisco;
margin: 0 auto;
padding: 6px 9px 7px 9px;
text-decoration: none;
z-index:9999;
border-bottom:1px dotted #333;
}
#mbtnav li li a:hover, #mbtnavli li a:active {
background: #ffffff;
color: #FC9F35;
display: block;
margin: 0 auto;
padding: 6px 9px 7px 9px;
text-decoration: none;
}
.tabs-inner .widget #mbtnavbar li a {
border-left:none;
}
.tabs-outer .widget, .section {
margin:0 auto;
}
.tabs-inner {
padding: 0px;
}
Just add display: inline-block; to #mbtnav
So I see some variations of my question we asked, but none of the solutions worked for my blog. http://icantaffordmylifestyle.blogspot.com/
So I've been messing around with perfecting this code for days now and it's driving me nuts that I can't figure it out. The About, Contact, lifestyle, and Om-Nomnom page are all not opening up if I have clicked one of the other tabs first. I have to click the home link first to refresh. So It only works if it is the first one to be clicked on or I go home before clicking a new link. Then the drop down boxes won't work either! They worked fine when I was still trying to get the links to work at all and had it at the bottom of my page, but now that I have moved it to the top of my page where it belongs it stopped working. The drop box disappears too quickly to click on anything unless I move it fast enough and in just the right spot. How do I get my links to work more consistently and get the drop downs to work better?
Here is the html:
<div id='mbtnavbar'>
<ul id='mbtnav'>
<li> <a href=/ >| HOME/</a>
</li>
<li>
| ABOUT
</li>
<li>
| CONTACT/ SERVICES
</li>
<li>
| LIFESTYE LOOKS
</li>
<li>
| OOTD FASHIONS
</li>
<li>| LIFESTYLE
<ul>
<li>| MUSIC</li>
<li>| DIY</li>
<li>| MY ART</li>
<li>| NAIL ART</li>
<li>| LIFE</li>
</ul>
</li>
<li>| OM-NOMNOM
<ul>
<li>| NOM DIARIES</li>
<li>| NOM-ventures</li>
<li>| LINKS TO MY DRINKS</li>
<li>| HEALTHY NOMS</li>
</ul>
</li>
<!-- etc. -->
</ul></div>
& the CSS is here:
/*----- MBT Drop Down Menu ----*/
<center>
#mbtnavbar {
/* background: #ffffff; */
width: 100%;
color: #3cd0b6;
margin: 0px;
padding: 0;
position: relative;
border-top:0px solid #ffffff;
height: 41px;
vertical-align: text-middle;
}
#mbtnav {
background: #ffffff;
margin: 0;
padding: 0;
}
#mbtnav ul {
float: center;
list-style: none;
margin: 0;
padding: 0;
}
#mbtnav li {
list-style: none;
margin: 0;
padding: 0;
/* border-left:1px solid#ffffff;
border-right:1px solid #ffffff; */
height:41px;
vertical-align: text-middle;
}
#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {
color: #3cd0b6;
display: block;
font:bold 24px sue ellen francisco;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
#mbtnav li a:hover, #mbtnav li a:active {
background: #ffffff;
color: #3cd0b6;
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 10px 12px;
}
#mbtnav li {
float: left;
padding: 0;
}
#mbtnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 200px;
margin: 0;
padding: 0;
}
#mbtnav li ul a {
width: 180px;
}
#mbtnav li ul ul {
margin: -35px 0 0 161px;
}
#mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul {
left: -999em;
}
#mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul {
left: auto;
}
#mbtnav li:hover, #mbtnav li.sfhover {
position: static;
}
#mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited {
background: #ffffff;
/* width: 140px; */
color: #3cd0b6;
display: block;
font:bold 16px sue ellen francisco;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border-bottom:1px dotted #333;
}
#mbtnav li li a:hover, #mbtnavli li a:active {
background: #ffffff;
color: #FC9F35;
display: block;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
.tabs-inner .widget #mbtnavbar li a {
border-left:none;
}
.tabs-outer .widget, .section {
margin:0;
}
.tabs-inner {
padding: 0px;
}
Remove your li height:
#mbtnav li {
list-style: none;
margin: 0;
padding: 0;
height: 41px; <-this one
vertical-align: text-middle;
}