I have a menu that is made up of ul and li the list items nest SVGs as the items that will show up in the menu. inside the first ul, li nested another ul,li that shows up on hover as a submenu, everything works fine but I want to create a gap filler around my SVGs in the item menu so that when I hover a little bit away from the image, the sub menu would still appear.
I searched that and find some ways involved using the pseudo class ::after, but did not manage to make it work
This is my code
<div id="menu">
<ul>
<li> <img src="this is just for code"/>
<ul>
<li> link</li>
<li> link2/li>
</ul>
</li>
<li> <img src="this is just for code"/>
<ul>
<li> link</li>
<li> link</li>
</ul>
</li>
the css is
#menu ul li{
width:auto;
height:2.5em;
list-style:none;
float:left;
margin: 0em 20px 0em 20px ;
padding: 0px ;
cursor:pointer;
justify-content:space-between;
#menu ul ul li{
float:none;
width:100%;
height:auto;
padding: 1em 0;
text-align:center;
#menu ul li:hover > ul{
display:block; }
#menu ul li img{
width:inhrtit;
height:inherit;
margin: 0 0 60px 0;
position:relative;
bottom:0.6em;
}
#menu ul li:hover > ul::after{
width:auto;
height:2.5em;
padding:0px 100px;
margin: 90px;
position:absolute;
right:70px; left:90px;
pointer-events: none;
-webkit-transform: translateX(-110%);
transform: translateX(-110%);
}
#menu ul li:hover > ul::after {
pointer-events: auto;
}
Sorry my code is lousy. as the first question I hope this is not an enough dump one.
Since you're looking to increase the hover area of <li> elements, you can add padding to them.
For example, below is an example of using padding to increase the clickable area. Increasing hover area is similar.
https://jsfiddle.net/gazg1yuy/
Related
So i'm having a huge issue with my navigation. I'm trying to add a drop down menu but no matter what I try its not working out. Below is my current HTML/CSS code and if you have any idea how to fix it please help!! I also attached a picture of what i'm actually trying to make it look like.
Here's the HTML
<div class="logo"><img src="images/original/xlablogoheader.gif" width="auto" height="130"/><span> experimental social science laboratory</span></div>
<div class="menu">
<ul>
<li>About
<ul>
<li>Mission</li>
<li> Staff</li>
</ul>
</li>
<li>Participants
</li>
<li>Researchers
</li>
<li>Connect
</li>
</ul>
</div>
</div>
Here's the CSS
/* Menu */
.menu{float:right; padding:0 20px 0 0;}
.menu ul {list-style:none; margin:0; padding:0px;}
.menu ul * {margin:0; padding:0;}
.menu ul li {float:left; padding:0 20px 0 20px; height:35px;}
.menu ul li a{font-family: 'Source Sans Pro', sans-serif;color:#fff; font-size:16px;}
.menu ul li.selected a{color:#000;}
.menu ul li a:hover{color:#000;}
.menu ul ul { display: none; position: absolute; top: 25px }
.menu ul li:hover > ul { display: inherit; color:#000;}
I have modified your code, a little bit, by adding position: relative; to menu class, also some other minor changes, so it works, please check this https://jsfiddle.net/ysmr364m/
I'm doin' a navigation bar for a website. I created it etc. but when I go to one of the sub menu's it disappears..
here's my HTML:
<ul id="menu">
<li>Welcome</li>
<li>Review
<ul>
<li>Customer Reviews</li>
<li>Leave a Review</li>
</ul>
</li>
<li>Gallery</li>
<li>Discounts
<ul>
<li>Refer us!</li>
<li>Claim discount</li>
</ul>
</li>
<li>Send me an email!
</li>
</ul>
</nav>
and my CSS:
/* nav */
nav{
text-align:center;
}
nav a:visited{
color:black;
}
nav a{
text-decoration:none;
color:black;
}
#menu {
margin:0 auto;
display: inline-block;
list-style-type:none;
padding:0;
}
#menu li {
float: left;
position: relative;
list-style-type: none;
background:white;
border:1px solid black;
margin-left:10px;
margin-top:5px;
border-radius:4px;
}
#menu li a {
font-family:helvetica;
display:block;
padding:10px 10px;
text-decoration:none;
}
#menu li a:hover {
color:orange;
}
#menu li ul {
background: none repeat scroll 0 0 #ffffff;
margin-top:6px;
margin-right:1px;
padding: 2px;
}
/*#menu, #menu ul {
margin:0 auto;
padding: 0;
}*/
#menu li {
float: left;
position: relative;
list-style-type: none;
}
#menu > li:hover > ul {
display: block;
}
#menu > li > ul {
display: none;
position: absolute;
}
#menu li a {
white-space: nowrap;
}
and a little JSFiddle for ya: http://jsfiddle.net/nv741s01/
If you hover your mouse over a menu option [that has a sub-menu] long enough and then do it, it works, but people won't be willing to wait three seconds every time they want to visit a sub menu, so how do I resolve it so that it works as soon as you go to it?
any help would be much appreciated, thanks in advance :)
It was because there was a little gap between the sub menu and the menu, here is the fixed JSFiddle:
http://jsfiddle.net/nv741s01/3/
And here is what I changed:
#menu li ul {
background: none repeat scroll 0 0 #ffffff;
margin-top: 1px;
margin-right:1px;
padding: 2px;
}
I changed the margin-top to 1px.
The margin of an element doesn't capture hover events. Use padding instead. Make these changes:
#menu li {
float: left;
position: relative;
list-style-type: none;
background:white;
padding-left:10px;
padding-top:5px;
margin:0;
}
/* add this rule */
#menu li a {
border:1px solid black;
border-radius:4px;
}
#menu li ul {
background: none repeat scroll 0 0 #ffffff;
margin-top:0px;
margin-right:1px;
padding: 2px;
}
Fiddle: http://jsfiddle.net/nv741s01/2/
You are using margin to position the submenu away from the main item. Since margin isn't part of the actual element it doesn't trigger any hover behaviours. Instead, use padding on the child ul element, since padding is actually considered part of the child's box. This will make the hover behaviours trigger consistently when moving the mouse from parent to child.
You also describe that there's a 3 second delay somewhere - that's impossible from this code, and I cannot reproduce it obviously.
Your dropdowns are disappearing because as you move your mouse cursor down, there's a gap between the parent menu item and the child menu item.
When the mouse leaves the parent li space, it no longer applies to the hover state, and so the CSS rule is ignored, leaving the child menu hidden.
If it helps, I tend to use a combination of margins and padding, to 'bump together' the parent and child menus, to help navigation.
I'm tearing my hair out here.
I have horizontal dropdown menu on a site I am building. The menu is made up of an unordered list, with the dropdown part made up of hidden child elements that pop up when you roll over the parents.
In Firefox everything appears to be fine, but, in Chrome and Safari, while the last child element in each menu is acting as expected, all other child elements are shunted left by one pixel. So, in the example below, Child A3, Child B4, and Child C2 are aligned perfectly with their respective parents, while the rest are not.
Can someone please shed some light on what is going wrong here?
Code and screenshots below...
How it should look...
How it actually looks...
I have included the entire nav block of the CSS just in case I have missed something outside of the actual parent/child part.
HTML
<nav>
<div id="menu" class="menustrip">
<ul>
<li class="page_item">
Parent A
<ul class='children'>
<li class="page_item">Child A1</li>
<li class="page_item">Child A2</li>
<li class="page_item">Child A3</li>
</ul>
</li>
<li class="page_item">Parent B
<ul class='children'>
<li class="page_item">Child B1</li>
<li class="page_item">Child B2</li>
<li class="page_item">Child B3</li>
<li class="page_item">Child B4</li>
</ul>
</li>
<li class="page_item">Parent C
<ul class='children'>
<li class="page_item">Child C1</li>
<li class="page_item">Child C2</li>
</ul>
</li>
</ul>
</div>
</nav>
CSS
#menu, #main-nav{
width: 950px;
margin: 0 30px 0 0;
padding-right: 30px;
border-bottom-style: solid;
border-bottom-width: 8px;
border-bottom-color: #78B2E2;
text-align: right;
}
ul#main-nav{
list-style: none;
padding-top: 10px;
margin-right:30px;
}
.page_item, .navlink{
display: inline-block;
background-color: #243488;
height: 34px;
width: 110px;
margin-left: 1px;
text-align: center;
}
.page_item a, .navlink a{
padding-top: 4px;
display: block;
height: 34px;
width: 110px;
}
.page_item:hover, .navlink:hover{
background-color: #78B2E2;
}
.page_item:active, .navlink:active{
background-color: #78B2E2;
}
/* Hide Sub Menus by default */
#menu ul li ul.children {
display:none;
z-index:100;
}
/* Display Sub Menus on rollover of parent */
#menu ul li:hover ul.children {
display:block;
position:absolute;
top:205px;
margin: 0 0 0 -11px; /*pull child menus in line with parent */
width: 132px;
list-style: none;
}
/* Style sub menu items not to float like parent items */
#menu ul li ul.children li {
float:none;
width:110px;
height: 34px;
background-color:#243488;
border-top: 3px solid #ffffff;
font-size: 11px;
}
#menu ul li ul.children li:hover {
background-color:#78B2E3;
color:#243488;
}
/* Sub Menu link color */
#menu ul li ul.children li a:hover {
color:#243488;
}
#menu ul li ul.children li a {
color:#ffffff;
}
Not sure what causes it exactly, but it has to do with the fact that the list items in <ul class="children"> are inline-blocks and the ul itself is centered.
So you have two solutions: either align the ul to the left instead of centering it
.children {text-align:left;}
or, make its list items blocks instead of inline blocks.
.children > li {display:block;}
Either of those adjustments will get rid of the display anomaly. In both cases, you will also have to increase the left margin, but I'm sure that won't be a problem.
Changing .children .page_item to display:block rather than display:inline-block seemed to fix it in my Chrome. This also required a bit more margin-left to re-align things.
.children .page_item {
display:block;
margin-left:10px;
}
I use the following HTML program for creating Horizontal menu bar with horizontal sub menu.It was working fine in Fire Fox and Chrome but it doesn't work in IE.So What are the changes are need changes in this program?
<html>
<head>
<style>
/* Targeting both first and second level menus */
#nav li {
list-style:none;
float: left;
position: relative;
}
#nav li a {
display: block;
padding: 8px 12px;
text-decoration: none;
}
#nav li a:hover {
background-color:red;
color:#FFF;
opacity:1;
}
/* Targeting the first level menu */
#nav {
top:150px;
min-width:850px;
background:#fff;
opacity:0.5;
display: block;
height: 34px;
z-index: 100;
position: absolute;
}
#nav > li > a {
}
/* Targeting the second level menu */
#nav li ul {
color: #333;
display: none;
position: absolute;
width:850px;
}
#nav li ul li {
display: inline;
}
#nav li ul li a {
background: #fff;
border: none;
line-height: 34px;
margin: 0;
padding: 0 8px 0 10px;
}
#nav li ul li a:hover {
background-color:red;
color:#FFF;
opacity:1;
}
/* Third level menu */
#nav li ul li ul{
top: 0;
}
ul.child {
background-color:#FFF;
}
/* A class of current will be added via jQuery */
#nav li.current > a {
background: #f7f7f7;
float:left;
}
/* CSS fallback */
#nav li:hover > ul.child {
left:0;
top:34px;
display:inline;
position:absolute;
text-align:left;
}
#nav li:hover > ul.grandchild {
display:block;
}
</style>
</head>
<body>
<ul id="nav">
<li>Home</li>
<li>
Products
<ul class="child">
<li>Hard Drives</li>
<li>Monitors</li>
<li>Speakers
<ul class="child">
<li>10 watt</li>
<li>20 watt</li>
<li>30 watt</li>
</ul>
</li>
<li>Random Equipment</li>
</ul>
</li>
<li>
Services
<ul class="child">
<li>Repairs</li>
<li>Installations</li>
<li>Setups</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul>
</body>
</html>
do you use modernizr? or have available classes for legacy IE browsers? You might want to try messing with separate styles and/or stylesheets for IE.
Or
You can switch your navigation from floated blocks to "inline" elements, which older browsers such as IE6 that don't work well with floats will recognize.
Or
If you want to stick with floats then make sure you are setting a "width" for any floated element.
Chris Coyier has a nice article on floats that contains a section labeled: "Problems with Floats"
http://css-tricks.com/all-about-floats/
Well for some reason I can't even get the fiddle site to work at all in IE8...? But one problem I noticed in your CSS, is opacity. IE8 doesn't support the opacity property. To change the opaqueness of elements in old IE, use filter:alpha(opacity=75); Note, the value 75 is a whole number from 1 to 100, not a decimal like with the opacity property. I wish I could be more help, but I can't even see what the problem is in the fiddle...
Trying to make a drop down menu with css but it has some weird bugs in it. Here is the link for the site I'm working on.
http://shekinahgloryfire.com/?page=about
My CSS is like this:
#nav ul{float:left;margin-top:95px;list-style:none;padding-left:140px;}
#nav .first{border-radius:10px 0 0 10px;-webkit-border-radius:10px 0 0 10px; -moz-border-radius:10px 0 0 10px;}
#nav .last{border-radius:0px 10px 10px 0;-webkit-border-radius:0px 10px 10px 0; -moz-border-radius:0px 10px 10px 0;}
#nav ul li{float:left;border:solid #000;border-width:1px 0 1px 1px;background:black url('../images/navbg.gif');overflow:hidden}
#nav ul li:hover{background:#f68f1e url('../images/activebg.gif')}
#nav ul li a:link{text-transform:uppercase; text-decoration:none; font-family:serif; font-size:10pt; font-weight:bold; color:#fff; width:100px; height:40px; display:block; text-align:center; padding-top:10px}
#nav ul li a:hover{color:#000;text-decoration:underline;}
#nav ul ul{ position:absolute; }
And my mark up is like this:
<div id="nav">
<ul>
<li class="first"><a class="first" style="<?php if($page == "home") print "background:#f68f1e url('images/activebg.gif');color:#000";?>" href="?page=home">Home</a></li>
<li>About
<ul>
<li>Testimonies</li>
</ul>
</li>
<li>Resources</li>
<li>Videos</li>
<li class="last">Contact</li>
</ul>
</div>
If you are saying about spacing between the logo+nav and the actual content, then you need to decrease the height value in .header class of your stylesheet.
I figured it out. I just rewrote the whole navigation from scratch. Then I decided to do away with the dropdown and just put it on the side navigation.