I have a CSS drop down menu which looks fine in firefox, chrome and most versions of IE.
But in IE8 the drop down menu disappears the second you move your mouse down onto it from the top menu bar.
I've been searching for an answer to this for a while now I found this answer here on stack
https://stackoverflow.com/a/10132588/2393553
And have amended my code accordingly. But I still cant get it to work :/
Here is my CSS
#navigation {
margin-top:-15px;
font-size: 14pt;
z-index:9000;
}
#navigation ul {
float: right;
list-style-type: none;
z-index:9000;
padding:0px;
margin:0px;
}
#navigation li {
float: left;
color: #505050;
position:relative;
z-index:9000;
right:0px;
display:block;
}
#navigation li ul
{
display: none;
z-index: 9000;
position:absolute;
top:100%;
left:0;
}
#navigation li ul.end
{
display: none;
z-index: 9000;
position:relative;
top:auto;
right:0;
}
#navigation a
{
display: block;
text-decoration: none;
color: #00529f;
padding: 5px 7px 5px 7px;
margin-left: 1px;
white-space: nowrap;
z-index: 9000;
}
#navigation li a:hover
{
background: #00529f;
color:#fff;
text-decoration: none;
z-index: 9000;
margin:0px;
display:block;
}
#navigation li:hover ul
{
display: block;
z-index:9000;
left:auto;
margin-left:0px;
}
#navigation li:hover li
{
float: none;
font-size: 18px;
text-align: left;
font-family: verdana;
z-index:9000;
border-top:1px solid #fff;
margin-left:0px;
}
#navigation li:hover a
{
background: #00529f;
color:#fff;
z-index:9000;
margin-left:0px;
}
#navigation li:hover li a:hover
{
background: #7ca7d8;
z-index:9000;
margin-left:0px;
}
and here is my HTML
<div id = "navigation">
<ul>
<li><?=get_content(1)?></li>
<li><?=get_content(2)?>
<ul>
<li><?=get_content(7)?></li>
<li><?=get_content(199)?></li>
<li><?=get_content(201)?></li>
<li><?=get_content(202)?></li>
</ul>
</li>
<li><?=get_content(1322)?>
<ul>
<li><?=get_content(3208)?></li>
</ul>
</li>
<li><?=get_content(3950)?></li>
<li><?=get_content(1825)?>
<ul>
<li><?=get_content(3972)?></li>
<li><?=get_content(1816)?></li>
<li><?=get_content(505)?></li>
</ul>
</li>
<li><?=get_content(4)?>
<ul class="end">
<li><?=get_content(4050)?></li>
<li><?=get_content(4005)?></li>
</ul>
</li>
</ul>
</div>
Could someone help please?
A quick edit to inform you that When testing this using IEtester it doesnt work in IE8. It also doesnt work on a co-worker machine who has IE8 installed. However when testing it with developer tools in IE10 setting the version back to IE8 it does work. I still have no solution :/
I used your code and remove the href code. It is working fine for me in IE8(i used ie developer tool to test this).
Here is the HTML i tested.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#navigation {
margin-top:-15px;
font-size: 14pt;
z-index:9000;
}
#navigation ul {
float: right;
list-style-type: none;
z-index:9000;
padding:0px;
margin:0px;
}
#navigation li {
float: left;
color: #505050;
position:relative;
z-index:9000;
right:0px;
display:block;
}
#navigation li ul
{
display: none;
z-index: 9000;
position:absolute;
top:100%;
left:0;
}
#navigation li ul.end
{
display: none;
z-index: 9000;
position:relative;
top:auto;
right:0;
}
#navigation a
{
display: block;
text-decoration: none;
color: #00529f;
padding: 5px 7px 5px 7px;
margin-left: 1px;
white-space: nowrap;
z-index: 9000;
}
#navigation li a:hover
{
background: #00529f;
color:#fff;
text-decoration: none;
z-index: 9000;
margin:0px;
display:block;
}
#navigation li:hover ul
{
display: block;
z-index:9000;
left:auto;
margin-left:0px;
}
#navigation li:hover li
{
float: none;
font-size: 18px;
text-align: left;
font-family: verdana;
z-index:9000;
border-top:1px solid #fff;
margin-left:0px;
}
#navigation li:hover a
{
background: #00529f;
color:#fff;
z-index:9000;
margin-left:0px;
}
#navigation li:hover li a:hover
{
background: #7ca7d8;
z-index:9000;
margin-left:0px;
}
</style>
</head>
<body>
<div id = "navigation">
<ul>
<li>sdfs</li>
<li>sdfs
<ul>
<li>sdfs</li>
<li>ddfsdfs</li>
<li>sdfsfsfsd</li>
<li>hdfgfd</li>
</ul>
</li>
<li>fhfgh
<ul>
<li>hkhfjf</li>
</ul>
</li>
<li>lghjn</li>
<li>tyjffgh
<ul>
<li>gfdhhgd</li>
<li>lhghjgjg</li>
<li>ccvcxv</li>
</ul>
</li>
<li>gfdfd
<ul class="end">
<li>fdfdfd</li>
<li>dgdfgdfgfd</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Related
I am new to HTML/CSS so please don't hurt me :)
How can I center my navigation? I've researched as much as I can...
CSS:
#navigation ul {
font-family:Arial;
list-style-type:none;
margin:0;
padding:0;
width:auto;
height:auto;
text-align:center;
}
#navigation ul li {
display:inline-block;
margin-right:-2px;
position:relative;
}
#navigation ul li a {
display:inline-block;
padding:5px 10px;
background:#ccc;
color:#000;
text-decoration: none;
}
#navigation ul li a:hover {background: #666;}
#navigation ul ul {
position:absolute;
left:0;
width:200px;
transition:all .5s;
max-height: 0;
overflow: hidden;
}
#navigation ul.submenu li {
display:block;
}
#navigation ul.submenu li a {
display:block;
background:#fff;
color: #000;
}
#navigation ul.submenu li a:hover {background: #333;}
#navigation ul li:hover ul {
max-height: 10000px;
}
#navigation li {
font-family:Arial;
font-size:11px;
display:inline;
float:left;
background-color:#FFF;
}
#navigation a {
display:block;
width:60px;
background-color:#FFF;
}
#navigation.center {
display:block;
margin-left:auto;
margin-right:auto;
}
#navigation {
disply:inline-block;
height:50px;
}
HTML:
<div id="navigation">
<ul>
<li>Aperture Science
<ul class="submenu">
<li>GLaDOS</li>
<li>Testing Chambers</li>
<li>The Player (Chell)</li>
</ul>
</li>
</ul>
<ul>
<li>Black Mesa
<ul class="submenu">
<li>The Combine</li>
<li>The Resistance</li>
<li>The Player (Gordon Freeman)</li>
</ul>
</li>
</ul>
</div>
Any help would be great! Thanks!
(Yes, my starter site is on Half Life and Portal)
You can try using below html code and css
HTML:
<div id="navMenu">
<ul>
<li>
Black Mesa
<ul>
<li>GLaDOS</li>
<li>Testing Chambers</li>
<li>The Player (Chell)</li>
</ul>
</li>
<li>
Black Mesa
<ul>
<li>The Combine</li>
<li>The Resistance</li>
<li>The Player (Gordon Freeman)</li>
</ul>
</li>
</ul>
</div>
CSS
#navMenu {
margin: 0;
padding: 0;
text-align: center;
}
#navMenu ul {
margin: 0;
padding: 0;
line-height: 30px;
display: inline-block;
}
#navMenu li {
margin: 0;
padding: 0;
text-align: left;
float: left;
list-style: none;
position: relative;
background-color: #999;
border-radius: 5px;
}
#navMenu ul li a {
text-align: center;
text-decoration: none;
height: 30px;
width: 150px;
display: block;
color: #FFF;
border: 1px solid #FFF;
text-shadow: 1px 1px 1px #000;
}
#navMenu ul ul {
position: absolute;
visibility: hidden;
top: 32px;
}
#navMenu ul li:hover ul {
visibility: visible;
}
#navMenu li:hover {
background-color: #09F;
}
#navMenu ul li:hover ul li a:hover {
background-color: #CCC;
color: #000;
}
#navMenu a:hover {
color: #000;
}
fiddle : http://jsfiddle.net/Khumesh/adx2g1z0/
You need to adjust navigation Div by applying width and setting its margin property using css:
#navigation{
width:50%;
margin:0 auto;
}
Please refer to fiddle for demo
I am new to CSS and I need help with the navigation bar. I need to get the sub-topic right under the ABOUT US part but I cannot get it, it appears all the way to the right. Anything would be appreciated.
I can provide the HTML file if you need.
CSS:
container{
position: relative;
height: 70px;
width: 1100px;
}
.masthead{
background: #039be5;
width: 100%;
top: 0;
position: fixed;
color: white;
}
.logo{
position: relative;
float: left;
left: 90px;
font-family: Josefin Slab;
font-size: 21px;
top: 17px;
}
.logo h1 a {color: white; text-decoration: none; }
h1{
margin: 0;
}
a:link {color: white; text-decoration: none; }
a:visited {color: white; text-decoration: none; }
a:hover {color: white; color: black; }
a:active {color: white; text-decoration: none; }
#navcontent{
word-spacing: 4px;
}
li{
position: relative;
left: 155px;
list-style: none;
font-family: Raleway;
float: left;
margin-left: 21px;
padding-top: 15px;
font-size: 20px;
}
.navigation{
float: right;
}
.navigation ul>li ul{
height: 100%;
position: relative;
bottom: 100%;
}
.navigation ul>li ul>li{
bottom: 0px;
display: none;
}
.navigation>ul>li:hover ul>li{
display: block;
}
.navigation>ul>li a:hover {
text-decoration: none;
cursor:pointer;
}
HTML
<div class="masthead">
<div class="container">
<div class="logo">
<h1> MY SITE</h1>
</div>
<div class="navigation">
<ul>
<li>Courses
</li>
<li>Places
</li>
<li>More
<ul>
<li>Share
</li>
<li> Help
</li>
</ul>
</li>
<li id="navcontent">|| Sign In
</li>
<li>Sign Up
</li>
</ul>
</div>
</div>
</div>
Fiddle
To the point,,
CSS
ul{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}
ul a
{
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
}
ul li
{
position:relative;
float:left;
margin:0;
padding:0
}
ul li:hover
{
background:#f6f6f6
}
ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}
ul ul li
{
float:none;
width:200px
}
ul ul a
{
line-height:120%;
padding:10px 15px
}
ul ul ul
{
top:0;
left:100%
}
ul li:hover > ul
{
display:block
}
Live result here.
Hope this help
UPDATE
Ok, due to what Jon P ask I will describe this code.
Actually the main keys are :
ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff; /*remove, no effect*/
padding:0 /*remove, no effect*/
}
First, we make the child(<ul>) become hidden with display: none and give it properties position:absolute, top:100%, left:0; to let it under the MORE link
And then what we want? show it when we hover the MORE link. to do so, just do simple by making that child(<ul>) visible. Of course, we use this property :
ul li:hover > ul
{
display:block
}
I have a dropdown menu which works exactly as expected in Chrome.
The dropdown list is with position absolute, and the parent with position relative. However, it seems to render differently in Firefox. The dropped menu appears to be relative to the ul element rather than the li element
This dropdown is activated using javascript, adding a display:block on click
Any ideas why?
I did not use a table.
Fiddle
http://jsfiddle.net/eyJ8e/1/
HTML
<div id="menubar">
<div class="container">
<ul class="menu-container title" style="float:left;">
<li>NEW
</li>
<li class="dropdown"> <a class="click-dropdown" href="#">MEN</a><span class="caret"></span>
<ul class="dropdown-menu" style="display:block"> <li>Jeans</li>
<li>Pants</li>
<li>Shirts</li>
<li>Shorts</li>
<li>Tees</li>
</ul>
</li>
</ul>
</div>
</div>
CSS
body
{
width: 100%;
margin: 0px;
padding: 0px;
font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
font-size: 10pt;
/* background-color: #f0f0f0; */
}
.title{
/*font-family: Impact, Charcoal, sans-serif;*/
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
text-transform: uppercase;
font-family: SourceSans Pro Bold;
}
.container{
width:1024px;
margin:0 auto;
}
a, a:active, a:visited
{
color: #000000;
text-decoration: none;
outline: none;
}
a:hover
{
text-decoration: none;
}
#menubar {
width:100%;
min-width:1000px;
height:75px;
background-color:#000;
line-height: 75px;
color:white;
}
#menubar .brand{
display: block;
height:75px;
width: 120px;
margin-right:30px;
margin-top:3px;
float:left;
color:white!important;
}
#menubar .menu-container{
list-style:none;
margin:0px;
}
#menubar .menu-container li:first{
border-left: 1px solid grey;
}
#menubar .menu-container li{
position:relative;
display:inline;
padding:0px 15px;
font-size: 14px;
text-transform: uppercase;
border-right: 1px solid grey;
height:75px;
}
#menubar .menu-container > li.shopping-bag-wrapper:hover{
text-decoration: none;
}
#menubar .menu-container li.shopping-bag-wrapper{
border-right:none;
padding-right:0px;
}
#menubar .authentication-fb-form{
display:inline;
}
#menubar .menu-container li a{
color: white!important;
}
#menubar .menu-container li:last-child{
border:none;
}
#menubar .menu-container .dropdown ul.dropdown-menu > li:hover{
background-color:#555555;
}
#menubar .menu-container ul.dropdown-menu{
border:none;
position:absolute;
z-index:1000;
background-color:black;
display:none;
margin-top:-20px;
}
#menubar .menu-container .dropdown-menu li{
display:block;
min-width:150px;
max-width: 250px;
height:auto;
}
#menubar .menu-container .dropdown-menu a{
display:block;
line-height:25px;
padding: 5px 0px;
height:auto;
border: 2px solid white;
border-bottom:0px;
}
#menubar .menu-container .dropdown-menu a:last-child{
border: 2px solid white;
}
ul{
list-style: none;
margin:0px;
padding:0px;
}
.inline-block{
display: inline-block;
}
.pull-right{
float:right!important;
}
.caret{
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: 4px solid;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}
There are a couple of issues here. Firstly, you are nesting <li>'s within <a>'s which is invalid. You need to fix this:
<ul class="dropdown-menu">
<li>Jeans</li>
<li>Pants</li>
<li>Shirts</li>
<li>Shorts</li>
<li>Tees</li>
</ul>
secondly, you arent actually giving your nested <ul> a left position which FF seems to need:
#menubar .menu-container ul.dropdown-menu{
left: 0;
}
You will then also need to move your border from the <a> to the <li> to keep the styling that you had before making these changes.
DEMO
just put left:0 in #menubar
.menu-container ul.dropdown-menu{left:0}
refer http://jsfiddle.net/aashi/eyJ8e/8/
For a drop down menu you may check this demo link :
The html part:
<ul class="menubar">
<li>NEW</li>
<li>MENU
<ul class="dropmenu">
<li>JEANS</li>
<li>PANTS</li>
<li>SHIRTS</li>
<li>SHORTS</li>
<li>TEES</li>
</ul>
</li>
</ul>
the CSS part:
*{ margin:0; padding:0;}
ul.menubar{
margin:0 auto;
width:100%;
background:#000;
height:40px;
display:block;
}
ul.menubar li{
list-style-type:none;
display:inline-block;
float:left;
position:relative;
}
ul.menubar li a{
display:block;
text-decoration:none;
color:#fff;
padding:10px;
}
ul.menubar li ul.dropmenu{
position:absolute;
width:120px;
padding:10px 10px 10px 0;
display:none;
}
ul.menubar li:hover ul.dropmenu{
display:block;
top:30px;
}
ul.menubar li:hover ul.dropmenu li{
background:#222;
width:100%;
}
ul.menubar li:hover ul.dropmenu li a:hover{
background:#333;
}
Here is the JS fiddle:
http://jsfiddle.net/ameysawant/LPdqV/1/
My menu item with a dropdown submenu expands each time I mouse over. Below is the HTML code for it.
<header id="header">
<div style="width:90%; margin:auto;">
<div id="logo">Inversion iDeas</div>
<nav id="nav">
<ul>
<li>welcome</span></li>
<li>Discover<br /><span class="desc">About Us</span>
<ul>
<li>Our Services</li>
<li>Content Marketing Strategy</li>
<li>Print & Digital Publishing</li>
<li>Direct Interactive Marketing</li>
<li>Social Media Marketing</li>
<li>Search Marketing</li>
<li>Video</li>
<li>Experiential Marketing Events</li>
<li>Current Media Ideas</li>
<li>Events</li>
<li>Web & Mobile</li>
<li>Leadership</li>
</ul>
</li>
<li>Experience<br /><span class="desc">media</span></li>
<li>Testimony<br /><span class="desc">Satisfied Clients</span></li>
<li>Reach Us<br /><span class="desc">contact us</span></li>
</ul>
</nav>
</div>
</header>
css
header {
width: 100%;
background:#000;
opacity:0.8;
height: 80px;
position: fixed;
margin-top: 30px;
z-index:999;
}
#logo a {
color: #fff;
text-decoration: none;
float: left;
font-size: 30px;
margin-top: 20px;
font-family:"century gothic";
font-weight: normal;
height:45px;
width:287px;
text-indent:-9999px;
background:url(../images/logo.png) 0 0 no-repeat;
}
#nav {
width: 800px;
position:fixed;
top:50px;
left:400px;
}
#nav ul{
list-style: none;
display: block;
margin: 0;
padding: 0;
}
#nav li{
float: left;
padding: 10px 20px 0 20px;
border-left:solid 1px #fff;
text-align:center;
height:40px;
display:block;
font-size:12px;
}
#nav li:first-child{
border-left:none;
}
#nav li a {
color: #fff; opacity:0.7; font-size: 16px; text-decoration: none; font-family: Verdana, Geneva, sans-serif;
}
#nav li a.active { color: #94c600; opacity:1;}
#nav li a:hover { color: #94c600; opacity:1; width:100%;}
#nav li ul { display: none;}
#nav li:hover ul {display: block; position: relative; top:8px; left:-20px; width:160px; padding:0;}
#nav li:hover li {float: none; font-size:12px; background:rgba(0,0,0,0.8); border-left:none; text-align:left; }
#nav li:hover li a {font-size:12px; padding:0; margin:0;}
#nav li:hover li a:hover {color:#94c600;}
.desc{
font-size:12px;
color:#333;
display: block;
}
position: relative; on the parent. position: absolute; on the child.
JSfiddle (please include one the next time you post)
I added some positioning to your CSS
#nav li ul { display: none; position: relative;}
#nav li:hover ul {display: block; position: absolute; top:48px; left:168px; width:160px; padding:20px 0 0 0;}
#nav li:hover li {float: none; font-size:12px; background:rgba(0,0,0,0.8); border-left:none; text-align:left;}
See working live here
http://codepen.io/jhawes/pen/lyevj
Hi I cannot figure out how to change the size of the child item of the CSS menu (The parent has an image background, the child should have a background color).
I tried something like:
ul > li > a:hover {
display:inline-block;
background:#000;
float:left;
width:120px;
height:25px;
}
but it is all mixed with other elements. Can you please help me figure it out?
HTML:
<div id="menu">
<ul>
<li><a id="menu1" href="#">Parent1</a></li>
<li>Parent2
<ul>
<li>Child1</li>
<li>Child2</li>
<li>Child3</li>
</ul>
</li>
<li>Parent3</li>
<li>Parent4</li>
<li>Parent5</li>
</ul>
</div>
CSS:
#menu {
position:absolute;
top:133px;
left:0px;
width:900px;
height:50px;
}
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
float: left;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
/*padding: 5px 15px 5px 15px;*/
background-image: url(../images/menu1.png);
white-space: nowrap;
width:178px;
height:50px;
}
ul li a:hover {
background: #BBBBBB;
}
li:hover ul {
display: block;
position: absolute;
left:0px;
}
li:hover li {
float: left;
font-size: 11px;
}
li:hover a {
background: #3b3b3b;
}
li:hover li a:hover {
background: #CCC;
}
Thank you very much for your help in advance!
Hope following changes will work for you. Here is the fiddle link. Followings are your css chagnes
#menu {
/*position:absolute;
top:0;
left:0px;*/
width:900px;
height:22px;
background-color:#000;
}
ul {
font-family: Arial, Verdana;
font-size: 14px;
line-height:22px;
margin: 0;
padding: 0;
list-style: none;
text-align:center;
}
ul li {
display: block;
float: left;
position:relative;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
/*padding: 5px 15px 5px 15px;*/
background-image: url(../images/menu1.png);
white-space: nowrap;
width:178px;
line-height:22px;
}
ul li:hover a {
background: #BBBBBB;
}
ul li ul {
display: none;
widht:200px;
position:absolute;
left:0;
top:22px;
}
ul li ul li {
float: none;
font-size: 11px;
}
ul li ul li a {
background: #3b3b3b;
background-image:none!important;
}
ul li ul li a:hover {
background: #CCC;
}
ul li:hover ul {
display: block;
position: absolute;
left:0px;
}
To add a background color to your child sub menu:
ul li ul li {
// rules
}
You can also add class to your list items to make it more manageable. For example, you can add a class to the ul of your child menu:
<li>Parent2
<ul class="sub-menu">
<li>Child1</li>
<li>Child2</li>
<li>Child3</li>
</ul>
</li>
Then you can simplify the css to:
.sub-menu li {
display:inline-block;
background:#000;
float:left;
width:120px;
height:25px;
}
It is good to retain the same width so that you can avoid that weird movement.
Try this
ul li ul li a:hover {
display:block;
background:#000;
float:left;
width:178px;
height:25px;
}
DEMO
I don't know how you want the result to look exactly but you could also use the + selector in your css like this:
ul > li > a:hover+ {
display:inline-block;
background:#000;
float:left;
width:120px;
height:25px;
}
The + selector as you see after a:hover means that the next element directly after the a:hover-tag will be selected and is this case it will be a ul
You can also specify the element with +ul if you want the ul to be a list and not a flat one like this:
ul > li > a:hover+ul {
display:inline-block;
background:#000;
float:left;
width:120px;
height:25px;
}
Like this you know that you will only affect the element next to the hovered one
Solution
ul > li:hover > li > a {
display:inline-block;
background:#000;
float:left;
width:120px;
height:25px;
}
It can be as per requirement
ul > li:hover li a { }