I have written a CSS menu for a site I am helping develop, and it displays correctly in both IE 7 and Firefox 3 (on Windows XP).
The intended effect is that the drop down menus should be as wide as the widest element in them (but not wider). In Safari, however, they appear to be roughly twice as wide as they should be. I have no clue as to how to fix this. Any help?
The HTML is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body>
<div id="mainContainer">
<div id="mainNavContainer">
<img id="leftNavImg" src="imgsrc.jpg" alt="ignore me for now" height="34" width="91">
<div id="topNav">
<ul>
<li>Menu Item 1<ul>
<li>Submenu Item 1.1</li>
<li>Submenu Item 1.2</li>
<li>Submenu Item 1.3</li>
</ul></li>
<li>Menu Item 2<ul>
<li>Submenu Item 2.1</li>
<li>Submenu Item 2.2</li>
<li>Submenu Item 2.3</li>
</ul></li>
<li>Menu Item 3<ul>
<li>Submenu Items may have different lengths</li>
<li>short</li>
<li>or potentially moderately long</li>
<li>The submenu should be as wide as its longest item</li>
</ul></li>
<li>etc...<ul>
<li>Submenu Item 4.1</li>
<li>Submenu Item 4.2</li>
<li>Submenu Item 4.3</li>
</ul></li>
</ul>
</div>
</div>
</div>
</body>
and the CSS is
* {
margin: 0;
padding: 0;
}
ul, ol, dl, li, dt, dd {
list-style: none;
}
body {
background-color: #fff;
margin: 20px;
text-align: center;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
#mainContainer {
width: 975px;
background-color: #fff;
text-align: left;
margin: 0 auto;
position: relative;
padding-top: 52px;
}
#mainNavContainer {
height: 34px;
font-size: 11px;
width: 973px;
border: 1px solid #dedede;
background-color: #888;
position: absolute;
top: 0;
color: #000;
}
#mainNavContainer #leftNavImg {
padding: 0 20px 0 7px;
float:left;
border-right:1px solid #dedede;
}
#topNav {
float: left;
}
#topNav ul {
display: inline;
text-align: center;
}
#topNav li {
display: block;
float: left;
position: relative;
border-right: 1px solid #DEDEDE;
width: 102px;
}
#topNav li ul {
display:none;
border-bottom: 4px solid #422952;
position:absolute;
top: 35px;
left:0px;
width: auto;
white-space: nowrap;
text-align: left;
z-index:100;
}
#topNav li li {
display:block;
border-right: none;
border-bottom: 2px solid #622952;
background-color:#FBFBFB;
width: 100%;
font-size: 12px;
}
#topNav li a, #topNav form {
text-decoration: none;
display:block;
color: #000;
padding: 11px 6px;
}
#topNav li li a {
padding: 9px 6px;
color: #666;
width: 100%;
}
#topNav a:hover {
color: #fff;
background-color: #824972;
}
#topNav li:hover ul {
display:block;
z-index:100;
}
#topNav li li a:hover {
background-image:none;
background-color:#fff;
color: #000;
}
Move the
white-space: nowrap;
from
#topNav li ul { ...
to
#topNav li li a { ...
cheers!
Related
See https://jsfiddle.net/scott8035/gqn0t9a7/3/.
In this example, I have a section of a page content box displayed with a box shadow only on left & right sides. I achieve that effect by adding clip-path: inset(0 -10px); to the content box's CSS. So far, everything is good.
There is an element inside the content box. When you hover over it, a drop-down menu appears. However, the menu is also clipped by the clip-path from the parent content box instead of being displayed in its entirety.
How can I display the menu child element over the top of the clipped area so you can see the entire thing?
Note: I am somewhat hampered in how I can structure the HTML because I'm using a page builder, notably, the menu has to be a child element of the content box.
Here is the code in case the jsfiddle doesn't work:
<body>
<div id="content-box">
<div class="hoverable">
<p>
Element 1
</p>
<p>
Element 2
</p>
<p>
Element 3
</p>
<div class="menu">
<ul>
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
<li>Menu item 4</li>
<li>Menu item 5</li>
</ul>
</div>
</div>
</div>
</body>
body {
background-color: green;
}
#content-box {
width: 50%;
margin: 40px auto;
padding: 40px;
background-color: white;
box-shadow: 0 0 10px #000000;
clip-path: inset(0 -10px);
}
.hoverable {
border: 1px solid #bbb;
padding: 10px;
position: relative;
}
p {
background-color: #eee;
padding: 5px;
}
.hoverable:hover .menu {
display: block;
}
.menu {
display: none;
width: 35%;
background-color: black;
padding: 0;
margin: 0;
position: absolute;
top: 172px;
}
.menu ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.menu ul li {
border-bottom: 1px solid #555;
}
.menu ul li a {
display: block;
padding: 5px 10px;
color: white;
text-decoration: none;
}
.menu ul li:hover a {
background-color: #333;
color: red;
}
Apply the trick to a pseudo element instead:
body {
background-color: green;
}
#content-box {
width: 50%;
margin: 40px auto;
padding: 40px;
background-color: white;
position:relative;
}
#content-box::before {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
box-shadow: 0 0 10px #000000;
clip-path: inset(0 -10px);
pointer-events:none;
}
.hoverable {
border: 1px solid #bbb;
padding: 10px;
position: relative;
}
p {
background-color: #eee;
padding: 5px;
}
.hoverable:hover .menu {
display: block;
}
.menu {
display: none;
width: 35%;
background-color: black;
padding: 0;
margin: 0;
position: absolute;
top: 172px;
}
.menu ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.menu ul li {
border-bottom: 1px solid #555;
}
.menu ul li a {
display: block;
padding: 5px 10px;
color: white;
text-decoration: none;
}
.menu ul li:hover a {
background-color: #333;
color: red;
}
<body>
<div id="content-box">
<div class="hoverable">
<p>
Element 1
</p>
<p>
Element 2
</p>
<p>
Element 3
</p>
<div class="menu">
<ul>
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
<li>Menu item 4</li>
<li>Menu item 5</li>
</ul>
</div>
</div>
</div>
</body>
I am trying to get the horizontal menu bar above the pdf which is in tag object I have tried multiple options( for IE Only), which i found over internet but none helped me.
Below is the code I have tried(which is also copied from one the websites example).
<html xml:lang="en-us" xmlns="http://www.w3.org/1999/xhtml" lang="en-us"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>IE Dropdown Bug Fix | jonathanstegall.com</title>
<style type="text/css">
body {
text-align: center;
font: normal 76% Verdana, Arial, Helvetica, sans-serif;
padding: 1em;
line-height: 1.8em;
}
#wrapper {
width: 770px;
margin: 0 auto;
text-align: left;
border: 1px solid #ddd;
padding: 20px 10px;
}
#wrapper #header {
position: relative;
z-index: 2;
}
#wrapper #nav {
clear: both;
margin: 0 5px;
padding: 0 5px;
width: 750px;
height: 30px;
list-style: none;
border-top: 1px solid #335a86;
border-bottom: 1px solid #335a86;
text-align: center;
position: relative;
z-index: 2;
}
#wrapper #nav li {
float: left;
margin: 0;
padding: 0 0 5px 0;
border: 0;
position: relative;
}
#wrapper #nav li a {
margin: 0;
padding: 7px 15px;
display: block;
text-decoration: none;
font-size: 1.2em;
}
#wrapper #nav a:link, #wrapper #nav a:visited {
color: #888;
}
#wrapper #nav a:hover, #wrapper #nav a:focus {
color: #335a86;
}
#wrapper #nav li ul {
background-color: #ccc;
border: 0;
width: 150px;
height: auto;
list-style: none;
margin: 0;
padding: 5px 0 10px 0;
border: 0;
text-align: left;
position: absolute;
display: none;
}
#wrapper #nav li ul li {
float: none;
margin: 0;
line-height: 30px;
height: 30px;
}
#wrapper #nav li ul a {
padding: 7px 10px;
white-space: nowrap;
display: block;
}
#wrapper #nav li:hover ul {
display: block;
}
#wrapper #container {
padding: 10px;
position: relative;
}
#wrapper h1 {
position: absolute;
left: 10px;
top: 10px;
height: 60px;
line-height: 60px;
vertical-align: middle;
font-size: 2em;
background: #335a86;
color: #fff;
}
#wrapper #container p.intro {
margin-top: 60px;
}
#wrapper #container p {
margin: 1em 0;
}
#wrapper #container form {
padding: 1em 0;
}
#wrapper #container label, #wrapper #container select {
float: left;
display: block;
margin: 0 1em 0 0;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<ul id="nav">
<li>home</li>
<li>item one
<ul>
<li>sub item one</li>
<li>sub item two</li>
<li>sub item three</li>
<li>sub item four</li>
<li>sub item five</li>
<li>sub item six</li>
</ul>
</li>
<li>item two
<ul>
<li>sub item one</li>
<li>sub item two</li>
</ul>
</li>
</ul>
</div>
<div id="container">
<h1>Hi. This is a positioned H1</h1>
<p class="intro">This page is just some friendly content to show you just how bad IE really is. You could replace the absolutely positioned H1 above with a <code><select> </select></code> as I do below, a Flash movie, or whatever you like.</p>
<form name="form" id="form">
<label>To indicate this:</label>
<select name="foo" id="foo">
<option value="IE is mean">IE is mean</option>
<option value="IE sucks">IE sucks</option>
<option value="Maybe IE8 will be okay">Maybe IE8 will be okay</option>
</select>
</form>
<object id="pdfshow" style="background-color:#FFFFFF;" data="1.pdf??wmode=transparent" type="application/pdf" width="99.5%" height="550">
</object>
</div>
</div>
</body>
</html>
Please let me know, where I am doing wrong, as I have used position:relative , z-index:999too.
Here is the fiddle link. http://jsfiddle.net/h2knhyb4/
Thanks In Advance.
This is a hack , as I am using extra iframes next to <ul>, but it works the way we need in all browsers(i.e FF, chrome, IE11).
I found this answer somewhere over net and dont have the link at present, so updated the code for future reference.
<html xml:lang="en-us" xmlns="http://www.w3.org/1999/xhtml" lang="en-us"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>IE Dropdown Bug Fix | jonathanstegall.com</title>
<style type="text/css">
body {
text-align: center;
font: normal 76% Verdana, Arial, Helvetica, sans-serif;
padding: 1em;
line-height: 1.8em;
}
#wrapper {
width: 770px;
margin: 0 auto;
text-align: left;
border: 1px solid #ddd;
padding: 20px 10px;
}
#wrapper #header {
position: relative;
z-index: 2;
}
#wrapper #nav {
clear: both;
margin: 0 5px;
padding: 0 5px;
width: 750px;
height: 30px;
list-style: none;
border-top: 1px solid #335a86;
border-bottom: 1px solid #335a86;
text-align: center;
position: relative;
z-index: 2;
}
#wrapper #nav li {
float: left;
margin: 0;
padding: 0 0 5px 0;
border: 0;
position: relative;
}
#wrapper #nav li a {
margin: 0;
padding: 7px 15px;
display: block;
text-decoration: none;
font-size: 1.2em;
}
#wrapper #nav a:link, #wrapper #nav a:visited {
color: #888;
}
#wrapper #nav a:hover, #wrapper #nav a:focus {
color: #335a86;
}
#wrapper #nav li ul {
background-color: #ccc;
border: 0;
width: 150px;
height: auto;
list-style: none;
margin: 0;
padding: 5px 0 10px 0;
border: 0;
text-align: left;
position: absolute;
display: none;
}
#wrapper #nav li ul li {
float: none;
margin: 0;
line-height: 30px;
height: 30px;
}
#wrapper #nav li ul a {
padding: 7px 10px;
white-space: nowrap;
display: block;
}
#wrapper #nav li:hover ul {
display: block;
}
#wrapper #container {
padding: 10px;
position: relative;
}
#wrapper h1 {
position: absolute;
left: 10px;
top: 10px;
height: 60px;
line-height: 60px;
vertical-align: middle;
font-size: 2em;
background: #335a86;
color: #fff;
}
#wrapper #container p.intro {
margin-top: 60px;
}
#wrapper #container p {
margin: 1em 0;
}
#wrapper #container form {
padding: 1em 0;
}
#wrapper #container label, #wrapper #container select {
float: left;
display: block;
margin: 0 1em 0 0;
}
.cover
{
position:absolute;
z-index:-2;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<ul id="nav">
<li>home</li>
<li>item one
<ul>
<iframe src="about:blank" class="cover" />
<li>sub item one</li>
<li>sub item two</li>
<li>sub item three</li>
<li>sub item four</li>
<li>sub item five</li>
<li>sub item six</li>
</ul>
</li>
<li>item two
<ul>
<iframe src="about:blank" class="cover" />
<li>sub item one</li>
<li>sub item two</li>
</ul>
</li>
</ul>
</div>
<div id="container">
<h1>Hi. This is a positioned H1</h1>
<p class="intro">This page is just some friendly content to show you just how bad IE really is. You could replace the absolutely positioned H1 above with a <code><select> </select></code> as I do below, a Flash movie, or whatever you like.</p>
<form name="form" id="form">
<label>To indicate this:</label>
<select name="foo" id="foo">
<option value="IE is mean">IE is mean</option>
<option value="IE sucks">IE sucks</option>
<option value="Maybe IE8 will be okay">Maybe IE8 will be okay</option>
</select>
</form>
<object id="pdfshow" style="background-color:#FFFFFF;" data="1.pdf" type="application/pdf" width="99.5%" height="550">
</object>
</div>
</div>
</body>
</html>
The above hack does not appear to work - adding the .cover section to the style sheet and the iframe lines to the html code in the JSFiddle do not fix the problem - the drop down menus appear as blank boxes with no content in IE11?
I am working on a project and I am assigned to show a nested menu, I mean Drop down menu but I dont know what am I doing wrong here. Can anyone help me out ?
HTML
<div id="nav">
<ul>
<li>Menu Num 1</li>
<li>Menu Num 2
<ul>
<li>Sub Menu 2.1</li>
<li>Sub Menu 2.2</li>
<li>Sub Menu 2.3
<ul>
<li>Sub Sub Menu 2.3.1</li>
<li>Sub Sub Menu 2.3.2</li>
<li>Sub Sub Menu 2.3.3</li>
<li>Sub Sub Menu 2.3.4</li>
</ul>
</li>
<li>Sub Menu 2.4</li>
</ul>
</li>
<li>Menu Num 3</li>
<li>Menu Num 4</li>
</ul>
</div>
CSS
* {
margin: 0px;
padding: 0px;
}
#nav ul {
list-style-type: none;
font-size: 0px;
}
#nav ul li {
display: inline-block;
position: relative;
}
#nav ul li a {
padding: 10px;
display: block;
font-size: 12px;
text-decoration: none;
font-family: sans-serif;
border: 1px solid #008080;
margin: 5px;
}
#nav ul li a:hover {
background: #a1a1a1;
}
#nav ul ul {
display: none;
}
#nav ul li:hover > ul {
position: absolute;
display: block;
width: 100%;
}
My only problem is the li items are not shown properly under each parent li. I need a solution and for further code inspection I have a jsFiddle link.
I have a solution of your problem .you have to do some changes in your css sheet .I add a new block on content in css sheet which helps you to solve your problem.
* {
margin: 0px;
padding: 0px;}
#nav ul {
list-style-type: none;
font-size: 0px;
}
#nav ul li {
display: inline-block;
position: relative;
}
#nav ul li a {
padding: 10px;
display: block;
font-size: 12px;
text-decoration: none;
font-family: sans-serif;
border: 1px solid #008080;
margin: 5px;
}
#nav ul li a:hover {
background: #a1a1a1;
}
#nav ul ul {
display: none;
}
#nav ul li:hover > ul{
position: absolute;
display: block;
width: 100%;
}
#nav ul ul li:hover > ul{
position: absolute;
margin-left:100px;
top:0px;
display: block;
width: 100%;)/* CSS Document */
Trying adding display:block; to your top level hover class
#nav ul li a:hover {
background: #a1a1a1;
display:block;
}
I came across this which may be useful for you http://htmldog.com/techniques/dropdowns/
I'm trying to write a simple HTML+CSS menu without any absolute positioning or JS. My problem is regarding submenus, where it either expand the current selected item or displace it:
The HTML is straightforward:
<ul id="menu">
<li>Item 1</li>
<li>Folder 1
<ul>
<li>Item 2</li>
</ul>
</li>
<li>Item 3</li>
</ul>
And so is the CSS:
#menu, #menu ul {
border-style: solid;
border-width: 0px;
border-top-width: 1px;
float: left;
list-style: none;
margin: 0px;
padding: 0px;
width: 180px;
}
#menu li ul {
background-color: cyan;
display: none;
position: relative;
right: -168px;
width: auto;
}
#menu li:hover ul {
display: block;
}
#menu li {
border-style: solid;
border-width: 1px;
border-top-width: 0px;
padding: 10px;
}
#menu li:hover {
background-color: lightgrey;
font-weight: bold;
}
I thought the submenu could only affect the layout after being repositioned, which seems
to not be the case here. I'm a bit at a loss.
Using this type of menu pattern, you should use position:relative on the parent LI of the sub-menu, and position:absolute on the UL child menu. The allows the child element to appear outside of the layout flow, relative to its parent.
It's also good practice to put all non-position styling on the A-tag inside each LI and use display:block. It would be difficult for you to style the text on "Folder 1" without it.
Simple example: http://jsfiddle.net/Diodeus/jejNy/127/
Use position:absolute on the ul and position:relative on the LI:
HTML:
<ul id="menu">
<li>Item 1</li>
<li>Folder 1
<ul>
<li>Item 2</li>
</ul>
</li>
<li>Item 3</li>
</ul>
CSS:
#menu, #menu ul {
border-style: solid;
border-width: 0px;
border-top-width: 1px;
float: left;
list-style: none;
margin: 0px;
padding: 0px;
width: 180px;
}
#menu li ul {
background-color: cyan;
display: none;
position: absolute;
top:-1px;
left: 178px;
}
#menu li:hover ul {
display: block;
}
#menu li {
position:relative;
border-style: solid;
border-width: 1px;
border-top-width: 0px;
padding: 10px;
}
#menu li:hover {
background-color: lightgrey;
font-weight: bold;
}
Check out this CodePen
If you try that in FireFox:
http://jsfiddle.net/rJUKT/2/
it works fine. The dropdown menu shows at the bottom of its parent like that:
But if you try it with IE7, the dropdown menu shows at the right, like that:
Any idea why it does that?
HTML
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<ul id="menu">
<li>
<span>Menu 1</span>
<ul>
<li>Link 1.1</li>
<li>Link 1.2</li>
<li>Link 1.3</li>
<li>Link 1.4</li>
</ul>
</li>
<li>
<span>Menu 2</span>
<ul>
<li>Link 2.1</li>
<li>Link 2.2</li>
<li>Link 2.3</li>
<li>Link 2.4</li>
</ul>
</li>
</ul>
CSS
#menu { width: 100%; float: right; list-style: none; margin-top: 5px; color: #2A4153; }
#menu li {
float: left;
font-size: 17px;
font-weight: bold;
background-color: #e1f1ff;
border: 1px solid #93b5d4;
margin: 0 1px 0 1px;
padding: 4px 0 0 0;
border-bottom: none;
height: 20px;
}
#menu li a, #menu li span { padding: 4px 7px 2px 7px; cursor: pointer; }
#menu li ul {
clear: both;
position:absolute;
display:none;
padding:0;
list-style:none;
width: 150px;
margin: -1px 0 0 -2px;
}
#menu li ul li {
float: left;
width: 150px;
border: 1px solid #93b5d4;
border-top: none;
font-size: 15px;
font-weight: normal;
background-image: url('16x16/eye.png');
background-position: 4px 4px;
background-repeat: no-repeat;
-moz-border-radius: 0;
}
#menu li ul li a, #menu li ul li span { display:block; padding-left: 25px; }
#menu li ul li:hover { background-color: #e5f6e8; border: 1px solid #93d4a2; border-top: none; }
#menu li:hover { background-color: #e5f6e8; border: 1px solid #93d4a2; border-bottom: none; }
JS
$(function() {
$('#menu li').hover(
function () {
//show its submenu
$('ul', this).slideDown(100);
},
function () {
//hide its submenu
$('ul', this).slideUp(100);
}
);
});
Thanks!
You need to set "top" and "left" properties for dropdown UL
You can check it out this. Some css properties updated in this
http://jsfiddle.net/vkVHC/
If that's the only reason you're using jQuery (for the dropdown effect on hover), you may as well do it using CSS instead (and thus save many kBs being loaded by the site). Also, Alexei's answer is correct.