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).
Related
I've made this navigation with CSS and now I'm trying to make it responsive using media queries, but I can't get the submenus to show properly. In responsive mode, I'd like to display the full menu with all links neatly underneath each other in one box. Would really appreciate some help!
https://jsfiddle.net/4L8ghza0/1/
HTML:
<header>
<div class="nav">
<ul>
<li>Start</li>
<li>Submenu1 <span class="arrow">▼</span>
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
</ul>
</li>
<li>Service</li>
<li>Events</li>
<li>Submenu2 <span class="arrow">▼</span>
<ul>
<li>link4</li>
<li>link5</li>
<li>link6</li>
</ul>
</li>
</ul>
</div>
</header>
CSS:
header {
top: 0px;
background-color: #EFE7D2;
position: fixed !important;
width: 100%;
height: 125px;
z-index: 10;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.12), 0 2px 10px 0 rgba(0,0,0,0.12);
}
.nav {
float: right;
padding: 40px 80px 0 0;
}
ul {
list-style-type: none;
}
ul li {
font-family: Arial, sans-serif;
font-size: 95%;
text-transform: uppercase;
display: inline-block;
position: relative;
float: left;
margin: 5px;
}
ul li a {
padding: 8px 10px;
display: block;
text-decoration: none;
color: #000000;
}
ul li:hover{
background: #CCB18E;
}
.nav .arrow {
font-size: 70%;
line-height: 0%;
}
ul li ul {
display: none;
position: absolute;
width: 210%;
padding: 0;
}
ul li ul li {
display: block;
text-decoration: none;
background: #CCB18E;
padding: 0px 10px;
margin: 0;
width: 100%;
}
ul li ul li:hover {
display: block;
background: #DAC7AD;
text-decoration: none;
padding: 0px 10px;
margin: 0;
width: 100%;
}
ul li:hover ul{
display:block;
visibility:visible;
}
ul ul li:hover li{
display:block;
}
.current {
background:#CCB18E;
color: #000000;
}
#menu-icon {
display: hidden;
width: 40px;
height: 40px;
background: url(https://cdn0.iconfinder.com/data/icons/social-messaging-productivity-4/128/menu-2-512.png) center;
}
a:hover#menu-icon {
border-radius: 4px 4px 0 0;
}
#media screen and (max-width: 1080px){
#menu-icon {
display: inline-block;
}
ul li ul li a {
display: block;
}
ul, ul:active {
display: none;
z-index: 1000;
position: absolute;
padding: 10px;
background: #EFE7D2;
right: 100px;
top: 60px;
width: 25%;
border: 1px #5F7B65 solid;
}
.nav:hover ul {
display: block;
}
ul li:hover ul li ul li {
display: none;
}
}
#JD26 I find it easier using flex-box. You can set .nav {display: flex; flex-direction:column;} in your media query. This should get you started. Or with block display: .nav {display: block}.
This should be vertical menu with 2nd level sub menu as you can see 2 2.1 2.2
I tried many tutorials but just couldn't make it work i know lot of code for sub-menu is missing but honestly i have no idea what to do with it to fix it .
.menu ul li a {
margin: 2px;
padding: 2px;
font-family: comic sans ms;
border-bottom: 1px solid #ccc;
height: 25px;
width: 160px;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
border-color: red;
cursor: pointer;
cursor: url(link.cur), auto;
text-decoration: none;
color: white;
padding: 9px 11px;
background-color: grey;
display: block;
}
.menu ul li a:visited {
color: white;
}
.menu ul li a:hover,
.menu_simple ul li .current {
color: white;
background-color: #0099CC;
/* green #5FD367 */
}
.menu ul li ul {
position: absolute;
display: none;
}
.menu ul li:hover ul {
left: 150px;
top: 0px;
display: block;
}
.menu ul li ul li a {
color: #454444;
display: inline-block;
width: 120px;
}
<div class="menu">
<ul>
<li>1
</li>
<li>2
<ul>
<li>2.1
</li>
<li>2.2
</li>
</ul>
<li>3
</li>
<li>4
</li>
</ul>
</div>
Here you go.. why did you use absolute to .menu ul li ul this code was causing problem !!
.menu ul li a {
margin: 2px;
padding: 2px;
font-family: comic sans ms;
border-bottom: 1px solid #ccc;
height: 25px;
width: 160px;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
border-color: red;
cursor: pointer;
cursor: url(link.cur), auto;
text-decoration: none;
color: white;
padding: 9px 11px;
background-color: grey;
display: block;
}
.menu ul li a:visited {
color: white;
}
.menu ul li a:hover,
.menu_simple ul li .current {
color: white;
background-color: #0099CC;
/* green #5FD367 */
}
.menu ul li ul {
display: none;
}
.menu ul li:hover ul {
left: 150px;
top: 0px;
display: block;
}
.menu ul li ul li a {
color: #454444;
display: inline-block;
width: 120px;
}
<div class="menu">
<ul>
<li>1
</li>
<li>2
<ul>
<li>2.1
</li>
<li>2.2
</li>
</ul>
<li>3
</li>
<li>4
</li>
</ul>
</div>
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;}
Problem: Why when i go with the mouse over "About" the sub-menu appears but if i try to go into any of it items it disappears?
Part of my style.css:
#menu {
padding: 0 45px 0 45px;
position: relative;
background: #209D9D url(images/img02.gif) repeat-x top left;
margin: 0 0 0 0;
height: 60px;
line-height: 60px;
width: 890px;
border-top: solid 1px #5AD7D7;
text-shadow: 0 1px 1px #007D7D;
}
#menu a {
text-decoration: none;
color: #ffffff;
font-size: 1.25em;
letter-spacing: -1px;
}
#menu a:hover{
color: #136F6F;
}
#menu ul {
list-style: none;
text-align: center;
}
#menu ul li {
padding: 0 20px 0 20px;
display: inline;
position: relative;
list-style: none;
}
#menu ul li.first {
padding-left: 0;
}
#menu ul li:hover ul{
visibility:visible;
}
#menu ul ul{
position: absolute;
top: 35px;
visibility: hidden;
}
#menu ul ul li{
position: relative;
float: left;
margin: 0;
padding:0;
}
#menu ul ul li a{
display: block;
text-decoration:none;
text-align: center;
height: 55px;
line-height: 55px;
width: 200px;
background-color: #209D9D;
color: white;
}
#wrapper {
position: relative;
width: 980px;
margin: 75px auto 0 auto;
background: #FFFFFF;
}
Part of my index.html:
<div id="wrapper">
<div id="menu">
<ul>
<li class="first current_page_item">Homepage</li>
<li>Blog</li>
<li>Papers</li>
<li>Projects</li>
<li>About
<ul>
<li>Me</li>
<li>Curriculum Vitae</li>
<li>Contact Me</li>
</ul>
</li>
<!-- <li class="last">Contact</li> -->
</ul>
<br class="clearfix" />
</div>
There is a gap between your menu and submenu, when your cursor goes over this gap, the submenu disappears, try changing "top: 35px;" in "#menu ul ul" to "top: 20px;"
Change padding of #menu ul li to padding: 20px;
Play around the values.
Live demo
EDIT
Instead of changing the li's padding, I had added below css:
#menu ul li a {
padding:20px 0;
}
#menu ul ul li a {
padding: 0;
}
Demo Here
Try it.
Background: my nav drop-down menu in a header banner was working just fine until I positioned a facebook login button nearby within the header banner space. Now that I've done this, my nav doesn't function or style. I'm sure I'm making some basic error(s) or oversight(s), but I don't understand quite why these two elements are operating in tandem like this - if anyone could shed some light on it I'd greatly appreciate it:
<div id="header">
<div class="headercontainer">
<ul id=navigation">
<li>About<span></span>
<ul>
<li>About</li>
<li>Team</li>
<li>Blog</li>
<li>Terms of Service</li>
<li>Privacy Policy</li>
<li>Intellectual Property Notice</li>
</ul>
</li>
</ul> <!--end Navigation-->
</div><!-- end headercontainer-->
</div> <!-- end header -->
<div id="login">
<div class="fb-login-button" scope="email">Login with Facebook</div>
</div>
css:
#header {position: relative; top: 0; right: 0; left: 0; height: 44px; background-color: #3B3B3B;}
.headercontainer li {position: relative; display: inline; font-size: 1.1em;}
.headercontainer .nav {position: relative; top: 15px; left: 420px; display: inline-block; color: #FFF;}
.headercontainer .nav span {position: absolute;}
.headercontainer li:hover .nav {color: #FF2A2A;}
.headercontainer li ul {position: relative; display: none; width: 100px; left: 880px; z-index: 108; background-color: #fff; border-top: 1px solid #cccaca; box-shadow: 0 0 2px 2px #888; -moz-box-shadow: 0 0 2px 2px #888; -webkit-box-shadow: 0 0 2px 2px #888;}
.headercontainer li:hover ul {display: block;}
.headercontainer li ul li:first-child a {padding-top: 10px;}
.headercontainer li ul li:last-child a {padding-bottom: 10px;}
.headercontainer li ul a {display: block; padding: 5px; text-align: left; font-weight: normal; color: #0b0808;}
.headercontainer li ul a:hover {color: #cb0000; text-decoration: none; background-color: #e1dfdf;}
.headercontainer li ul a:active {color: #fff; background-color: #FF2A2A;}
#login .fb-login-button {position: relative; margin-top: -31px; left: 315px;}
/* ==== NAV BAR ==== */
#navigation {position: relative; float: right; z-index: 110;}
#navigation ul {z-index: 108; top: 28px; left: -10px;}
#navigation .nav {height: 28px; padding: 14px 8px 0 8px;}
#navigation .nav span {top: 28px; right: 4px; width: 8px; height: 6px;}
#navigation li:hover .nav {text-decoration: none; text-shadow: 0 1px rgba(255,255,255,0.3); background-color: #e1dfdf;}
#navigation li:active .nav {color: #fff; text-shadow: 0 -1px rgba(34,25,25,0.3); background-color: #ff2a2a;}`
script:
<script> window.fbAsyncInit = function() {
FB.init({
appId : '...',
status : true,
cookie : true,
xfbml : true,
oauth : true,
});
};
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
<ul id=navigation"> is missing quotes.