I put in a lot of relative and z-index because it seems like that's what I need to do but I'm confused.
the HTML is:
<script type="text/javascript">
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" hover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" hover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body id="body">
<div id="wrap" class="opaque">
<!-- header n menu area -->
<div id="header">
<div id="logo">
<img src="images/logo.jpg" width="918" height="142" /> </div>
<div id="menu" >
<ul id="nav">
<li>HOME
<li>DOORS
<ul id="dropm">
<li><a href="pivot.html"> PIVOT </li>
<li> <a href="entry.html">ENTRY </li>
<li> <a href="bifold.html">BIFOLD </li>
<li> <a href="internal.html">INTERNAL </li>
</ul>
</li>
<li >WINDOWS</li>
<li > TIMBER FLOORING </li>
<li>STAIRCASES</li>
<li>ABOUT US</li>
<li>CONTACT US</li>
</ul>
</div>
</div>
#wrap {
background-color:#FFF;
width: 960px;
position:relative;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
/*header area*/
#logo {
width:940px;
padding-top: 20px;
padding-left: 20px;
}
#menu {
background-color: #990000;
height:40px;
margin-bottom:200px;
margin-bottom-color:none;
margin-left:auto;
margin-right:auto;
z-index:1;
position:relative;
}
* html #menu {
z-index:2;
height:35px;
}
#nav {
margin-left: 30px;
position:relative;
}
#nav li{
display: inline;
list-style: none;
color: #FFF;
margin-right: 10px;
padding-right:3px;
font-weight:bold;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
li { /* all list items */
float: left;
position: relative;
}
#menu li {
display: inline;
list-style-type: none;
margin-right: 10px;
padding-right: 50px;
color: #ffffff;
padding: 10px 15px 8px 15px;
/* background-color:#2C5463;*/
position:relative;
float:left;
white-space: nowrap;
}
li ul {
display:none;
position: absolute;
top: 1.5em;
left: 0.2em;
}
li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
margin-top: -40px;
margin-left: -7px;
}
ul li a:hover, ul li a.hover {
background:#FF6600;
}
li:hover ul, li.hover ul {
display: block;
position:absolute;
font-size: 11px;
margin-top:20px;
margin-left:-5px;
text-align:left;
width: 40px;
}
* html li:hover ul, li.hover ul {
display: block;
position:absolute;
font-size: 11px;
margin-top:17px;
text-align:left;
width: 40px;
}
#nav li:hover li, #nav li.hover li {
float: left;
}
#nav li:hover, #nav li.hover {background:#CC6600; position:relative;}
#dropm { z-index:1000;}
#dropm li {
width:60px;
background:#990000;
}
#dropm li{
display:block;
list-style-type: none;
width:58px;
color: #FFF;
border-top: 1px solid #fffff;
color: #ffffff;
padding: 10px 15px 10px 15px;
background: #990000;
white-space: nowrap;
}
* html ul li { float: left; }
* html ul li a { height: 1%; }
Found it,
have to change the wmode to transparent
Related
I have a drop-down menu inside a nav. Its parent has a max-width of 500px.
I want the drop-down to open on entire page.
I tried using 100vw but that way the dropdown is not aligned properly.
Additionally I cant move my navbar outside the max width container.
Check the code here - https://codepen.io/chiragjain94/pen/Vwwbwop?editors=1100
<div class="max">
<nav>
<ul>
<li>Home</li>
<li>Tutorials
<ul>
<li>Photoshop </li>
<li>Illustrator </li>
</ul>
</li>
<li>User Experience</li>
</ul>
</nav>
Css
.max{
max-width:500px;
margin: 0 auto;
}
nav {
text-align:center;
width: 100%;
background: #bebebe;
padding: 0;
margin: 0;
height: 60px;
position:relative;
}
nav ul {
background: #bebebe;
list-style:none;
padding:0 20px;
margin: 0;
height: 60px;
}
nav ul li {
display: inline-block;
}
nav ul li a {
color:#333333;
display:block;
padding:0px 40px;
text-decoration:none;
float: left;
height: 60px;
line-height: 60px;
}
nav ul li:hover {
background: #333333;
}
nav ul li:hover > a{
color:#FFFFFF;
}
nav ul li:hover > ul {
display:block;
}
nav ul ul {
background: red;
padding:0;
text-align: center;
display:none;
width: 100vw;
position: absolute;
top: 60px;
left:-0px;
right:0px;
}
Dropdown menu is taking 100vw width but how can I get it to left 0 of entire page??
Remove position: relative from nav.
If the parent's position is set to relative, a child element with position: absolute assumes an absolute position relative to its parent.
.max{
max-width:500px;
margin: 0 auto;
}
nav {
text-align:center;
width: 100%;
background: #bebebe;
padding: 0;
margin: 0;
height: 60px;
}
nav ul {
background: #bebebe;
list-style:none;
padding:0 20px;
margin: 0;
height: 60px;
}
nav ul li {
display: inline-block;
}
nav ul li a {
color:#333333;
display:block;
padding:0px 40px;
text-decoration:none;
float: left;
height: 60px;
line-height: 60px;
}
nav ul li:hover {
background: #333333;
}
nav ul li:hover > a{
color:#FFFFFF;
}
nav ul li:hover > ul {
display:block;
}
nav ul ul {
background: red;
padding:0;
text-align: center;
display:none;
width: 100vw;
position: absolute;
top: 60px;
left:-0px;
right:0px;
}
<div class="max">
<nav>
<ul>
<li>Home</li>
<li>Tutorials
<ul>
<li>Photoshop </li>
<li>Illustrator </li>
</ul>
</li>
<li>User Experience</li>
</ul>
</nav>
Plz change "nav" class styles or remove the position..
css
nav {
position: static;
}
I have two boxes that need to be locked on this webpage but when I try to lock them it changes the size and the body scrolls over it.
I need the header to show over everything and be locked.
The code is here:
http://jsfiddle.net/dwhs/gtehep16/
HTML
<body>
<!--==============================header=================================-->
<header>
<div class="head-box1">
<div class="main">
<h1><a class="logo" href="index.html">pro web hosting</a></h1>
<nav>
<div style="text-align:right;"> <span class="link2">Account Manager | Cart | Register | Questions?</span></span><span class="phone"><br>
Call us: <strong>(213)984-HOST 24/7 Support</strong></span><span class="nothing"><br>
</span> </div>
</nav>
</div>
<div class="clear"></div>
</div>
<div id='cssmenu'>
<ul>
<li class='active'><a href='/'><span>Home</span></a></li>
<li><span>Web Hosting</span></li>
<li><span>Reseller</span></li>
<li><span>Dedicated</span></li>
<li><span>Support</span></li>
<li><a href='/affiliates/index.htm'><span>Affiliates</span></a></li>
<li class='last'><a href='/why-us.html'><span>Why us</span></a></li>
</ul>
</div>
CSS
header {
width:100%;
position:relative;
z-index:2;
}
.logo {
display:block;
width:300px;
height:75px;
text-indent:-5000px;
background:url(/images/logo.png) 0 0 no-repeat;
}
.nothing {
color: #ffffff;
font-size:20px;
text-decoration:none;
padding: 10px 0px 0px 0px;
}
.head-box1 {
padding-bottom:10px;
background-color: #F4F3F3;
}
.main {
width:960px;
padding:0;
margin:0 auto;
}
body{
color:#333;
position:relative;
min-width:980px;
font-family: Open Sans, Helvetica, sans-serif;
font-size: 14px;
line-height: 20px;
text-transform: none;
background-color: #F4F3F3;
background-repeat: no-repeat;
background-position: center 0;
}
html,body{height:100%;}
p{padding-bottom:18px;}
a{
color:#333;
outline:none;
cursor:pointer;
text-decoration:none;
}
/*** MENU ***/
.sf-menu, .sf-menu * {
margin: 0;
padding: 5;
list-style: none;
}
nav {
float:right;
margin-right:10px;
padding-top:25px;
width:500px;
}
.sf-menu {
line-height: 1.0;
}
.sf-menu li {
float: right;
position: relative;
margin-left:20px;
}
.sf-menu a {
display: block;
position: relative;
color:#CCCCCC;
text-transform:capitalize;
font-size:12px;
line-height:16px;
}
.sf-menu a:hover,
.sf-menu a.active,
.sf-menu li.sfHover > a {
color:#FFFFFF;
text-decoration:none;
}
.sf-menu ul a:hover,
.sf-menu ul li.sfHover > a {
color:#1f4460;
}
.sf-menu ul ul a:hover,
.sf-menu ul ul li.sfHover > a {
color:#58a5c4;
}
.sf-menu ul {
position: absolute;
top: -999em;
background:url(/images/menu-bg.gif) repeat-x 0 0 #4f95ba;
width: 160px; /* left offset of submenus need to match (see below) */
padding-top: 19px;
padding-right: 0;
padding-bottom: 8px;
padding-left: 0;
}
.sf-menu ul:after {
display:block;
position:absolute;
width:11px;
height:6px;
background:url(../images/marker1.png) no-repeat 0 0;
top:-6px;
left:14px;
content:' ';
}
.sf-menu ul ul:after {
display:block;
position:absolute;
width:5px;
height:9px;
background:url(../images/marker2.png) no-repeat 0 0;
top:13px;
left:-5px;
content:' ';
}
.sf-menu ul ul {
position: absolute;
top: -999em;
padding:10px 0 6px;
background:url(../images/menu-bg1.gif) repeat-x 0 0 #1e4460;
width: 140px; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {
width: 100%;
margin:0 25 30px;
padding:20px 0 0px;
text-align:center;
}
.sf-menu ul a {
font-size:12px;
color:#fff;
}
.sf-menu li:hover {
visibility: inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
left: -17px;
top: 32px; /* match top ul list item height */
z-index: 99;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
top: -999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
left: 151px;
top: -8px;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
top: -999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
left: 10em; /* match ul width */
top: 0;
}
The page is here http://dwhswebsite.com Trying to lock everything from the menu and above. So everything scrolls under it.
Thanks!
Your HTML markup is wrong. Your <header> includes much of your body content. Make the following changes.
Updated Header HTML, everything else should go below </header>
<header>
<div class="head-box1">
<div class="main">
<h1><a class="logo" href="index.html">pro web hosting</a></h1>
<nav>
<div style="text-align:right;"> <span class="link2">Account Manager | Cart | Register | Questions?</span><span class="phone"><br>
Call us: <strong>(213)984-HOST 24/7 Support</strong></span><span class="nothing"><br>
</span> </div>
</nav>
</div>
<div class="clear"></div>
</div>
<div id="cssmenu">
<ul>
<li class="active"><span>Home</span></li>
<li><span>Web Hosting</span></li>
<li><span>Reseller</span></li>
<li><span>Dedicated</span></li>
<li><span>Support</span></li>
<li><span>Affiliates</span></li>
<li class="last"><span>Why us</span></li>
</ul>
</div>
</header>
CSS
header {
width: 100%;
position: fixed;
z-index: 2;
}
body {
top: 150px;
}
I am using the CSS :before pseudo-selector to create a block above the first item in a drop down list. I've been having trouble getting this block created with the pseudo-selector to be the same width as the <li> above it.
For example when you hover over "About" the pseudo block that appears beneath it should be the same width as the block that contains the word "About" and so on for the other 3 blocks.
Here's a fiddle to what I have got so far: http://jsfiddle.net/jh67P/
Here's my HTML:
<nav>
<ul class="main">
<li>About
<ul class="secondary">
<li>Learn About Us</li>
<li>Nice things to know</li>
</ul>
</li>
<li>Products
<ul class="secondary">
<li>Product One</li>
<li>Product Two</li>
</ul>
</li>
<li>Features
<ul class="secondary">
<li>Something Nice</li>
<li>Another nice thing</li>
</ul>
</li>
</ul>
</nav>
Here's the CSS:
nav .main {
font-size: 1em;
margin: 0;
padding: 0;
list-style: none;
}
.main > li {
display: block;
position: relative;
float: left;
}
.main > li a {
display: block;
text-decoration: none;
color:#FFF;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #1e7c9a;
margin-left: 1px;
white-space: nowrap;
}
.main > li a:hover {
background: #3b3b3b;
color:#FFF;
}
.secondary {
display:none;
list-style: none;
margin: 0;
padding: 0;
}
.main li:hover .secondary {
display: block;
position: absolute;
}
.main li:hover ul li {
float: none;
font-size: 1em;
}
.main > li:hover a { background: #3b3b3b; }
.main > li:hover li a:hover {
background: #1e7c9a;
}
.main li:hover ul:before {
content:'';
display:block;
width:100%;
height:10px;
border-bottom:10px solid #1e7c9a;
border-right: 10px solid transparent;
}
Edit: Using absolute positioning I was able to achieve the effect. Here's the updated CSS.
nav .main {
font-size: 1em;
margin: 0;
padding: 0;
list-style: none;
}
.main > li {
display: block;
position: relative;
float: left;
}
.main > li a {
display: block;
text-decoration: none;
color:#FFF;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #1e7c9a;
margin-left: 1px;
white-space: nowrap;
}
.main > li a:hover {
background: #3b3b3b;
color:#FFF;
}
.secondary {
display:none;
list-style: none;
margin: 0;
padding: 0;
}
.main li:hover .secondary {
display: block;
position: absolute;
top:40px;
}
.main li:hover ul li {
float: none;
font-size: 1em;
}
.main > li:hover a { background: #3b3b3b; }
.main > li:hover li a:hover {
background: #1e7c9a;
}
.main > li:hover:after {
content:'';
display:block;
width:100%;
height:10px;
border-bottom:10px solid #1e7c9a;
border-right: 10px solid transparent;
position:absolute;
top:20px;
margin-left:1px;
}
How about changing:
.main li:hover ul:before {
To:
.main > li:hover > a:after {
Is that what you are after?
jsFiddle
The Menus don't drop down as they did in IE7.Can anyone help…please!?
You have to click on the title for it to show up, otherwise the menu is hidden.
CSS below:
#top_nav{ width: 810px; float: left; background: #DADADA; margin: 0; position: relative; z-index: 100; padding: 0;}
#top_nav ul {margin: 0 0 0 10px; padding: 0; list-style: none; float: left; width: 800px; height: 40px; }
#top_nav li {float: left; margin: 0; padding: 0; width: auto; font-weight: normal; cursor: pointer; white-space: nowrap; font-size: 100%; color: #000; line-height: 150%;}
#top_nav li a{text-decoration: none; color: #000; width: auto; display: block; padding: 8px 18px 7px 18px; line-height: 25px; text-align: center; font-weight: normal; }
#top_nav li ul {position: absolute; left: -999em; height: auto; width: 234px; w\idth: 224px; font-weight: normal; padding: 0px 0 0 0; margin: 0 0 0 0; border-bottom: 1px solid #aaa; }
#top_nav li li {padding: 0; background-color: #DADADA; font-size: 90%; line-height: 120%;}
#top_nav li li a{line-height: auto; text-align: left; width: 212px; w\idth: 202px; padding: 3px 10px; border-top: 1px solid #aaa; border-left: 1px solid #aaa; border-right: 1px solid #aaa; }
#top_nav li li a:hover{ background-color: #92D400; color: #fff;}
#top_nav li:hover ul ul, #top_nav li:hover ul ul ul, #top_nav li.sfhover ul ul, #top_nav li.sfhover ul ul ul {left: -999em;}
#top_nav li:hover ul, #top_nav li li:hover ul, #top_nav li li li:hover ul, #top_nav li.sfhover ul, #top_nav li li.sfhover ul, #top_nav li li li.sfhover ul { left: auto;}
#top_nav li:hover, #top_nav li.sfhover, #top_nav a.active{ background-color: #92D400; }
#sub_nav{ background: #002F5F; float: left; width: 810px; margin: 0; }
#sub_nav ul{ float: left; width: 790px; margin: 0 0 0 10px; padding: 0; list-style: none; }
#sub_nav li{ float: left; margin: 0; padding: 0; font-size: 90%; font-weight: bold; text-align: center; }
#sub_nav li a{ color: #fff; display: block; height: 105px; padding: 8px 30px 0 30px; text-decoration: none; }
#sub_nav li a:hover,
#sub_nav li a.active{ background-color: #DADADA; color: #002F5F; }
#section_nav{ float: left; margin: 1px 0 0px 0; width: 810px; background: #002F5F; }
#section_nav ul{ float: left; width: 808px; margin: 0; padding: 0; list-style: none; }
#section_nav li{ float: left; margin: 0; padding: 0; font-size: 70%; font-weight: bold; }
#section_nav li a{ color: #fff; display: block; padding: 8px 10px; border-right: 1px solid #fff; border-bottom: 1px solid #fff; text-decoration: none; }
#section_nav li a:hover,
#section_nav li a.active{ background: #92D400;}
#section_nav img{ float: left; margin: 2px 0 0 2px;}
The dropdowns don't work automatically in IE8 and you also have to click on the title for it to show up.
HTML as listed below:
<link href="css/stylesheet.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery.min.1.7.1.js"></script>
<link rel="stylesheet" href="js/nivo-slider/nivo-slider.css" type="text/css" media="screen" />
<script src="js/nivo-slider/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(window).load(function() {
var total = jQuery('#slider img').length;
var rand = Math.floor(Math.random()*total);
jQuery('#slider').nivoSlider({
animSpeed: 1000, // Slide transition speed
pauseTime: 4000, // How long each slide will show
directionNav: false,
effect: 'boxRainGrow'
});
});
</script>
<script type="text/javascript">
$(function(){
$('a[href*=#]').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body').animate({scrollTop: targetOffset}, 500);
return false;
}
}
});
});
</script>
</head>
<body>
<a name="top"></a>
<div id="wrap"><!-- START OF WRAP -->
<div id="header"><!-- START OF HEADER -->
<img src="images/buttons/btn_back_to_hub.png" width="117" height="27" border="0">
<img src="images/txt/txt_global_energy_transformation.png" width="361" height="43" id="logo">
<br clear="all">
<div id="slider" class="nivoSlider">
<img src="images/headers/New-org-chart.png" width="730" height="162">
<img src="images/headers/New-appointments.png " width="730" height="162"></div>
</div><!-- END OF HEADER -->
<div id="top_nav"><!-- START OF TOP NAVIGATION -->
<ul>
<li>Home</li>
<li>GET Information
<ul>
<li>Latest news</li>
<li>Appointments & vacancies</li>
<!-- <li>Blogs</li> -->
<li>Change champions & SMEs</li>
<li>Stakeholders</li>
</ul>
</li>
<li>GET Involved</li>
<li>GET Answers
<ul>
<li>General</li>
<li>Service line-specific
</ul>
</li>
<li>GET in touch</li>
<li>Service lines/functions
<ul>
<li>Inspection services</li>
<li>Compliance services</li>
<li>Asset integrity services</li>
<li>Drilling integrity services</li>
<li>Consultancy services</li>
<li>Business development services</li>
<li>Business services</li>
<li>Finance</li>
<li>Human resources</li>
<li>Technology</li>
<li>Strategic projects</li>
</ul>
</li>
</ul>
</div><!-- END OF TOP NAVIGATION -->
"z-index: x;" resolved my conflict between CSS drop-down menus and a jQuery slider (slideshow/carousel). It was an easy fix to an issue many people seem to be having.
Try putting that under the CSS style for the drop-down ul.
Example
.navbar ul .subnav {
display: none;
z-index: 3;
}
You can play around with the number (x).
I need to modify this pure css dropdown menu to be a dropup. Saw a similar post, but can't seem to modify mine. Here is the css code being used for the dropdown, which is working as expected. I tried using bottom: 100% within ul.drop li.hover, ul.drop li:hover {, but that didn't work. Any suggestions.
HTML
<body>
<ul id="nav" class="drop">
<li>Home</li>
<li>Portfolio
<ul>
<li>Horses
<ul>
<li>Horses 1
<li>Horses 2
<li>Horses 3
</ul>
</li>
<li>Dogs</li>
<li>People</li>
<li>Stills</li>
</ul>
</li>
<li>Order</li>
<li>Contact Me
</li>
</ul>
</li>
</ul>
CSS
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
width: 130px;
text-align: center;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 0px solid #ffffff;
padding: 0px 0px 0px 0px;
background: transparent;
# margin-left: 1px;
white-space: nowrap;
}
ul li a:hover {
background: transparent;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
width: 160px;
text-align: left;
}
li:hover a { background: transparent; }
li:hover li a:hover {
background: #3ba110;
}
ul.drop a {
display:block; color: #fff; font-family: Verdana; font-size: 14px; text-decoration: none;
}
ul.drop, ul.drop li, ul.drop ul {
list-style: none; margin: 0; padding: 0; border: 1px solid #fff; background: #1302CB; color: #fff;
}
ul.drop {
position: relative; z-index: 597; float: left;
}
ul.drop li {
float: left; line-height: 1.3em; vertical-align: middle; zoom: 1; padding: 5px 10px;
}
ul.drop li.hover, ul.drop li:hover {
position: relative; z-index: 599; cursor: default; background: #3ba110;
}
ul.drop ul {
visibility: hidden; position: absolute; bottom: 100%; left: 0; z-index: 598; width: 160px; background: #cccccc; border: 1px solid #fff;
}
ul.drop ul li {
float: none;
}
ul.drop ul ul {
top: -2px; left: 100%;
}
ul.drop li:hover > ul {
visibility: visible
}
I didn''t use your CSS because I am not sure what is going on without HTML. Anyways I created a basic demo of what I think you are trying to accomplish.
http://jsfiddle.net/krishollenbeck/JgWEL/45/
HTML
<div class="page">
<ul>
<li class="navlink">
MENU ITEM:
<ul class="dropmenu">
<li>Link One</li>
<li>Link Two</li>
<li>Link Three</li>
</ul>
</li>
</ul>
</div>
CSS
.page {
width:200px;
height:100px;
position:fixed;
top:50%;
bottom:50%;
}
.dropmenu {
display:none;
border:1px solid #CCC;
background-color:#eee;
width:150px;
padding:5px;
position:absolute;
top:-70px;
}
.navlink {
background-color:#000;
padding:5px;
}
.navlink > a {color:#FFF;}
.navlink:hover > .dropmenu {display:block;}