I wanted to create a css dropdown for my blogger blog. But I Faced many difficulties because I am not a CSS professional and my blogger template is not designed by me. I tried many things but nothing worked for me.
I am giving you the code, please identify errors in it. Thanks...
My HTML Structure of Navigation Links:
<div id='mainmenu'>
<ul>
<li class='first current_page_item'><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>
<li><a href='http://www.technodoze.com/search/label/Physics' title='Amazing Articles about Physics'>Physics</a></li>
<li><a href='http://www.technodoze.com/search/label/Amazing' title='Amazing'>Amazing Stuff</a>
The code for drop down element where problem really is:
<ul>
<li><a href='http://www.technodoze.com/search/label/Amazing' title='Amazing'>Amazing Stuff</a></li>
<li><a href='http://www.technodoze.com/2011/09/write-for-us.html' title='Write For Us'>Write For Us</a></li>
</ul>
From here it is normal code:
</li>
<li><a href='http://www.technodoze.com/search/label/Videos' title='Videos'>Videos</a></li>
<li><a href='http://www.technodoze.com/search/label/Downloads' title='Free Downloads'>Download</a></li>
<li><a href='http://www.technodoze.com/search/label/Biggest%20In%20The%20World' title='SG Biggest'>Biggest In The World</a></li>
<li><a href='http://www.technodoze.com/2010/01/author-of-blog.html' title='About Me'>About Me</a></li>
</ul>
</div>
See URL where this navigation linking is applied:
www.technodoze.com
Now my CSS:
#mainmenu a {
text-decoration:none;
display:block;
margin:0;
float:left;
background: none;
padding: 9px 15px;
text-transform:uppercase;
color: #CCCCCC;
font-size: 11px;
}
#mainmenu li a:hover,
#mainmenu li a:focus,
#mainmenu a.mainMenuParentBtnFocused{
/*background-color: #1e1e1e;*/
background: url(http://1.bp.blogspot.com/_lxBSX0YJV58/SwQlF623qJI/AAAAAAAAAlc/h7AiX8sx00g/s1600/mainnav-hover.gif) repeat-x left top #666666;
color:#fff;
}
#mainmenu , #mainmenu ul {
padding: 0;
margin: 0;
list-style: none;
line-height: 1em;
}
#mainmenu ul {
/*border around submenu goes here*/
background: none;
left:0;
}
#mainmenu li {
/*great place to use a background image as a divider*/
background-image:url(http://3.bp.blogspot.com/_lxBSX0YJV58/SwQlNUijg3I/AAAAAAAAAlk/6U-xiY6v8Jo/s1600/mainnav-sep.gif);
background-repeat:no-repeat;
background-position: 100% 0px;
cursor: pointer;
float: left;
margin: 0 0px 0 0px;
padding: 0 2px 0 1px;
height: 30px;
display: inline;
}
#mainmenu {
overflow: hidden;
font-size: 12px;
float: left;
width: 738px;
display: inline;
height: 30px;
}
All is well till here... (The Upper CSS code is Just for the #mainmenu ul li which is infact going fine.)
The problem starts here...
#mainmenu li ul {
display: none;
margin:0;
padding 0;
position:absolute;
left:0;
}
#mainmenu li:hover > ul {
display: block;
float:none;
position:absolute;
}
#mainmenu li:hover ul li {
display: block;
}
#mainmenu li ul li {
list-style-type: none;
margin:0;
display: block;
padding:0;
}
I tried to create a drop-down but the child element [ #mainmenu ul li ul ] is not in the form of drop-down and is embedded on the side.
.
(This is currently applied on website you can view it by going to www.technodoze.com and mouseover on Amazing Stuff navigation link.)
I am sure the rare mistake is in the last piece of CSS code but I showed you the whole scenario in case this problem has arisen due to float of #mainmenu ul or any other upper element...
I will be thankful to the person helping me...
Thanks
Updated: 27 sep, 11:00 GMT, Reason: One more problem
I have changed my code now to :
#mainmenu {
overflow: hidden;
font-size: 12px;
float: left;
width: 738px;
display: inline;
height: 30px;
}
#mainmenu ul li ul li a {
background-color:#333333;
}
#mainmenu ul li ul .first_li {
-moz-border-top-left-radius: 7px;
-khtml-border-top-left-radius: 7px;
-webkit-border-top-left-radius: 7px;
border-top-left-radius: 7px;
-moz-border-top-right-radius: 7px;
-khtml-border-top-right-radius: 7px;
-webkit-border-top-right-radius: 7px;
border-top-right-radius: 7px;
}
#mainmenu ul li ul .last_li {
-moz-border-bottom-left-radius: 7px;
-khtml-border-bottom-left-radius: 7px;
-webkit-border-bottom-left-radius: 7px;
border-bottom-left-radius: 7px;
-moz-border-bottom-right-radius: 7px;
-khtml-border-bottom-right-radius: 7px;
-webkit-border-bottom-right-radius: 7px;
border-bottom-right-radius: 7px;
}
#mainmenu ul li ul {
-moz-box-shadow: 4px 4px 2px #888;
-webkit-box-shadow: 4px 4px 2px #888;
box-shadow: 4px 4px 2px #888;
-khtml-box-shadow: 4px 4px 2px #888;
border-color: #F1F1F1;
-moz-outline-color: #F1F1F1;
}
#mainmenu a {
text-decoration:none;
display:block;
}
#mainmenu a {
margin:0;
float:left;
background: none;
padding: 9px 15px;
text-transform:uppercase;
color: #CCCCCC;
font-size: 11px;
}
#mainmenu li a:hover, #mainmenu li a:hover ul li,
#mainmenu li a:focus, #mainmenu li a:focus ul li, #mainmenu li:hover > a,
#mainmenu a.mainMenuParentBtnFocused{
/*background-color: #1e1e1e;*/
background: url(http://1.bp.blogspot.com/_lxBSX0YJV58/SwQlF623qJI/AAAAAAAAAlc/h7AiX8sx00g/s1600/mainnav-hover.gif) repeat-x left top #666666;
color:#fff;
}
#mainmenu , #mainmenu > ul {
padding: 0;
margin: 0;
list-style: none;
line-height: 1em;
}
#mainmenu ul {
/*border around submenu goes here*/
background: none;
left:0;
}
#mainmenu > li {
/*great place to use a background image as a divider*/
background-image:url(http://3.bp.blogspot.com/_lxBSX0YJV58/SwQlNUijg3I/AAAAAAAAAlk/6U-xiY6v8Jo/s1600/mainnav-sep.gif);
background-repeat:no-repeat;
background-position: 100% 0px;
cursor: pointer;
float: left;
margin: 0 0px 0 0px;
padding: 0 2px 0 1px;
height: 30px;
display: inline;
}
#mainmenu li ul {
display: none;
margin:0;
padding 0;
position:absolute;
left:0;
}
#mainmenu li:hover > ul {
display: block;
float:none;
position:absolute;
top:159px;
left:235px;
}
#mainmenu li:hover ul li {
display: block;
}
#mainmenu li ul li {
list-style-type: none;
margin:0;
display: block;
padding:0;
}
Now the only problem left is that I am getting whitespace in the second order li having address [#mainmenu ul li ul li]
You can see by going to this link www.technodoze.com
Please suggest some solution.
Thanks
Change :
#mainmenu li {
/*great place to use a background image as a divider*/
background-image:url(http://3.bp.blogspot.com/_lxBSX0YJV58/SwQlNUijg3I/AAAAAAAAAlk/6U-xiY6v8Jo/s1600/mainnav-sep.gif);
background-repeat:no-repeat;
background-position: 100% 0px;
cursor: pointer;
float: left;
margin: 0 0px 0 0px;
padding: 0 2px 0 1px;
height: 30px;
display: inline;
}
TO:
#mainmenu > li {
/*great place to use a background image as a divider*/
background-image:url(http://3.bp.blogspot.com/_lxBSX0YJV58/SwQlNUijg3I/AAAAAAAAAlk/6U-xiY6v8Jo/s1600/mainnav-sep.gif);
background-repeat:no-repeat;
background-position: 100% 0px;
cursor: pointer;
float: left;
margin: 0 0px 0 0px;
padding: 0 2px 0 1px;
height: 30px;
display: inline;
}
And add some new things in :
#mainmenu li:hover > ul {
display: block;
float:none;
position:absolute;
top:30px; /*new line*/
left:140px; /*new line*/
}
DEMO
Try this Drop down menu http://www.lwis.net/free-css-drop-down-menu/
Related
I am trying to add the dropdown menu for my menu, but it doesnt seem to show when I hover over it. Thanks for the upcoming support.
This is my code in a jfiddle: http://jsfiddle.net/nbh2e15y/2/
the css:
#nav {
background: none repeat scroll 0 0 #585858;
border-radius: 3px;
height: 50px;
margin-bottom: 10px;
padding: 0;
}
#searchbar input[type=text] {
background: none repeat scroll 0 0 #fff;
border: 1px solid black;
height: 25px;
padding: 1px 1px 1px 5px;
width: 230px;
}
#searchbar input[type="submit"] {
background: none repeat scroll 0 0 #1abc9c;
border: 1px solid #12ab8d;
color: white;
cursor: pointer;
font-size: 14px;
padding: 4px 15px;
}
#searchbar { margin-right:10px; }
#nav ul {
list-style: none outside none;
margin: 0;
padding: 0 0 0 10px;
}
#nav ul li {
line-height:50px;
float:left;
}
#nav ul li a {
line-height:50px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:400;
text-decoration:none;
color:#FFF;
background-color:none repeat scroll 0 0 #585858;
display:block;
padding:0 20px;
}
#nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
#nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
#nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
#nav ul ul li a:hover {
background: #4b545f;
}
#nav ul li a:hover {
background-color:#333;
}
#nav ul li a.active {
background-color:#333;
}
#nav ul li active {
background-color:red;
}
li.active {
float: right !important;
}
li.active_messages {
float: right;
}
and the html code:
<div id="nav">
<ul>
<li>Home</li>
<li>Categories
<ul>
<li>Photoshop</li>
<li>Illustrator</li>
<li>Web Design</li>
</ul>
</li>
<li>About us</li>
<li>Profile</li>
<li>My Listings</li>
<li>Get Verified!</li>
<li>Log out</li>
<li class="active">
<div id="searchbar">
<form action="search.php" method="get">
<input type="text" hidden="" value="product/search" name="route">
<input type="text" required="" placeholder="Search..." name="search">
<input type="submit" value="Search">
</form>
</div></li>
</ul>
</div>
If you add
#nav ul>li:hover>ul {
top:initial;
}
to your CSS, then when the li is moused over, the ul will be restored to its original view, so the dropdown will "appear".
When you do this, you'll notice some shifting. Your CSS is in need of some improvement for readability, but this shifting will be because something along the way is not taken out of the flow of the page, but that's another question.
Try this....
CSS code:
#nav {
background: none repeat scroll 0 0 #585858;
border-radius: 3px;
height: 50px;
margin-bottom: 10px;
padding: 0;
}
#searchbar input[type=text] {
background: none repeat scroll 0 0 #fff;
border: 1px solid black;
height: 25px;
padding: 1px 1px 1px 5px;
width: 230px;
}
#searchbar input[type="submit"] {
background: none repeat scroll 0 0 #1abc9c;
border: 1px solid #12ab8d;
color: white;
cursor: pointer;
font-size: 14px;
padding: 4px 15px;
}
#searchbar { margin-right:10px; }
#nav ul {
list-style: none outside none;
margin: 0;
padding: 0 0 0 10px;
}
#nav ul li {
line-height:50px;
float:left;
}
#nav ul li a {
line-height:50px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:400;
text-decoration:none;
color:#FFF;
background-color:none repeat scroll 0 0 #585858;
display:block;
padding:0 20px;
}
#nav ul ul {
background: #5f6975;
border-radius: 0px;
padding: 0;
display:none;
position: absolute;
}
#nav ul li:hover ul{
display:block;
position:absolute;
}
#nav ul ul li a {
color: #fff;
background: #5f6975;
}
#nav ul ul li a:hover {
background: #4b545f;
}
#nav ul li a:hover {
background-color:#333;
}
#nav ul li a.active {
background-color:#333;
}
#nav ul li active {
background-color:red;
}
li.active {
float: right !important;
}
li.active_messages {
float: right;
}
I am not exactly sure how to ask this question. I am new to responsive design and understand the flow down, but I don't want to use the flow down on my menu. It is broken into 3 sizes and the mobile size, I don't want sub-menus and need it at 100% width. How do I block the information from the previous id and class selectors.
/*------------menu */
nav {font-family: "BenchNine", "PT Sans Narrow", Arial, Helvetica, sans-serif;
text-transform: uppercase;
width:960px;
height: 43px;
margin: 0px auto 0px auto;
/*background:#0084FC;*/
border:0px solid #FFF;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
z-index:10;
}
/*nav ul {list-style: none;margin: 0;padding: 0 5px; } */
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {margin: 0;padding: 0 5px;list-style: none;position: relative;display: inline-table; z-index:1;}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li span { width:425px;}
nav ul li {
float: left; position: relative; padding: 0px; top:0px;border-top:0px solid #0082f8;
}
nav ul li:hover {
background: #025287;
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {font-size: 20px; color: #B3DBFF; display: block; padding: 54px 10px 6px 10px; margin-bottom: 0px; z-index: 10; position: relative; font-weight:bold; text-transform:uppercase;}
nav ul ul {
background: #0082f8; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
border-top: 0px solid #0082f8;
border-bottom: 0px solid #0082f8;
position: relative;
}
nav ul ul li a {
padding: 10px 40px;
color: #fff;
}
nav ul ul li a:hover {
background: #025287; color:#fff;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
This is the css for the menu in the responsive css file.
#media only screen and (max-width: 767px) {
nav {width:100%;background:none;height:auto;margin: 0px auto 15px auto;}
nav ul li {float: none;background:#000;text-align:center;padding-bottom:0px;margin-top:5px;}
nav ul li span {clear:}
nav ul li:hover {background: url('../images/menu-bg-act_mob2.png') repeat-x;}
nav ul li a{margin-bottom : 0px;}
nav ul li a{margin-bottom : 0px;}
Your question is not very clear, but it sounds like you need to override some existing style declarations.
You should be able to do this by making more specific declarations.
E.g.:
html nav { margin: 20px } will override nav { margin: 10px }.
Check out Andy Clarke's CSS Specificity Wars for more on the subject.
I'd like to have my navigation menu on my site span the width evenly. Here is an example of what I'm trying to accomplish, notice how the links are spaced evenly and stretch the entire width of the navigation bar.
I'm not exactly sure what code to use to accomplish this. I tried margin:auto but that didn't seem to work.
Here is the CSS that I have:
.mainNav{
height:30px;
padding-bottom:0px;
margin:0 !important;
position: relative;
border-top: 1px #d5d5d5 solid;
border-bottom: 1px #d5d5d5 solid;
}
.mainNav a {
font-size:16px;
-webkit-transition:none;
-moz-transition:none;
-o-transition:none;
transition:none;
position: relative;
}
.mainNav ul {
list-style-type: none;
list-style-image: none;
}
.mainNav li {
float:left;
margin: 0 auto;
position: relative;
list-style-type: none;
list-style-image: none;
}
.mainNav li a {
text-transform:uppercase;
padding:0 0 0 36px;
display:block;
padding-bottom:13px;
}
.mainNav li ul {
display: none;
margin:0 !important;
}
.mainNav li:hover > ul, .mainNav li.hover > ul {
display: block;
position: absolute;
top: 35px;
left: 0;
z-index: 1000;
width: 180px;
}
.mainNav li > ul {
height:auto;
width: auto;
background: #fff;
border:1px solid #efefef;
padding:0;
}
.mainNav li > ul li {
width:180px;
padding: 0;
position: relative;
height:35px;
border-bottom:1px solid #efefef;
}
.mainNav li > ul li:last-child{
border-bottom:none;
}
.mainNav li > ul li a {
text-transform:none;
height:22px;
padding: 5px 10px 0px 15px;
text-align: left;
font-size: 13px;
line-height:25px;
color:#333;
}
.mainNav li > ul li a:hover {
border:none;
}
.mainNav li ul li:hover > ul, .mainNav li ul li.hover > ul {
display: block;
position: absolute;
top:0;
left: 180px;
z-index: 0;
width: 180px;
}
If you turn off javascript and reload that wordpress theme that you want to replicate, you'll notice that the styling breaks.
That is because the margin's set on the list items to space them out evenly, is calculated using javascript and then applied.
You could write a javascript solution to style your list items or a quick fix would be to hard code the widths of the list items, e.g:
Change your current block of CSS:
.mainNav li a {
text-transform:uppercase;
padding:0 0 0 36px;
display:block;
padding-bottom:13px;
}
To the following:
.mainNav li a {
text-transform:uppercase;
text-align: center; /*added*/
width: 117px; /*added*/
padding:0; /*edited*/
display:block;
/*padding-bottom:13px;*/ /*removed*/
}
It looks fixed to me. Screenshot of your site in firefox, with applied styles seen in firebug:
I'm pretty sure this is an easy fix and I am simply too in experienced to figure it out. I'm building a site, using WP, but the home page is simply a background image with a vertical nav menu. I don't now how to make the menu stay in the same place for all browsers and windows. It looked good on my screen, then I found the nav pane was in a completely different place on my husband's monitor. I believe it has to do with position and display and margins, but I am getting more lost as I read up on these and I just want someone to tell me the code.
The page is at www.sydneyjanebaily.com
So far the code for the whole page is as follows:
body {
background-image:url(http://www.sydneyjanebaily.com/wp-content/themes/twentyeleven/images/open-book.png);
background-repeat:no-repeat; background-attachment:fixed;
background-position:center;
}
menu { display: block; }
access div { display: block; margin-left:890px; margin-right:auto; margin-top:200px; width: 235px; }
/************* Navigation **********/
nav#access ul, nav#access li.pagenav { display: block; list-style:
none; }
nav#access ul li a span, nav#access ul li.page_item a span { position:
absolute; right: 100%; top: 2px; width: 15px; height: 100%;
background-image: url(../images/nav-shadow.png); background-position:
right top; background-repeat: repeat-y; }
nav#access ul li a, nav#access ul li a:visited, nav#access ul
li.page_item a, nav#access ul li.page_item a:visited { display:
block; padding: 8px 10px 8px 30px; color: white; font: 150%
"EBGaramondSC", "Palatino", "Palatino Linotype","Book Antiqua",
Georgia, serif; text-decoration: none; /*background-color:
aba000; */ margin: 5px 0 7px 0; position: relative; width: 235px; /font-variant: small-caps;/ }
nav#access ul li a:hover, nav#access ul li a:focus, nav#access ul
li.page_item a:hover, nav#access ul li.page_item a:focus{ color:
FF0000; }
nav#access li a:hover span { background-color: #666; } nav#access ul
li a em { font-size: 87.50%; } nav#access ul li:nth-child(5n-4) a,
nav#access ul li:nth-child(5n-4) a span { ; } nav#access ul
li:nth-child(5n-3) a, nav#access ul li:nth-child(5n-3) a span { ; }
nav#access ul li:nth-child(5n-2) a, nav#access ul li:nth-child(5n-2) a
span { ; } nav#access ul li:nth-child(5n-1) a, nav#access ul
li:nth-child(5n-1) a span { ; } nav#access ul li:nth-child(5n-5) a,
nav#access ul li:nth-child(5n-5) a span {; } -->
nav#access ul li ul li span { position: absolute; right: 100%; top: 0;
width: 20px; height: 100%; left: 2px; margin-right: 15px; overflow:
visible; } nav#access ul li ul li:nth-child(odd) a { background:
none; color: #EEE8AA; font-size: smaller; margin: 3px 20px 5px 20px;
min-height: 20px; width: 210px; padding: 2px 0 2px 20px; } nav#access
ul li ul li:nth-child(odd) a:hover, nav#access ul li ul
li:nth-child(odd) a:focus { background: none; color: #ADFF2F;
font-size: smaller; left: 15px; padding: 2px 30px 2px 25px; }
nav#access ul li ul li:nth-child(odd) a span { background:
url(../images/sub-menu2.png) -5px 0px no-repeat; width: 30px; }
nav#access ul li ul li:nth-child(even) a { background: none; color:
3B3C1D; font-size: smaller; margin: 3px 20px 5px 20px; min-height: 20px; width: 210px; padding: 2px 0 2px 20px; } nav#access ul li ul
li:nth-child(even) a:hover, nav#access ul li ul li:nth-child(even)
a:focus { background: none; color: #FF4500; font-size: smaller; left:
15px; padding: 2px 30px 2px 25px; } nav#access ul li ul
li:nth-child(even) a span { background: url(../images/sub-menu2.png)
-5px 0px no-repeat; width: 30px; }
nav#access ul li ul li ul li:nth-child(odd) a { background: none;
color: #FFD700; font-size: smaller; margin: 3px 20px 5px 30px;
min-height: 20px; width: 200px; padding: 2px 0 2px 20px; } nav#access
ul li ul li ul li:nth-child(odd) a:hover, nav#access ul li ul li ul
li:nth-child(odd) a:focus { background: none; color: #EEE8AA;
font-size: smaller; left: 25px; padding: 2px 30px 2px 25px; }
nav#access ul li ul li ul li:nth-child(odd) a span { background:
url(../images/sub-menu.png) -10px 0px no-repeat; width: 30px; }
nav#access ul li ul li ul li:nth-child(even) a { background: none;
color: #3B3C1D; font-size: smaller; margin: 3px 20px 5px 30px;
min-height: 20px; width: 200px; padding: 2px 0 2px 20px; } nav#access
ul li ul li ul li:nth-child(even) a:hover, nav#access ul li ul li ul
li:nth-child(even) a:focus { background: none; color: #7FFFD4;
font-size: smaller; left: 25px; padding: 2px 30px 2px 25px; }
nav#access ul li ul li ul li:nth-child(even) a span { background:
url(../images/sub-menu.png) -10px 0px no-repeat; width: 30px; }
nav#access ul li a:hover:active, nav#access ul li ul li
a:hover:active, nav#access ul li ul li ul li a:hover:active,
nav#access ul li a:focus:active, nav#access ul li ul li
a:focus:active, nav#access ul li ul li ul li a:focus:active { color:
00CCFF; left: 1px; top: 1px;}
/* Singular navigation */
nav-single { float: right; position: relative; top: -0.3em; text-align: right; z-index: 1; }
nav-single .nav-previous,
nav-single .nav-next { float: none; width: auto; }
nav-single .nav-next { padding-left: .5em; }
img.book {
/* Set rules to fill background */
min-height: 100%;
min-width: 1000px;
/* Set up proportionate scaling */
height: auto;
/* Set up positioning */
top: 0;
left: 0;
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
}
</style>
<!-- <img class="book"src="<?php bloginfo('template_directory');?>/images/open-book.png" alt="xxx"
width="880" height="xxx" /> -->
<?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>
<!-- <div class="skip-link"><a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to primary content',
'twentyeleven' ); ?>">
"> -->
'primary' ) ); ?>
I am puzzled that when I inspect an element using Firefox developer tool, it still says inline element for things I've marked as block.
Basically, I can put the nav pane where I want using px but it only looks right on my screen. I think I need percentages, but that is beyond me. Please help.
Thanks,
Sydney
Try replacing this:
#access div {
display: block;
margin-left:890px;
margin-right:auto;
margin-top:200px;
width: 235px;
}
with this:
#access div {
position: absolute;
top: 20%;
left: 50%;
}
It works well on my monitor no matter how I squash or stretch the screen, and it should work for you as well. Good luck!
I am having a problem with my website, www.diaplasisgym.com. The problem is the sub menu. It is working fine in Firefox, Chrome and Safari, but if you open it with IE the slide bar is hiding the submenu. How i can fix this?
Here the code of the menu and submenu:
#mainMenu {
position:absolute;
bottom:-80px;
left:0px;
background:url(images/menu.png) no-repeat;
width: 961px;
height:98px;
}
#mainMenu ul li {
float:right;
height:70px;
}
#mainMenu ul li a {
font-weight:bold;
display:block;
color:#ffffff;
padding:25px 20px 0;
font-size:15px;
}
#mainMenu ul li a span {
font-size:10px;
color:#999;
}
#mainMenu ul li a:hover {
text-decoration:none;
color:#2fc8ff;
}
#mainMenu.ddsmoothmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}
/*Top level list items*/
#mainMenu.ddsmoothmenu ul li {
position: relative;
display: inline;
float: left;
}
/*Top level menu link items style*/
* html #mainMenu.ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to
behave correctly*/ display:
inline-block;
}
/*1st sub level menu*/
#mainMenu.ddsmoothmenu ul li ul{
position: absolute; l
eft: 0;
display: none; /*collapse all sub menus to begin with*/ visibility: hidden;
width:auto;
padding-bottom:7px;
background:
url(images/secondarydropdown.png)
repeat-y; box-shadow: 3px 6px 7px 1px
rgba(0, 0, 0, 0.5);
-moz-box-shadow:3px 6px 7px 1px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 3px 6px 7px 1px rgba(0, 0, 0, 0.5);
border-radius:8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-top-left-radius: 0px;
-moz-border-radius-topleft: 0px;
-webkit-border-top-left-radius: 0px;
border-top-right-radius: 0px;
-moz-border-radius-topright: 0px;
-webkit-border-top-right-radius: 0px;
border: 1px solid #232323;
border-top:none; /*border-bottom:1px solid #222;*/
}
/*Sub level menu list items (undo
style from Top level List Items)*/
#mainMenu.ddsmoothmenu ul li ul li{
float: none;
display: list-item;
padding:0;
height:3%;
}
/* Sub level menu links style */
#mainMenu.ddsmoothmenu ul li ul li a, #mainMenu.ddsmoothmenu ul li ul li a:hover{
text-align:left;
/*background:#000;*/
line-height:20%;
font-size:13px;
padding: 22px 5px 15px 28px;
color: #ffffff;
font-family:
Century Gothic, Arial, sans-serif;
text-shadow: 1px 1px 1px rgba(0, 0, 0,0.3);
background: url(images/secondary-dropdown-bullet.png)
no-repeat 15px 20px; z-index:9999;
}
#mainMenu.ddsmoothmenu ul li ul li a:hover {
color:#1FA2E1;
}
#mainMenu.ddsmoothmenu ul li ul li a.last, #mainMenu.ddsmoothmenu ul li
ul li a.last:hover {
border:none;
}
/* Holly Hack for IE \*/
* html #mainMenu.ddsmoothmenu{
height: 1%;
} /*Holly Hack for IE7 and below*/
Here's the answer for IE 7
paste this in your stylesheet
/* IE 7 Fix */
#header{z-index:1001 !important;}
#content{z-index:100 !important;}