I need to know if there is a way to add a space between the image link and Simology on my navigation menu, without adding extra space any where else
here is a link to the actual page here
Here is my code
<div style="text-align: left;">
<style>
#homelink {
background-image: url(http://i946.photobucket.com/albums/ad301/campbellmichelle41109/sims3_logo_ver931034_zpsmnyi2tcj.png);
background-repeat: no-repeat;
background-color: transparent;
display: block;
width: 126px;
height: 140px;
}
#homelink {
position: relative;
padding: 0;
margin: -97px;
}
#mbt-menu, #mbt-me
nu ul {
margin: -15px;
padding: 12px;
list-style: none;
}
#mbt-menu ul {
border: none !important;
padding: 0 !important;
}
#mbt-menu {
width: 100%;
margin: 0px auto;
javascript:void(0)
background-image: url("http://i946.photobucket.com/albums/ad301/campbellmichelle41109/navbg1.1_zps86kuvvkj.png") repeat-x;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
}
#mbt-menu:before,
#mbt-menu:after {
content: "";
display: table;
}
#mbt-menu:after {
clear: both;
}
#mbt-menu {
zoom:1;
}
#mbt-menu li {
float: left;
border-right: 1px solid #328ad4;
-moz-box-shadow: 1px 0 0 #469ee8;
-webkit-box-shadow: 1px 0 0 #469ee8;
box-shadow: 0px 0 0 #469ee8;
position: relative;
}
#mbt-menu a {
float: left;
padding: 10px 25px;
color: #ffffff;
text-transform: uppercase;
font: bold 13px 'Trebuchet MS',Arial, sans-serif;
text-decoration: none;
text-shadow: 0 0px 0 #000;
}
#mbt-menu li ul a{
color: #000000;
}
#mbt-menu li ul a:hover{
color: #057BBA;
}
#mbt-menu li:hover > a {
color: #0;
}
*html #mbt-menu li a:hover { /* IE6 only */
color: #000000;
}
#mbt-menu ul li {
border-style: solid;
border-color: #EBEBEB;
}
#mbt-menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opaciaty: 0;
visibility: hidden;
position: absolute;
top: 55px;
left: 15px;
z-index: 9999;
background: #ffffff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#mbt-menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#mbt-menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
}
#mbt-menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
border: 1px solid #EBEBEB;
background:#fff !important;
}
#mbt-menu ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#mbt-menu ul a {
padding: 7px;
width: 113px;
_height: 9px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#mbt-menu ul a{
font-size: 12px;
}
#mbt-menu ul a:hover {
background-color: #ffffff;
}
#mbt-menu ul li:first-child > a {
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
#mbt-menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #3b3b3b;
}
#mbt-menu ul li:first-child a:hover:after {
border-bottom-color: #04acec;
}
#mbt-menu ul ul li:first-child a:hover:after {
border-right-color: #0299d3;
border-bottom-color: transparent;
}
#mbt-menu ul li:last-child > a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}
/* non links */
#mbt-menu ul {
color: #000000;
font-size: 12px;
}
#mbt-menu li ul:hover {
color: #057BBA;
}
#mbt-menu ul {
pading: 7px;
width: 130px;
height: 34px;
_height: 9px;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#mbt-menu {
font: bold 13px 'Trebuchet MS', Arial, sans-serif;
text-decoration: none;
text-shadow: 0 0px 0 #000;
}
</style>
<div align=center>
<ul id="mbt-menu">
<li><a id=homelink href="http://thesims3addictresource.blogspot.com/"></a></li>
<li>
Simology
<ul>
<li>Sims
<ul>
<li>Faries</li>
<li>Ghosts</li>
<li>Plant Sims</li>
<li>Witches</li>
<li>Werewolves</li>
<li>Vampires</li>
<li>Zombies
</li></ul>
</li>
<li>Needs</li>
<li>Skills</li>
<li>Traits</li>
<li>Moodlets</li>
<li>Life & Death
<ul>
<li>Death</li>
<li>Ghosts</li>
</ul>
</li>
<li>Lifetime Wishes</li>
<li>Life Time Rewards</li>
</ul>
</li>
<li>
Petology
<ul>
<li>Horses
<ul>
<li>Traits</li>
<li>Skills</li>
<li>Breeding</li>
<li>Lifetime Rewards</li>
</ul> </li>
</ul>
</li>
<li>
Expansion Guide
<ul>
<li>Ambitions
<ul>
<li>New Skills</li>
<li>New Lifetime Rewards</li>
<li>Celebrities</li>
</ul>
<li>Generations</li>
<li>Pets</li>
<li>Late Night</li>
<li>Supernatural</li>
<li>World Adventures</li>
<li>University Life</li>
</li>
</ul>
</li>
<li>
Towns
<ul>
<li>Sunset Valley</li>
<li>Monte Vista</li>
<li>Hidden Springs</li>
<li>Dragon Valley</li>
<li>Roaring Heights</li>
</ul>
</li>
<li>
Free Downloads
<ul>
<li> Custom Sims </li>
<li>Sliders</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</pre>
Use this CSS:
#homelink { margin: -97px -30px -97px -97px; }
Related
I am trying to create a sub menu in a html navigation menu. The menu is appearing but it is showing in the menu list instead of to the right. I have made a screenshot of the problem and would be grateful if someone could help me adapt my code.
You will see from the screenshot, that the sub menu is appearing in the main menu and not off to the right of the selected link.
I have tried so many options that I need to turn to the experts for help.
Many thanks
.menu {
width: 100%;
height: 40px;
margin: 0;
padding: 0;
background: #0c323f;
position: static;
}
.navigation {
list-style: none;
padding: 0;
margin: 0;
background: rgb(58, 58, 58);
font-size: 16px;
}
.navigation li {
float: left;
}
.navigation li:hover {
background: #1a4655;
}
.navigation li:first-child {
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 0 0 5px;
}
.navigation li a {
display: block;
padding: 0 20px;
text-decoration: none;
line-height: 40px;
color: #fff;
}
.navigation ul {
display: none;
position: absolute;
list-style: none;
margin-left: -3px;
padding: 0;
overflow: hidden;
}
.navigation ul li {
float: none;
}
.navigation li:hover>ul {
display: block;
background: #1a4655;
/* border: solid 3px #fff;*/
border-top: 0;
-webkit-border-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px;
-webkit-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.25);
box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.25);
position: absolute;
}
.navigation li:hover>ul li:hover {
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
.navigation li li a:hover {
background: #0c323f;
color: white;
}
.navigation ul li:last-child a,
.navigation ul li:last-child a:hover {
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
<div class="menu">
<ul class="navigation">
<li>Home</li>
<li>Requests
<ul>
<li>Boxes
<ul>
<li>Files</li>
<li>Recycle</li>
<li>Box Supply</li>
</ul>
</li>
<li>Files</li>
<li>Recycle</li>
<li>Box Supply</li>
<li>Recycle</li>
<li>Destruction</li>
<li>Destruction Schedules</li>
</ul>
</li>
<li>Reports</li>
<li>Invoices</li>
<li>Control Panel</li>
<li>Logout</li>
</ul>
<div class="clear"></div>
</div>
Image screenshot
Normal dropdown
Sub menu showing problem
Use top:0 and left:100% to the 2nd level submenu
Stack Snippet
.menu {
width: 100%;
height: 40px;
margin: 0;
padding: 0;
background: #0c323f;
position: static;
}
.navigation {
list-style: none;
padding: 0;
margin: 0;
background: rgb(58, 58, 58);
font-size: 16px;
}
.navigation li {
float: left;
}
.navigation li:hover {
background: #1a4655;
}
.navigation li:first-child {
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 0 0 5px;
}
.navigation li a {
display: block;
padding: 0 20px;
text-decoration: none;
line-height: 40px;
color: #fff;
}
.navigation ul {
display: none;
position: absolute;
list-style: none;
margin-left: -3px;
padding: 0;
}
.navigation ul ul {
left: 100%;
top: 0;
}
.navigation ul li {
float: none;
}
.navigation li:hover>ul {
display: block;
background: #1a4655;
/* border: solid 3px #fff;*/
border-top: 0;
-webkit-border-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px;
-webkit-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.25);
box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.25);
position: absolute;
}
.navigation li:hover>ul li:hover {
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
.navigation li li a:hover {
background: #0c323f;
color: white;
}
.navigation ul li:last-child a,
.navigation ul li:last-child a:hover {
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
<div class="menu">
<ul class="navigation">
<li>Home</li>
<li>Requests
<ul>
<li>Boxes
<ul>
<li>Files</li>
<li>Recycle</li>
<li>Box Supply</li>
</ul>
</li>
<li>Files</li>
<li>Recycle</li>
<li>Box Supply</li>
<li>Recycle</li>
<li>Destruction</li>
<li>Destruction Schedules</li>
</ul>
</li>
<li>Reports</li>
<li>Invoices</li>
</ul>
<div class="clear"></div>
</div>
My problem im having is my drop down menu background is some how transparent and im able to see the text on the page behind the menu. Also i am using blogger if that makes any difference.
Here is my problem in this image
Here is my code here"
<div style="text-align: left;">
<style>
#homelink {
background-image: url(http://i946.photobucket.com/albums/ad301/campbellmichelle41109/sims3_logo_ver931034_zpsmnyi2tcj.png);
background-repeat: no-repeat;
background-color: transparent;
display: block;
width: 126px;
height: 140px;
}
#homelink {
position: relative;
padding: 0;
margin: -97px;
}
#mbt-menu, #mbt-me
nu ul {
margin: -15px;
padding: 12px;
list-style: none;
}
#mbt-menu ul {
border: none !important;
padding: 0 !important;
}
#mbt-menu {
width: 100%;
margin: 0px auto;
javascript:void(0)
background-image: url("http://i946.photobucket.com/albums/ad301/campbellmichelle41109/navbg1.1_zps86kuvvkj.png") repeat-x;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
}
#mbt-menu:before,
#mbt-menu:after {
content: "";
display: table;
}
#mbt-menu:after {
clear: both;
}
#mbt-menu {
zoom:1;
}
#mbt-menu li {
float: left;
border-right: 1px solid #328ad4;
-moz-box-shadow: 1px 0 0 #469ee8;
-webkit-box-shadow: 1px 0 0 #469ee8;
box-shadow: 0px 0 0 #469ee8;
position: relative;
}
#mbt-menu a {
float: left;
padding: 10px 25px;
color: #ffffff;
text-transform: uppercase;
font: bold 13px 'Trebuchet MS',Arial, sans-serif;
text-decoration: none;
text-shadow: 0 0px 0 #000;
}
#mbt-menu li ul a{
color: #000000;
}
#mbt-menu li ul a:hover{
color: #057BBA;
}
#mbt-menu li:hover > a {
color: #0;
}
*html #mbt-menu li a:hover { /* IE6 only */
color: #000000;
}
#mbt-menu ul li {
border-style: solid;
border-color: #EBEBEB;
}
#mbt-menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opaciaty: 0;
visibility: hidden;
position: absolute;
top: 55px;
left: 15px;
z-index: 9999;
background: #ffffff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#mbt-menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#mbt-menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
}
#mbt-menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
border: 1px solid #EBEBEB;
}
#mbt-menu ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#mbt-menu ul a {
padding: 7px;
width: 130px;
_height: 9px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#mbt-menu ul a{
font-size: 12px;
}
#mbt-menu ul a:hover {
background-color: #ffffff;
}
#mbt-menu ul li:first-child > a {
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
#mbt-menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #3b3b3b;
}
#mbt-menu ul li:first-child a:hover:after {
border-bottom-color: #04acec;
}
#mbt-menu ul ul li:first-child a:hover:after {
border-right-color: #0299d3;
border-bottom-color: transparent;
}
#mbt-menu ul li:last-child > a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}
/* non links */
#mbt-menu ul {
color: #000000;
font-size: 12px;
}
#mbt-menu li ul:hover {
color: #057BBA;
}
#mbt-menu ul {
pading: 7px;
width: 130px;
height: 34px;
_height: 9px;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#mbt-menu {
font: bold 13px 'Trebuchet MS', Arial, sans-serif;
text-decoration: none;
text-shadow: 0 0px 0 #000;
}
</style>
<div align=center>
<ul id="mbt-menu">
<li><a id=homelink href="http://thesims3addictresource.blogspot.com/"></a></li>
<li>
Simology
<ul>
<li>Sims
<ul>
<li>Faries</li>
<li>Ghosts</li>
<li>Plant Sims</li>
<li>Witches</li>
<li>Werewolves</li>
<li>Vampires</li>
<li>Zombies
</ul>
</li>
<li>Needs</li>
<li>Skills</li>
<li>Traits</li>
<li>Moodlets</li>
<li>Life & Death
<ul>
<li>Death</li>
<li>Ghosts</li>
</ul>
</li>
<li>Lifetime Wishes</li>
<li>Life Time Rewards</li>
</ul>
</li>
<li>
Expansion Guide
<ul>
<li>Ambitions
<ul>
<li>New Skills</li>
<li>New Lifetime Rewards</li>
<li>Celebrities</li>
</ul>
<li>Generations</li>
<li>Pets</li>
<li>Late Night</li>
<li>Supernatural</li>
<li>World Adventures</li>
<li>University Life</li>
</li>
</ul>
</li>
<li>
Towns
<ul>
<li>Sunset Valley</li>
<li>Monte Vista</li>
<li>Hidden Springs</li>
<li>Dragon Valley</li>
<li>Roaring Heights</li>
</ul>
</li>
<li>
Free Downloads
<ul>
<li> Custom Sims </li>
<li>Sliders</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
Add/Update the following entries in your css code.
#mbt-menu ul li, #mbt-menu>li li a {
background-color: #ffffff;
}
Also remove the following width property. its causing problem due to fixed width of ul element
#mbt-menu ul a{
/*Other styles*/
width:130px;
/*Other styles*/
}
Please add a background-color property for the following ID.
#mbt-menu {
font: bold 13px 'Trebuchet MS', Arial, sans-serif;
text-decoration: none;
text-shadow: 0 0px 0 #000;
background-color: /*your color code*/;
}
I'm trying to change the color of the text on only the part of the menu that drops down. My problem when changing the font color is it changes the font color for the whole menu rather than just the drop down part of the navigation.
i apologize in advance its been years since i worked with html and i'm very rusty.
example here
The code here:
<div style="text-align: left;">
<style>
#homelink {
background-image: url(http://i946.photobucket.com/albums/ad301/campbellmichelle41109/sims3_logo_ver931034_zpsmnyi2tcj.png);
background-repeat: no-repeat;
background-color: transparent;
display: block;
width: 126px;
height: 140px;
}
#homelink {
position: relative;
padding: 0;
margin: -97px;
}
#mbt-menu, #mbt-menu ul {
margin: -15px;
padding: 17px;
list-style: none;
}
#mbt-menu {
width: 100%;
margin: 0px auto;
javascript:void(0)
background-image: url("http://i946.photobucket.com/albums/ad301/campbellmichelle41109/navbg1.1_zps86kuvvkj.png") repeat-x;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
}
#mbt-menu:before,
#mbt-menu:after {
content: "";
display: table;
}
#mbt-menu:after {
clear: both;
}
#mbt-menu {
zoom:1;
}
#mbt-menu li {
float: left;
border-right: 1px solid #328ad4;
-moz-box-shadow: 1px 0 0 #469ee8;
-webkit-box-shadow: 1px 0 0 #469ee8;
box-shadow: 1px 0 0 #469ee8;
position: relative;
}
#mbt-menu a {
float: left;
padding: 10px 25px;
color: #FFFFFF;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#mbt-menu li:hover > a {
color: #FFFFFF;
}
*html #mbt-menu li a:hover { /* IE6 only */
color: #000000;
}
#mbt-menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opaciaty: 0;
visibility: hidden;
position: absolute;
top: 46px;
left: 0;
z-index: 9999;
background: #ffffff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#mbt-menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#mbt-menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
#mbt-menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
-moz-box-shadow: 0 1px 0 #227ac4, 0 2px 0 #666;
-webkit-box-shadow: 0 1px 0 #227ac4, 0 2px 0 #666;
box-shadow: 0 1px 0 #227ac4, 0 2px 0 #666;
}
#mbt-menu ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#mbt-menu ul a {
padding: 7px;
width: 130px;
_height: 9px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#mbt-menu ul a{
font-size: 12px;
font-color: #000000;
}
#mbt-menu ul a:hover {
background-color: #ffffff;
}
#mbt-menu ul li:first-child > a {
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
#mbt-menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #469ee8;
}
#mbt-menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #3b3b3b;
}
#mbt-menu ul li:first-child a:hover:after {
border-bottom-color: #04acec;
}
#mbt-menu ul ul li:first-child a:hover:after {
border-right-color: #0299d3;
border-bottom-color: transparent;
}
#mbt-menu ul li:last-child > a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}
</style>
<div align=center>
<ul id="mbt-menu">
<li><a id=homelink href="http://sims3addictresource.blogspot.com/"></a></li>
<li>
Simology
<ul>
<li>Needs </li>
<li>Skills</li>
<li>Traits</li>
<li>Moodlets</li>
<li>Lifetime Wishes</li>
<li>Life Time Rewards</li>
<li>Death </li>
<li>Ghosts</li>
</ul>
</li>
<li>
Expansion Guide
<ul>
<li>Ambitions</li>
<li>Generations</li>
<li>Pets</li>
<li>Late Night</li>
<li>Supernatural</li>
<li>World Adventures</li>
<li>University Life</li>
</ul>
</li>
<li>
Towns
<ul>
<li>Sunset Valley</li>
<li>Monte Vista</li>
<li>Hidden Springs</li>
<li>Dragon Valley</li>
<li>Roaring Heights</li>
</ul>
</li>
<li>
Free Downloads
<ul>
<li> Custom Sims </li>
<li>Sliders</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
Try this
#mbt-menu li ul li > a {
color: // your colour here;
}
#mbt-menu a {
float: left;
padding: 10px 25px;
color: #FFFFFF;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
This part of the css is the one that is causing the issue. You are setting any link that is part of the menu to be white, even the ones that are not the submenu.
You can instead move that color: #ffffff out, and do
#mbt-menu li ul a{
color: #FFFFFF;
}
This finds all the a tags that are part of the menu that are under a sublist and sets the color to white.
Here is a way to fix that
#mbt-menu ul a {
color:coral; //change any color here
}
DEMO
I want the drop down part of the menu to have borders both around and throw the drop down part of the menu. I also want to get rid of the blue border that shows on the right of the drop down menu.
The image below shows the problem i am having and what i want:
Here is the code for my navigation menu:
<div style="text-align: left;">
<style>
#homelink {
background-image: url(http://i946.photobucket.com/albums/ad301/campbellmichelle41109/sims3_logo_ver931034_zpsmnyi2tcj.png);
background-repeat: no-repeat;
background-color: transparent;
display: block;
width: 126px;
height: 140px;
}
#homelink {
position: relative;
padding: 0;
margin: -97px;
}
#mbt-menu, #mbt-menu ul {
margin: -15px;
padding: 17px;
list-style: none;
}
#mbt-menu ul {
border-style: solid;
border-color: #EBEBEB;
}
#mbt-menu {
width: 100%;
margin: 0px auto;
javascript:void(0)
background-image: url("http://i946.photobucket.com/albums/ad301/campbellmichelle41109/navbg1.1_zps86kuvvkj.png") repeat-x;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
}
#mbt-menu:before,
#mbt-menu:after {
content: "";
display: table;
}
#mbt-menu:after {
clear: both;
}
#mbt-menu {
zoom:1;
}
#mbt-menu li {
float: left;
border-right: 1px solid #328ad4;
-moz-box-shadow: 1px 0 0 #469ee8;
-webkit-box-shadow: 1px 0 0 #469ee8;
box-shadow: 1px 0 0 #469ee8;
position: relative;
}
#mbt-menu a {
float: left;
padding: 10px 25px;
color: #ffffff;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#mbt-menu li ul a{
color: #000000;
}
#mbt-menu li ul a{
color: #000000;
}
#mbt-menu li ul a:hover{
color: #057BBA;
}
#mbt-menu li:hover > a {
color: #0;
}
*html #mbt-menu li a:hover { /* IE6 only */
color: #000000;
}
#mbt-menu ul li {
border-style: solid;
border-color: #EBEBEB;
}
#mbt-menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opaciaty: 0;
visibility: hidden;
position: absolute;
top: 46px;
left: 0;
z-index: 9999;
background: #ffffff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#mbt-menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#mbt-menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
}
#mbt-menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
border: 1px solid #EBEBEB;
}
#mbt-menu ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#mbt-menu ul a {
padding: 7px;
width: 130px;
_height: 9px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#mbt-menu ul a{
font-size: 12px;
}
#mbt-menu ul a:hover {
background-color: #ffffff;
}
#mbt-menu ul li:first-child > a {
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
#mbt-menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #469ee8;
}
#mbt-menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #3b3b3b;
}
#mbt-menu ul li:first-child a:hover:after {
border-bottom-color: #04acec;
}
#mbt-menu ul ul li:first-child a:hover:after {
border-right-color: #0299d3;
border-bottom-color: transparent;
}
#mbt-menu ul li:last-child > a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}
</style>
<div align=center>
<ul id="mbt-menu">
<li><a id=homelink href="http://sims3addictresource.blogspot.com/"></a></li>
<li>
Simology
<ul>
<li>Needs</li>
<li>Skills</li>
<li>Traits</li>
<li>Moodlets</li>
<li>Lifetime Wishes</li>
<li>Life Time Rewards</li>
<li>Death</li>
<li>Ghosts</li>
</ul>
</li>
<li>
Expansion Guide
<ul>
<li>Ambitions</li>
<li>Generations</li>
<li>Pets</li>
<li>Late Night</li>
<li>Supernatural</li>
<li>World Adventures</li>
<li>University Life</li>
</ul>
</li>
<li>
Towns
<ul>
<li>Sunset Valley</li>
<li>Monte Vista</li>
<li>Hidden Springs</li>
<li>Dragon Valley</li>
<li>Roaring Heights</li>
</ul>
</li>
<li>
Free Downloads
<ul>
<li> Custom Sims </li>
<li>Sliders</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
To get rid of the little blue triangle, remove this rule:
#mbt-menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #469ee8;
}
To remove the background box around the drop down menu, add these rules:
#mbt-menu ul {
border: none !important;
padding: 0 !important;
}
To remove the blue border (actually a box shadow) along the right side of the box, delete these rules:
#mbt-menu li {
float: left;
border-right: 1px solid #328ad4;
-moz-box-shadow: 1px 0 0 #469ee8; /* DELETE */
-webkit-box-shadow: 1px 0 0 #469ee8; /* DELETE */
box-shadow: 1px 0 0 #469ee8; /* DELETE */
position: relative;
To tweak the positioning of the drop down menu, so it aligns nicely with the parent link, adjust the left and top properties here:
#mbt-menu ul {
margin: 20px 0 0 0;
_margin: 0;
opaciaty: 0;
visibility: hidden;
position: absolute;
top: 46px; /* ADJUST DROP DOWN */
left: 0; /* ADJUST DROP DOWN */
z-index: 9999;
background: #ffffff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
You essentially want something like this:
#mbt-menu ul {border:none; padding: 0;}
#mbt-menu li li {box-shadow: none; border-width: 2px 2px 0 2px;}
#mbt-menu li li:last-child {border-bottom-width: 2px;}
I wouldn't add the styles in like that, though. This is for demo purposes only. You may need to make those styles more specific for them to override what's there already. (I just tested via a CSS terminal.) Ideally, integrate these styles into your existing code where they belong.
You have styles for the parent ul/li that are affecting the sub ul/li, so ideally change those rules to target just the top level ones, using something like the child selector (>).
I have a menu that is appearing behind the banner. I need to show it over the banner.
By removing the :
.ei-slider-large li{
position: absolute;
}
its solve the issue, but then the banner is not working.
Below are details of my implementation :
Menu:
<div id='cssmenu'>
<ul>
<li class='active'><a href='index.php'><span>Home</span></a></li>
<li class='has-sub'><a href='#'><span>About Us</span></a>
<ul>
<li><span>Our Story</span></li>
<li><span>Our Leadership Team</span></li>
<li><span>Testimonials</span></li>
</ul>
</li>
<li class='has-sub '><a href='#'><span>Our Services</span></a>
<ul>
<li><a href='geopolitical.php'><span>Geo-Political Risk Management</span></a></li>
<li><a href='security.php'><span>Security & Business Continuity</span></a></li>
<li><a href='business.php'><span>Business Resiliency</span></a></li>
<li><a href='integrity.php'><span>Integrity & Assurance</span></a></li>
</ul>
</li>
<li class='has-sub '><a href='#'><span>Insights</span></a>
<ul>
<li><a href='alerts_ads.php'><span>Alerts & Advisories</span></a></li>
<li><a href='research.php'><span>Research</span></a></li>
<li><a href='news_events.php'><span>News & Events</span></a></li>
</ul>
</li>
<li><a href='csr.php'><span>CSR</span></a></li>
<li class='has-sub '><a href='#'><span>Contact Us</span></a>
<ul>
<li><a href='our_office.php'><span>Our Offices</span></a></li>
</ul>
</li>
</ul>
</div>
menu css:
#cssmenu:after,
#cssmenu ul:after {
display: block;
clear: both;
}
#cssmenu a {
color: #333;
display: inline-block;
font-size: 15px;
font-weight:bold;
padding: 0 20px;
margin-left:10px;
margin-right:10px;
text-decoration: none;
border:1px solid #FFF;
}
#cssmenu a:hover {
position: relative;
top: 0;
}
#cssmenu ul {
list-style: none;
}
#cssmenu > ul {
width: 100%;
}
#cssmenu > ul > li {
float: left;
padding: 0 10px;
position: relative;
}
#cssmenu > ul > li.active a {
background: #FFF;
border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
position: relative;
color:#569C17;
border:1px solid #CCC;
}
#cssmenu > ul > li.active a:hover {
background: #FFF;
border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
position: relative;
color:#569C17;
}
#cssmenu > ul > li.has-sub-active > a {
background: #FFF;
border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
position: relative;
display: block;
color:#569C17;
border:1px solid #CCC;
}
#cssmenu .has-sub-active:hover ul {
display: block;
}
#cssmenu .has-sub-active a {
display: block;
position: relative;
}
#cssmenu .has-sub-active a:after {
}
#cssmenu .has-sub-active ul {
background: #FFF;
display: none;
padding: 10px 0;
position: absolute;
left: 50%;
top: 41px;
margin-left: -70px;
width: 200px;
z-index: 1;
border-bottom:1px solid #CCC;
border-left:1px solid #CCC;
border-right:1px solid #CCC;
}
#cssmenu .has-sub-active ul li:hover > a {
background: #dddddd;
color: #569C17;
font-size:12px;
}
#cssmenu .has-sub-active ul a {
line-height: 100%;
padding: 8px 0;
font-size:12px;
color:#333;
}
#cssmenu > ul > li:hover > a {
background: #FFF;
border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
position: relative;
color:#569C17;
border-top:1px solid #CCC;
border-left:1px solid #CCC;
border-right:1px solid #CCC;
}
#cssmenu > ul > li a {
line-height: 39px;
}
#cssmenu > ul > li a:hover {
}
#cssmenu .has-sub:hover ul {
display: block;
}
#cssmenu .has-sub a {
display: block;
position: relative;
}
#cssmenu .has-sub a:after {
}
#cssmenu .has-sub ul {
background: #FFF;
display: none;
padding: 10px 0;
position: absolute;
left: 50%;
top: 41px;
margin-left: -70px;
width: 200px;
z-index: 1;
border-bottom:1px solid #CCC;
border-left:1px solid #CCC;
border-right:1px solid #CCC;
}
#cssmenu .has-sub ul li:hover > a {
background: #dddddd;
color: #569C17;
font-size:12px;
}
#cssmenu .has-sub ul a {
line-height: 100%;
padding: 8px 0;
font-size:12px;
color:#333;
}
banner:
<div id="ei-slider" class="ei-slider">
<ul class="ei-slider-large">
<li> <img src="images/large/1.jpg" alt="image01" />
<div class="ei-title">
<h3>Geo-Political Risk Management</h3>
</div>
</li>
<li> <img src="images/large/2.jpg" alt="image02" />
<div class="ei-title">
<h3>Security & Business Continuity</h3>
</div>
</li>
<li> <img src="images/large/3.jpg" alt="image03"/>
<div class="ei-title">
<h3>Business Resiliency</h3>
</div>
</li>
<li> <img src="images/large/4.jpg" alt="image04"/>
<div class="ei-title">
<h3>Integrity & Assurance</h3>
</div>
</li>
</ul><!-- ei-slider-large -->
<ul class="ei-slider-thumbs">
<li class="ei-slider-element">Current</li>
<li>Slide 1<img src="images/thumbs/1.jpg" alt="thumb01" /></li>
<li>Slide 2<img src="images/thumbs/2.jpg" alt="thumb02" /></li>
<li>Slide 3<img src="images/thumbs/3.jpg" alt="thumb03" /></li>
<li>Slide 4<img src="images/thumbs/4.jpg" alt="thumb04" /></li>
</ul>
<!-- ei-slider-thumbs -->
</div><!-- ei-slider -->
banner css:
.ei-slider{
position: relative;
width: 100%;
max-width: 1920px;
height: 400px;
margin: 0 auto;
}
.ei-slider-loading{
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
z-index:999;
color: #fff;
text-align: center;
line-height: 400px;
}
.ei-slider-large{
height: 100%;
width: 100%;
position:relative;
overflow: hidden;
}
.ei-slider-large li{
position: absolute;
top: 0px;
left: 0px;
overflow: hidden;
height: 100%;
width: 100%;
}
.ei-slider-large li img{
width: 100%;
}
.ei-title{
position: absolute;
right: 50%;
margin-right: 13%;
top: 30%;
}
.ei-title h2, .ei-title h3{
text-align: right;
}
.ei-title h2{
font-size: 40px;
line-height: 50px;
font-family: 'Playfair Display', serif;
font-style: italic;
color: #b5b5b5;
}
.ei-title h3{
font-size: 30px;
line-height: 70px;
font-family: 'Open Sans Condensed', sans-serif;
text-transform: uppercase;
color: #000;
}
.ei-slider-thumbs{
height: 13px;
margin: 0 auto;
position: relative;
}
.ei-slider-thumbs li{
position: relative;
float: left;
height: 100%;
}
.ei-slider-thumbs li.ei-slider-element{
top: 0px;
left: 0px;
position: absolute;
height: 100%;
z-index: 10;
text-indent: -9000px;
background: #000;
background: rgba(0,0,0,0.9);
}
.ei-slider-thumbs li a{
display: block;
text-indent: -9000px;
background: #666 ;
width: 100%;
height: 100%;
cursor: pointer;
-webkit-box-shadow:
0px 1px 1px 0px rgba(0,0,0,0.3),
0px 1px 0px 1px rgba(255,255,255,0.5);
-moz-box-shadow:
0px 1px 1px 0px rgba(0,0,0,0.3),
0px 1px 0px 1px rgba(255,255,255,0.5);
box-shadow:
0px 1px 1px 0px rgba(0,0,0,0.3),
0px 1px 0px 1px rgba(255,255,255,0.5);
-webkit-transition: background 0.2s ease;
-moz-transition: background 0.2s ease;
-o-transition: background 0.2s ease;
-ms-transition: background 0.2s ease;
transition: background 0.2s ease;
}
.ei-slider-thumbs li a:hover{
background-color: #f0f0f0;
}
.ei-slider-thumbs li img{
position: absolute;
bottom: 50px;
opacity: 0;
z-index: 999;
max-width: 100%;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
-webkit-box-reflect:
below 0px -webkit-gradient(
linear,
left top,
left bottom,
from(transparent),
color-stop(50%, transparent),
to(rgba(255,255,255,0.3))
);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
.ei-slider-thumbs li:hover img{
opacity: 1;
bottom: 13px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
The problem is in your z-index.
As you can see, you've given your #cssmenu .has-sub ul { z-index:1; }
And your .ei-slider-thumbs li img { z-index:999; }
Try setting the z-index of your menu to 9999 or lowering/removing the z-index of your slider.