So i have an issue with a CSS dropdown menu being displayed wrong in IE. In other browsers it works like it should.
<body>
<div id="container">
<header>
<div id="hlogo">
title
</div>
<nav id="hmenu">
<ul>
<li>
menu1
</li>
<li>
menu2
<div id="items" class="hiddenMenu">
submenu1
submenu2
submenu3
submenu4
</div>
</li>
<li>
menu3
</li>
<li>
menu4
</li>
</ul>
</nav>
</header>
<section id="container-body">
<div id="content">
</div>
</section>
</div>
So this is my complete HTML. It has a layout provided by the following css.
/* layout styles */
*{margin:0;padding:0;font-family:Arial;}
header{overflow:hidden;}
body{background-color:#cc3333;}
a {display: inline-block;font-weight: bold;text-decoration:none;}
footer {
display:block;
position:relative;
width:100%;
}
footer > #disclamer {
margin-left: auto;
margin-right: auto;
width: 200px;
padding-bottom:5px;
font-size:small;
font-weight: bold;
}
#container{
background-color:#ffffff;
margin:auto;
min-width:756px;
width:60%;
overflow:hidden;
border:solid 2px #666666;
margin-top:10px;
margin-bottom:10px;
box-shadow:0 1px 3px rgba(0,0,0,0.6);
}
#hlogo {float:left;height:105px;width:181px;padding:10px;}
#hlogo a{background-position: 0px 0px;float:left;display:inline;height:105px;text-indent:-999999em;width:181px;}
#hlogo a{background-image:url('../images/logo.png');background-repeat:no-repeat;overflow:hidden;}
#hmenu{margin-top:45px;padding:10px;}
nav {
list-style:none;
display:inline;
float:right;
}
nav ul{
list-style: none;
text-align:center;
background-color:#666666;
float:left;
}
nav ul li {
width:128px;
float:left;
display:inline-block;
}
nav ul li:hover{
background-color:#cc3333;
cursor:pointer;
}
nav ul li a {
color:#ffffff;
padding:10px;
}
nav ul {
background: #222 url('../images/overlay.png') repeat-x;
color: #fff;
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
cursor: pointer
}
section {margin:10px;}
#container > header {display:block;}
#container-body {
background-color:#ececec;
height:600px;
display:block;
overflow:auto;
}
#container-body > #content {
margin: 10px;
height:95%;
position:relative;
}
.hiddenMenu
{
position:absolute;
z-index: 150;
background: #222 url('../images/overlay.png') repeat-x;
color: #fff;
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
cursor: pointer;
width: inherit;
}
.hiddenMenu > a
{
position:relative;
text-align: left;
clear:both;
font-size:0.75em;
}
nav li .hiddenMenu > a
{
display:none;
}
/*nav li:hover .hiddenMenu > a
{
display:block;
}*/
nav li .hiddenMenu > a:hover
{
background-color:#cc3333;
cursor:pointer;
border: 1px black solid;
}
This is the full CSS.
This is the CSS i use. Now in firefox it works as it should. The menu is show when i hover the menu2 item. On IE it shows the first submenu item (submenu1) and then it is cleared so i can't even click it.
I can't see what i'm doing wrong so if you can help me i would appreciate it. Thanks!
edit: added code.
The header tag has an overflow:hidden attribute; if i set that to visible it will show the complete menu but will mess up my layout completely. Is there a way around it or am i doing something wrong?
Also, i have a jquery script to set the display on the menu to none/block accordingly but in IE if i hover on the submenu items the menu will still be hidden. Why does this happen?
In my experience IE gets a bit buggy when you don't set the positions of an absolute positioned object. Like top: 0 and left: 0 for instance.
Edit:
Also, parent of the absolute positioned object should have position: relative; if the position should be using the parent dimensions as a starting point.
Edit2:
li:hover doesn't work in IE6 I think. Can't remember about IE7. One of them will only accept a:hover, and browsers below maybe none of them. jQuery solves things like that though.
Edit3:
I don't know what the nav stuff is, I haven't jumped to HTML5 so I don't know if it's relevant later. But anyway I've made something that works of your code.
Script (jquery):
$(document).ready(function () {
$('#hmenu ul li').hover(function () {
$(this).children('div').css('display', 'block');
},
function () {
$(this).children('div').css('display', 'none');
});
});
CSS:
#hmenu {
list-style: none;
display: inline;
float: right;
}
#hmenu ul {
list-style: none;
text-align: center;
background-color: #666666;
float: left;
}
#hmenu ul li {
width: 128px;
float: left;
position: relative;
display: inline-block;
}
#hmenu ul li:hover {
background-color: #cc3333;
cursor: pointer;
}
#hmenu ul li a {
color: #ffffff;
padding: 10px;
}
#hmenu ul {
background: #222 url('../images/overlay.png') repeat-x;
color: #fff;
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
cursor: pointer
}
.hiddenMenu {
display: none;
position: absolute;
top: 60;
left: 0;
z-index: 150;
background: #222 url('../images/overlay.png') repeat-x;
color: #fff;
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
cursor: pointer;
width: inherit;
}
(sorry for the formatting, bit new to this, but you can apply source formatting in your editor I guess. I changed the navs to have the id and changed the HTML nav to be div. That's it.
HTML:
<div id="hmenu">
<ul>
<li>
menu1
</li>
<li>
menu2
<div id="items" class="hiddenMenu">
submenu1
submenu2
submenu3
submenu4
</div>
</li>
<li>
menu3
</li>
<li>
menu4
</li>
</ul>
</div>
You cannot have a tag named nav change it to div and try again.
Related
So I've been trying to work on my website creation skills and was reading various tutorials concerning html/css developing. The problem I now have run into is that when I alter the size of my page the view gets incredibly altered. I was under the assumption that when the view changed it would keep it's structure but have a smaller view window (not the case).
Does the problem lie with me using percent values instead of pixels? Is there a better way to structure my design to make it responsive to window size alterations?
This is my HTML
<html>
<html lang="en">
<head>
<title> MyWebsite</title>
<link rel="stylesheet"type="text/css" href="style.css">
</head>
<body>
<div id="containerColumn1">
<div id="Fill1"> </div>
</div>
<div id="containerTopLogo">
<div id="FillTopLogo"> </div>
</div>
<div class="menu-wrap">
<nav class="menu">
<ul class="clearfix">
<li>Home</li>
<li>
Services <span class="arrow">▼</span>
<ul class="sub-menu">
<li> Option 1</li>
<li> Option 2</li>
<li> Option 3</li>
</ul>
</li>
<li>
Services2 <span class="arrow">▼</span>
<ul class="sub-menu">
<li> Option 1</li>
<li> Option 2</li>
<li> Option 3</li>
</ul>
</li>
<li> Contact Us</li>
<li> Site Map</li>
</ul>
</nav>
</div>
<div id="containerPicture">
<div id="headerPicture"> </div>
</div>
<div id="container">
<div id="header"> </div>
</div>
<div id="containerColumn2">
<div id="Fill2"> </div>
</div>
</body>
</html>
This is my style.css
body {
background: #FFFFFF url('body-bg.jpg');
}
.clearfix:after {
display:block;
clear:both;
}
/*COLUMNS TO CENTER PAGE*/
#containerColumn1 {
width:18.2%;
margin-top: 0%;
margin-left: 0%;
padding: 0;
border: 5px groove #000;
}
#Fill1 {
background: red;
height:100%;
}
#containerTopLogo {
width:61.3%;
margin-left:18.4%;
margin-top:-47.4%;
height:23%;
position: absolute;
border: 5px groove #000;
}
#FillTopLogo {
background: green;
height:100%;
}
#containerColumn2 {
width:18%;
margin-top: -49.82%;
margin-left: 80%;
height:100%;
position:absolute;
padding: 0;
border: 5px groove #000;
}
#Fill2 {
background: red;
height:100%;
}
/*Menu Outline*/
.menu-wrap {
width:50%;
box-shadow: 0px 1px 3px rgba(0,0,0,0.2);
background:#000000;
}
/* Height of menu (Home)(*MARGIN*) AND LEFT-RIGHT PLACEMENT(*WIDTH*)*/
.menu {
width: 61.5%;
margin:0%;
position: absolute;
left:19%;
top: 25%;
border-style: groove;
border-width: 5px;
border-color: #000000;
}
.menu li{
margin:0px;
list-style:none;
font-family:'Ek Mukta';
}
.menu a {
transition:all linear 0.15s;
color:#000000;
}
.menu li a:hover > a .menu .current-item a{
color:#FFF000;
}
.menu .arrow {
font-size:11px;
line-height:0%;
}
/* Top of the Page */
.menu > ul > li {
float:left;
display:inline-block;
position:relative;
font-size:19px;
}
/* Menu Item spacing (Vertical/Horizontal) */
.menu > ul > li > a {
/* Menu Spacing Vert/Hor */
padding:10px 30px;
display:inline-block;
text-shadow:0px 1px 0px rgba(0,0,0,0.4);
}
.menu > ul > li:hover > a, .menu > ul > .current-item > a{
background:#FFFFFF;
}
/* Bottom Level */
.menu li:hover .sub-menu {
z-index:1;
opacity:1;
}
.sub-menu {
width:100%;
padding:5px 0px;
position:absolute;
top:100%;
left:0px;
z-index:-1;
opacity:0;
transition:opacity linear 0.15s;
box-shadow: 0px 2px 3px rgba(0,0,0,0.2);
background:#FFFFFF;
border-style: groove;
border-width: 5px;
border-color: #000000;
}
.sub-menu li {
display:block;
font-size:16px;
}
.sub-menu li a {
padding:10px 30px;
display:block;
}
.sub-menu li a:hover, .sub-menu .current-item a{
background:#FFFFFF;
}
/*END OF MENU TOOLBAR*/
#containerPicture {
width:62%;
margin-top: -31.7%;
margin-left: 18.6%;
padding: 0;
border: 5px groove #000;
}
#headerPicture {
background: yellow;
height:20%;
}
#container {
width: 62%;
margin-top:-0.5%;
margin-left: 18.6%;
padding: 0;
border: 5px groove #000;
}
#header {
background: blue;
height: 50%;
}
I would like to state that I have used a drop down menu provided by Seb Kay. His website: http://inspirationalpixels.com/tutorials/creating-a-dropdown-menu-with-html-css. I only state this as a reference so that he is at least acknowledged for his craftsmanship.
Your problem comes from the vertical margin and padding rules in your css. This is a little counterintuitive but this rules, when defined with percentage, doesn't take as reference the height, but instead they take the width as reference, so all 4 margins are equal. Example:
If you have: margin: 5%, the top and left margin are the same and they don't depend on the height of the conteiner for the top and bottom margins and the with for the right and left.
For padding it is the same.
So, my solution: if you don't really need a percentage layout, I recomend you to use ems for the vertical margins and paddings. Otherwise, if you need to mantain proportions, you can use vh units. The vh units are like a percentage that refers not to the height of the parent but the height of the window, so it is great to mantain proportions on a page when you want to avoid scrolling and yet keep percentage.
<div class="header">
<div id="navigation">
<div class="center">
<div class="logo"></div>
<ul class="right">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
------------------------C S S--------------------------------
#navigation {
position:fixed;
display:block;
top: 0;
width: 100%;
height:35px;
padding-top: 15px;
-webkit-box-shadow: 0px 0px 8px 0px #000000;
background-color: rgba(1,1,1,0.8);
color:rgba(1,1,1,0.8);
border-bottom:1px solid black;
}
.center {width: 1000px; margin: 0 auto;}
div.logo {display:inline-block;
}
ul, li {
padding:0;
margin:0;
}
#navigation ul {
list-style: none;
float:right;
}
#navigation ul li {
display:inline;
}
#navigation a {
text-decoration:none;
font-size:14px;
padding: 0 15px;
color:white;
}
#navigation a:hover {
color: grey;
}
#content {
width: 800px;
margin: 0 auto;
margin-top: 80px;
}
an example would be like this
fiddle
you can modify the code for you
HTML:
<div class="containerc">
<div class="navbarc" id="navbarc">
<div class="username">
<!-- base menu -->
<ul>
<li onmouseover="showsubmenu()" onmouseout="hidesubmenu()"> <div id="menuname"> Menu </div>
<!-- actual menu -->
<ul>
<li> sub1 hover here
<!-- sub menu -->
<ul>
<li> submenu 2
</li>
<!-- for more submenu within sub menu add ul tags and li tags within that here -->
</ul>
</li>
<li>Logout
</li>
</ul>
</li>
</ul>
</div>
</div>
CSS:
.containerc>.navbarc { //setting the dimensions and font properties
padding-left:15px;
padding-right:15px;
padding-top:0px;
margin-left:auto;
margin-right:auto;
font-size:18px;
font-style:bold;
z-index:10;
}
.navbarc {
width:100%; //to occupy the full width of screen
height:45px;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #494846), color-stop(1, #0a0909));
border:1px solid #e7e7e7;
position:fixed; // this will take menu bar along the vertical scroll
color: white;
}
#navbarc ul {
margin: 0;
padding: 0;
list-style: none;
}
#navbarc a:link, #navbarc a:visited { //changing the style properties of anchor tags
color: white;
text-decoration: none; //removes the underline
}
#navbarc a {
display: block;
padding: 6px 8px;
}
#navbarc li {
float: left;
margin-right: 1px;
position: relative;
}
#navbarc li li { //for properties of submenu
width: 160px;
margin-top: 1px;
background-color: #494846;
}
#navbarc li:hover { //on hover change the background color
background-color: #6E6E6E;
}
#navbarc li li:hover {
background-color: #6E6E6E;
}
#navbarc ul ul { //for properties of submenu
position: absolute;
visibility: hidden;
font-size:15px;
}
#navbarc ul ul ul { //for properties of submenu within submenus
position: absolute;
left: 100%;
top: -2px;
border: solid 1px transparent;
}
#navbarc li:hover > ul { // on hover show the submenu
visibility: visible;
}
.menuname { //styling for base menu
display:inline-block;
padding-top:10px;
position:relative;
}
Javascript
$(document).ready(function(){
$("#navbarc ul ul").hide(); //to hide expanded menu initially
function showsubmenu() {
$("#navbarc ul ul").show(); //to show the list on function call
}
function hidesubmenu() {
$("#navbarc ul ul").hide(); // to hide the list on function call
}
});
I am trying to build a simple CSS navigation bar with a drop down menu, I am new to CSS and I am having a hard time to get my drop down menu to work. My main problem from the my drop-down menu is that I cannot get my sub-menu to be the same size as my main menu. One of my sub-menu's work the other one does not work?
---- HTML CODE ---
<nav id = "navigation" role:navigation>
<img src="logo_dark.png" id = "logo" />
<ul id="menu">
<li id="intresting_stuff">
<a href = "#" >
Interesting Stuff
<ul class="sub_menu" id="sub_menu">
<li id="classic">Science</li>
<li id="strategy">Technology</li>
<li id="sports">Comedy</li>
</ul>
</a>
</li>
<li id="games">
<a href = "#" >
Games
<ul class="sub_menu" id="sub_menu">
<li id="classic">Classic Games</li>
<li id="strategy">Strategy Games</li>
<li id="sports">Sports Games</li>
<li id="adventure">Adventure Games</li>
<li id="random">Random Games</li>
</ul>
</a>
</li>
<li id="home">
<a href = "#" >
Homes
<span>
</span>
</a>
</li>
</ul>
</nav>
----- CSS CODE -----
#navigation
{
display:block;
background: linear-gradient(to bottom, rgba(0,81,222,0.9)0,rgba(212,212,212,0.15)100%);
color: white;
width : 100%;
height:100%;
border-radius:5px;
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
}
#navigation li a
{
display:inline-block; makes the list go from left to right
list-style: none;
padding-top:15px;
padding-bottom:15px;
padding-left:23px;
padding-right:23px;
float: right;
font-family: 'Oswald', sans-serif;
font-style:bold;
font-size: 20px;
color: white;
text-decoration: none;
}
/*This is the stuff for the drop down menu..*/
/*Initialize*/
ul#menu, ul#menu ul.sub_menu {
float:right;
display: flex;// alows the website to flex if necessary
flex-wrap: wrap;
justify-content: flex-start;
padding:0;
margin: 0;
}
ul#menu li, ul#menu ul.sub_menu li {
list-style-type: none;
display: inline-block;
}
/*Link Appearance*/
ul#menu li ul.sub_menu li a {
text-decoration: none;
color: #fff;
background: linear-gradient(tobottom,rgba(201,198,189,.5)0,rgba(212,212,212,0.15)100%);
padding:0px;
display:inline-block;
text-align:center;
font-size:19px;
width: 100%;
}
#intresting_stuff
{
border-left: 1px solid gray;
}
#games
{
border-left: 1px solid gray;
border-right: 1px solid gray;
}
/*Make the parent of sub-menu relative*/
ul#menu li {
position: relative;
float:right;
}
/*sub menu*/
ul#menu li ul.sub_menu {
margin:0;
padding:0;
display:none;
position: absolute;
top: 30px;
left: 0;
}
#classic:hover, #strategy:hover, #sports:hover, #adventure:hover,#random:hover
{
background:linear-gradient(to bottom, rgba(222,152,0,0.8) 0,rgba(212,212,212,0.4)100%);
}
#science:hover, #technology:hover, #comedy:hover
{
background:linear-gradient(to bottom, rgba(222,152,0,0.8) 0,rgba(212,212,212,0.4)100%);
}
#games:hover, #intresting_stuff:hover, #home:hover
{
background:linear-gradient(to bottom, rgba(222,152,0,0.8) 0,rgba(212,212,212,0.4)100%);
}
ul#menu li:hover ul.sub_menu {
display:block;
}
Your code is pretty messy, and you have some random <a> tags in the <ul>. I dropped your code in a jsfiddle and I think I understand what you are trying to do.
A lot of your issue revolves around floating left and right in the same divs, etc...
Take a look HERE for a working solution you can copy and paste. Specifically, take note of the hover elements and use of the visibility: visible; class property.
Hi Please help me on this issue.
Issue: dropdown values of the menu is shown in other menu (it is not in-line with menu).
Example: Dropdown values of Home menu is Home-1, Home-2, Home-3 and it will shown under National parties menu. How can I show appropriately under the right menu
Demo: http://jsfiddle.net/shrikanth/Sv79m/
<div id="menu">
<ul>
< li>Home<ul>
<li>Home-1</li>
<li>Home-2</li>
<li>Home-3</li>
</ul></li>
<li ><a href="aboutus.html">National Parties<ul>
<li>BJP</li>
<li>Congress</li>
<li>CPM</li>
</ul></a></li>
<li><a href="services.html">Services<ul>
<li>TV</li>
<li>Cell</li>
<li>Radio</li>
</ul></a></li>
<li>Contact Us
<ul>
<li>India</li>
<li>USA</li>
<li>SAUS</li>
</ul>
</li>
</ul>
</div>
CSS
#menu {
width: 550px;
height: 35px;
font-size: 16px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
text-align: center;
text-shadow: 1px 2px 1px #333333;
background-color: #8AD9FF;
border-radius: 8px;
}
#menu ul {
height: auto;
padding: 8px 0px;
margin: 0px;
}
#menu li {
display: inline;
padding: 20px;
}
#menu ul li a {
text-decoration: none;
color: #00F;
padding: 8px 8px 8px 8px;
}
#menu a:hover {
color: #F90;
background-color: #FFF;
}
#menu ul li ul{
display:none;
position:absolute;
top:31px;
background-color:red;
}
#menu ul li:hover ul{
display:inline-block;
height:auto;
width:135px;
}
#menu ul li ul:before{
content: '';
border-color: transparent transparent red transparent;
border-style: solid;
border-width: 10px; /* The border on the drop down box */
position: absolute;
top: -20px;
left: 37%;
margin-left:10px;
}
http://jsfiddle.net/Sv79m/1/
Give #menu li a position of relative:
#menu li {
display: inline;
padding: 20px;
position:relative;
}
Adjust a little the absolute positioning with left:0 :
#menu ul li ul{
display:none;
position:absolute;
top:51px;
background-color:red;
left:0;
}
Edit:
Also, to solve the overlapping links, add this:
#menu ul li ul li{
display:block;
padding:5px;
}
http://jsfiddle.net/Sv79m/2/
Also, you had some unclosed tags, I closed them and now it's much better:
http://jsfiddle.net/Sv79m/3/
<a href="aboutus.html">National Parties<ul>
^^CLOSE ME!
It's all down to the positioning of the containing element. If you use position: relative; it allows you to position elements absolutely inside of it.
Here's a tutorial on creating a dropdown navigation, it explains about the positioning and structure. This should help - CSS 3 navigation menu
Here's the link to the page:
http://themes.brixwork.com/altamont/
The positioning of the tags under the ul#menu appears to be skewed on IE7. I have put borders on the UL (#f00) and LI (#0f0) items to clarify.
IN Firefox, the LI items nest properly to the top of the UL, however on IE the LI nests to the top of the div#menubar rather than the ul#menu under it.
The DOM tree is like this:
<div id="menubar" class="grid_16 alpha omega">
<ul id="menu">
<li style="margin-left:0px;">home</li>
<li>about me</li>
<li>featured listings
<ul class="submenu">
<li>
on a map
</li>
</ul>
</li>
<li>
MLS® search
</li>
<li>
resources
<ul class="submenu">
<li>
for buyers
</li>
<li>
for sellers
</li>
<li>
pre-sale / assignment
</li>
<li>
useful links
</li>
</ul>
</li>
<li>
blog
</li>
<li>
contact me
</li>
</ul>
</div>
Pretty standard div>ul>li menu structure, with optional submenus under each as a ul.submenu>li structure.
I tried putting a "float:left;" to the #menu li node, and that did solve the positioning; however then I don't have a nice centre aligned menu - everything goes to the left on the menu.
Here's the current css revolving around this (note that I'm using 960 grid, and also the reset.css and text.css file that comes with it).
#menubar {
height:40px;
text-align: center;
}
#menu {
margin:10px auto;
padding:0px;
z-index: 20;
width: auto;
display: block;
list-style:none;
white-space: nowrap;
position: relative;
border: 1px solid #f00;
}
#menu li {
display:inline;
margin-left:40px;
margin-right:0px;
margin-top:10px;
margin-bottom:0px;
padding:0px 0px 0px 0px;
list-style:none;
z-index: 25;
position: relative !important;
border: 1px solid #0f0;
}
#menu li a:link, #menu li a:visited {
color:#fff;
text-decoration:none;
font-size:12px;
padding: 10px 0px;
text-transform: uppercase;
}
#menu li a:hover {
color:#ddd;
}
#menu li a:active {
position:relative;
top:1px;
color:#fff;
}
.submenu {
position:absolute;
left: -9999px;
display: block;
background-color:#906117;
padding:0px 0px 0px 0px;
top:0px;
z-index:30;
}
#menu li:hover .submenu {
left: 0px;
}
.submenu li {
text-align: left !important;
margin:0px !important;
padding: 3px 0px 5px 0px !important;
clear: both;
float: left;
position:relative;
overflow: hidden;
z-index: 35;
width: 100% !important;
}
.submenu li:hover {
background-color: #f79c10;
}
.submenu li a:link, .submenu li a:visited {
color:#fff !important;
font-size:12px !important;
padding: 0px !important;
margin: 0px !important;
white-space:nowrap;
display: block;
width: 100%;
padding:3px 10px 5px 10px !important;
z-index: 40;
}
.submenu li a:hover, .submenu li a:active {
color:#fff !important;
}
IE7 ignores margins when ul elements have a relative position. You can fix this by removing the margin in your ul#menu styles and add that value back in the parent div#menubar.
This will give you the same layout result, but will resolve the IE7 margin/relative bug.