I'm having some issues with a drop-down menu in IE7.
It works fine in all other browsers but appears offset in IE7 for some reason. Any ideas?
Please see the menu code below and the computed CSS from Firebug as well as images demonstrating the issues.
Correct Menu
Offset Menu
HTML
<ul id="coolMenu">
<li class="">
<a class="donate" href="#">
User Options
<span class="downarrowclass"></span>
</a>
<ul id="style_me" style="display: none;">
<li>
Candidate Panel
</li>
<li>
Access details
</li>
<li>
Personal details
</li>
<li>
History
</li>
<li>
Withdraw application
</li>
<li>
Jobs by e-mail
</li>
<li>
Log off
</li>
</ul>
</li>
</ul>
CSS
#coolMenu,
#coolMenu ul {
list-style: none;
}
#coolMenu {
float: right;
}
#coolMenu > li {
/*float: left;*/
}
#coolMenu li a {
display: block;
text-decoration: none;
color: #ffffff;
width: 100px;
text-align: center;
}
#coolMenu ul {
position: absolute;
display: none;
z-index: 999;
}
#coolMenu li:hover ul {
display: block;
}
.dropdown a li{
color: #124162 !important;
}
#coolMenu li #style_me li a{
color: #124162 !important;
width: 140px !important;
}
#coolMenu li #style_me li a:hover {
color: #ffffff !important;
}
If it helps, there appears to be some form of offset present in the IE developers tab:
Also, here is the computed code in iedeveloper for ul coolmenu.
This can be fixed by targeting IE7 specifically using the following code:
Html.ie7 #coolMenu ul {
top: 59px;
left: 71px;
}
Related
While I know there are several discussions regarding this issue, none of the solutions fixed my problem. No matter what I do, the CSS submenu I'm trying to use disappears after you stop hovering over the parent li. I haven't the slightest idea what could be causing this, and I've really been staring at this forever trying to find a solution and just can't. I tried adding in a top: px; to the submenu in the CSS, which allowed me to select the submenu options, however it also moved the menu so that it would appear covering and centered over the parent li, which is also no good to me because I need it to appear directly below. Could the header be clipping it and if so what would I need to add to change that? All assistance is so greatly appreciated!
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-size: 1.2em;
line-height: 40px;
text-align: left;
display: none;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
padding-left: 15px;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #aaa;
color: #444;
cursor: default;
}
/* Sub Menus */
.nav li li {
font-size: .8em;
}
#media screen and (min-width: 650px) {
.nav li {
width: 130px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
display: inline-block;
margin-right: -4px;
}
.nav a {
border-bottom: none;
}
.nav > ul > li {
text-align: center;
}
.nav > ul > li > a {
padding-left: 0;
}
/* Sub Menus */
.nav li ul {
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul {
display: block;
}
.nav li ul li {
display: block;
}
}
#header {
float: left;
background-color: #ffffff;
cursor: default;
padding: 1.75em 2em 0em 0em;
position: relative;
}
<header>
<img id="logo" src="images/logo.jpg" alt="logo">
<div class="nav">
<ul>
<li class="home">Home
</li>
<li class="tutorials">Tutorials
<ul>
<li>Tutorial #1##
</li>
<li>Tutorial #2
</li>
<li>Tutorial #3
</li>
</ul>
</li>
<li class="about"><a class="active" href="#">About</a>
</li>
<li class="news">Newsletter
<ul>
<li>News #1
</li>
<li>News #2###
</li>
<li>News #3
</li>
</ul>
</li>
<li class="contact">Contact
</li>
</ul>
</div>
</header>
I did figure this out eventually but thought I should come back and update with my solution, in case it is helpful to anyone who is having a similar issue. It was actually really simple.
I had to add a z-index here:
.nav li:hover ul {
display: block;
z-index: 99999;
}
This was recommended to other users, and I did try it initially but did not place it in li:hover thus it didn't work. I guess because the high z-index forces it to the top, it stopped whatever was causing the clipping by placing the submenu above it. I must have misread something somewhere along the line and placed the z-index in the wrong section. The real solution here is probably to read your code carefully!
After a long break from HTML/CSS, I recently created a menu with dropdown links using a method I have used once before, and was surprised to find that this application of them is not working.
I used this
ul li:hover ul{ display:block;}
to "turn on" my menus when hovering, but they simply never appear. I have tried adding div tags around various blocks of code to no avail. What tricks am I missing?
jsfiddle here: https://jsfiddle.net/qccs4mLL/
Your html isn't align with your css selector.
ul.menu li:hover > ul {
display: block;
background: green;
}
There isn't any ul element that is direct child of li element. You can change your html so ul is direct child of li element.
body {
margin: 0px;
}
a {
text-decoration: none;
width: 8em;
/*width of each link*/
}
/*format list*/
ul {
text-align: center;
margin: 0;
padding: 0;
list-style: none;
}
ul.menu {
height: 2.5em;
width: 100%;
padding: 0;
margin: 0;
border: 0;
background-color: #454545;
}
ul.menu li {
float: left;
position: relative;
}
ul.menu li a {
cursor: pointer;
display: block;
color: white;
line-height: 2.5em;
padding: 0 10px;
}
ul.menu ul {
background: #555;
display: none;
position: absolute;
left: 0;
top: 100%;
}
ul.menu li:hover {
background: red;
}
ul.menu li:hover > ul {
display: block;
background: green;
}
<body>
<!--Heading-->
<!--Should change when scrolled down/on mobile-->
<h1 class="heading">Title</h1>
<!--Create Menus-->
<nav>
<ul class="menu">
<li>link1
<ul>
<li>sublink1
</li>
</ul>
</li>
<!--menu options with sub options have dropdown on computer, may unfold with tap on mobile or just be a click since they all go to one page maybe? maybe go with unfolding.-->
<li>link2
<ul>
<li>sublink1
</li>
<li>sublink2
</li>
<li>sublink3
</li>
<li>sublink4
</li>
</ul>
</li>
<li>link3
</li>
<li>link4
</li>
</ul>
</nav>
</body>
I'm using the CSS lines below for a menu on a webpage.
The problem is that I don't know how to make that code apply only to the menu, and not to other ul -unordered lists- on the page!
ul {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
}
ul li {
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #AAF7BB;
font-size: 110%;
}
ul li:hover {
background: #ffffff;
color: #000000;
}
ul li ul {
padding: 0;
position: absolute;
top: 48px;
left: 0;
width: 150px;
opacity: 0;
visibility: hidden;
}
ul li ul li {
background: #ffffff;
display: block;
color: #00ff00;
}
ul li ul li:hover { background: #ffffff; }
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
Please help.
Try marking your ul as a class and refer to that instead of just ul.
<ul class="menu">
and change all instances of ul in the css to .menu.
Refering to just "ul" will apply the change to all ul elements.
As mentioned you can do this using classes on your html. I would try and Google this a little more. There are tons of example for menus out there.
In the top three is this:
http://www.noupe.com/essentials/freebies-tools-templates/100-great-css-menu-tutorials.html
Something simple:
<ul class="menu">
<li class="menu-option">
Home
</li>
<li class="menu-option active">
About
</li>
<li class="menu-option">
Contact
</li>
<ul class="sub-menu">
<a>Something to click</a>
<li class="menu-option">
Contact
</li>
<li class="menu-option">
Contact
</li>
</ul>
</ul>
Your css would need to be updated similar to below
ul.menu:{
/*Your style for the menu*/
}
ul.menu li.menu-option:{
/*Your style for the menu's options*/
}
ul.menu ul.sub-menu:{
/*Your style for the menu's sub-menu's*/
}
Use the class or id attributes alongside your HTML elements. For example:
HTML
<ul class="class1">
...
</ul>
<ul class="class1">
...
</ul>
<ul id="class2">
...
</ul>
CSS
.class1{
implement css styling here
}
#class2{
implement css styling here
}
Here, the top 2 ul elements will be styled by the .class1 CSS styling, the final ul with the attribute #class2 will be styled by the corresponding CSS.
Note that . denotes classes in CSS and # denotes IDs
IDs are unique, classes are not unique. More information
I'm having trouble showing a drop down menu in the correct way. This is what I get to see:
This is my HTML code:
<nav class="menuBox">
<ul>
<li>HOME</li>
<li>KLASSEMENTEN</li>
<li>KALENDER</li>
<li>NIEUWS</li>
<li>MEDIA</li>
<li>LINKS</li>
<li>
INLOGGEN
<ul>
<li class="first">
ADMIN
</li>
<li>
EDIT ACCOUNT
</li>
<li class="last">
LOG OUT
</li>
</ul>
</li>
</ul>
</nav>
My CSS code:
/* ### menu Box ### */
.menuBox { position: absolute; top: 74px; right: 2px; }
.menuBox ul { list-style: none; }
.menuBox li { float: left; margin-left: 17px; font-size: 14px; text-transform: uppercase; }
.menuBox li a { color: #3f3f3f; text-decoration: none; display: block; padding-bottom: 14px; }
.menuBox li a:hover { background: url(../images/menu_hover.png) repeat-x 0 bottom; }
.menuBox ul li ul{ display: none; }
.menuBox ul li:hover ul{ display: block; }
I would like to have something like this:
But how can I do this?
add this to your CSS:
.menuBox ul li ul li {
display: block;
float:none;
}
Explanation: you're floating your li elements, but you need to clear the floats for the second level of li elements (those in the sub menus), thus you need to add this declaration.
See fiddle here
I have a horizontal unordered list which I'm using as a main menu, with a nested unorderd list which I'm using as a dropdown sub menu.
I'm using a CSS 3 Gradient on the Main Menu but it is causing the sub menu to be confined to the list in IE. What I mean is, if I increase the height of the list items I can see part of the sub menu but this obviously ins't an option.
I have heard about someone encountering this problem before and was wondering if anyone could help.
This is the HTML of the menu.
<div id="menu">
<div class="mainmenu">
<ul>
<li>
<a href='path'>Home</a>
</li>
<li>
<a href='path'>Country Garden</a>
</li>
<li>
<a href='path'>Inner City Garden</a>
</li>
<li>
<a href='path'>Winter Garden</a>
<ul>
<li>
<a href='path'>Featured Products</a>
</li>
<li>
<a href='path'>Best Sellers</a>
</li>
<li>
<a href='path'>Special Offers</a>
</li>
</ul>
</li>
<li>
<a href='path'>Water Garden</a>
</li>
<li>
<a href='path'>Window Box</a>
</li>
</ul>
</div>
</div>
This is the CSS that controls it.
.mainmenu{
clear: both;
height: 42px;
margin: 0;
width: 980px;
}
.mainmenu ul{
list-style: none;
margin: 0;
padding: 0;
text-align:center;
}
.mainmenu li{
display: inline-block;
margin: 0;
padding: 0;
z-index:1000;
height: 42px;
position: relative;
}
.mainmenu li a{
display: inline-block;
height: 33px;
padding: 9px 25px 0;
}
.mainmenu ul ul{
float: left;
left: 0;
padding: 5px 0 10px 0;
position: absolute;
text-align: left;
top: 42px;
width: 200px;
z-index: 10000;
}
.mainmenu li li{
clear: both;
text-align: left;
height: 30px;
}
.mainmenu ul li ul{
display:none;
}
.mainmenu li ul li a {
height: auto;
padding: 2px 25px;
width: 150px;
}
.mainmenu li ul li a, .mainmenu li.over li a {
text-decoration: none !important;
}
.mainmenu li:hover ul, .mainmenu li.over ul {
display: block;
}
This is style that causes the problem in IE8.
.mainmenu li{
background-color: #25abec;
background-image:-moz-linear-gradient(top,#25abec,#1984b8);
background-image:-webkit-gradient(linear,left top,left bottom,from(#25abec),to(#1984b8));
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#25abec,endColorStr=#1984b8);
}
It's the final line that causes the problem. If I take it out it works but looks wrong. The problem is in IE and Opera but it works in Firefox, Google Chrome and Safari.
The IE filter can indeed cause various issues at times. My recommendation is to not put the filter on at all, letting IE8 just have the plain default background-color, and then perhaps using SVG to get the background for IE9.