I have menu, where I use :after element. I am hovering li in menu, but it is hovering with :after element.
HTML:
<ul class="main-menu">
<li class="active">Menu</li>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
</ul>
CSS:
/* MAIN MENU */
.main-menu {
list-style-type: none;
padding: 0;
margin: 0;
background: url("../img/li.png") repeat-x; height: 56px;
}
.main-menu li {
display: inline-block;
color: #fff;
height: 56px;
background: url("../img/li.png") repeat-x; height: 56px;
line-height: 56px;
}
.main-menu li:after {
content: "|";
}
.main-menu li:last-child:after {
content: "";
}
.main-menu li:hover {
background: url("../img/li-hover.png") repeat-x; height: 56px;
}
.main-menu .active {
background: url("../img/li-hover.png") repeat-x; height: 56px;
}
.main-menu li a {
text-decoration: none;
color: #d2eff3;
padding: 10px;
}
.main-menu li a:hover {
}
JsFiddle:
JsFiddle example
Question:
How to exclude li:after element from hover efect?
(In menu hover effect is hovering under "|" separator. I want to disable hover under separator)
I tried:
.main-menu li:after:hover {
background: none;
}
but no luck.
Thank you for your answers.
I think that the hover effect should be on the link not on the whole li element http://jsfiddle.net/krasimir/fC8sb/6/
.main-menu {
list-style-type: none;
padding: 0;
margin: 0;
background: url("...") repeat-x; height: 56px;
}
.main-menu li {
padding: 0;
margin: 0;
display: inline-block;
color: #fff;
height: 56px;
background: url("../img/li.png") repeat-x;
}
.main-menu li:after {
padding: 14px 0 0 4px;
content: "|";
float: right;
display: block;
}
.main-menu li:last-child:after {
content: "";
}
.main-menu li:hover a {
background: url("...") repeat-x; height: 56px;
}
.main-menu .active {
background: url("../img/li-hover.png") repeat-x; height: 56px;
}
.main-menu li a {
text-decoration: none;
color: #d2eff3;
padding: 10px;
display: block;
float: left;
padding: 16px 10px 10px 10px;
}
Position the :after element outside of the li. I did this in the example by adding the following code:
li {
position:relative;
}
li:after {
position:absolute;
right:-3px;
}
See: http://jsfiddle.net/fC8sb/1/
Apply styles like this:
.main-menu li:hover::after {
background:red;
}
FIDDLE
Add a position: relative; and left: a to your li:after so that the :after element is moved away from the li box.
Next, add some margin-right: a*2 to your li so that li:after element won't just move to next menu-item.
Hope that helps.
Edit - Just to make sure: Replace a and a*2 with numbers, eh?
Related
I have a multi-level dropdown but it opens to the right by default. I have tried to tweak it a lot but doesn't seem to work no matter what I try.
I'll provide the code here. The HTML might be a little messed up because I had to remove the rails code in there and only leave plain HTML.
The dropdowns open to the right and overflow the window. If anyone has a better way to do it, I am all ears.
.dropdown-wrapper {
ul {
list-style: none;
padding: 0;
margin: 0;
// background: #1bc2a2;
}
li>ul {
margin-right: 190px;
}
ul li {
font-size: 16px !important;
margin-top: 10px;
display: block;
position: relative;
color: goldenrod;
float: left;
min-width: 100px;
cursor: pointer;
// background: #1bc2a2;
}
ul li:not(:last-child) {
border-bottom: 1px solid goldenrod;
}
li ul {
display: none;
}
ul li a {
display: block;
padding: 10px;
text-decoration: none;
white-space: nowrap;
color: goldenrod;
border-radius: 0;
box-shadow: none;
}
ul li a:hover {
background: #FAF9F6;
border-radius: 0;
}
ul li:hover {
background: #FAF9F6;
}
li:hover>ul {
display: block;
position: absolute;
margin-left: 2px;
}
.main-navigation {
ul {
background: white;
}
}
li:hover li {
float: none;
}
// li:hover a { background: #1bc2a2; }
li:hover li a:hover {
background: #FAF9F6;
}
.main-navigation li ul li {
border-top: 0;
}
ul ul ul {
left: 100%;
top: 0;
}
ul:before,
ul:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
ul:after {
clear: both;
}
}
<ul class="main-navigation">
<li>Treatments Provided
<ul>
<li>1</li>
</li>
<li>2
<ul>
<li class="">
<a href=>a</a>
</li>
</ul>
</ul>
</li>
</ul>
I am unable to make whole li element clickable. I tried display properties, but nothing really helped. Here is a code:
#top_menu ul li {
position: relative;
list-style: none;
float: left;
display: block;
}
#top_menu ul li a {
display: block;
padding: 0 14px;
margin: 6px 0;
line-height: 28px;
text-decoration: none;
color: #fff;
}
#top_menu ul li:hover>a {
color: #8fde62;
}
#top_menu ul ul {
position: absolute;
opacity: 0;
background: rgba(70, 70, 70, 0.7);
}
#top_menu ul li:hover>ul {
opacity: 1;
}
#top_menu ul ul li {
height: 0;
overflow: hidden;
padding: 0;
}
#top_menu ul li:hover>ul li {
height: 36px;
overflow: visible;
padding: 0;
}
#top_menu ul ul li a {
padding: 4px 0 4px;
margin: 0;
border: none;
border-bottom: 1px solid #353539;
}
<ul>
<li>Additional
<ul>
<li>Commands</li>
<li>Guides</li>
</ul>
</li>
</ul>
And here is the result (on the left of the list there is blank space-not active):
So what am I doing wrong? How can I fix that?
The padding on the left is caused by the <ul>. If you set it to padding: 0;, that'll remove the null-space and allow you to style as desired from the <li> or the <a>
Example
I think you are confusing the issue a bit. The <a> can take up as much space inside the <li> as you want.
What I think you are missing is lists by default get styled with margin and also padding on the side, you can just remove that:
ul {
padding: 0;
}
As others have stated, a can fill the entire space available within li. Here's a working example though I had to adjust your colors and html for the snippet to work.
body{background: black;}
#top_menu ul li {
position: relative;
list-style: none;
float: left;
display: block;
}
#top_menu ul li a {
display: block;
padding: 0 14px;
margin: 6px 0;
line-height: 28px;
text-decoration: none;
color: #fff;
}
#top_menu ul li:hover>a {
color: #8fde62;
}
#top_menu ul ul {
position: absolute;
padding: 0;
opacity: 0;
background: rgba(70, 70, 70, 0.7);
}
#top_menu ul li:hover>ul {
opacity: 1;
}
#top_menu ul ul li {
height: 0;
overflow: hidden;
padding: 0;
width: 100%;
}
#top_menu ul li:hover>ul li {
height: 36px;
overflow: visible;
padding: 0;
}
#top_menu ul ul li a {
padding: 4px;
margin: 0;
border: none;
border-bottom: 1px solid #353539;
}
<div id="top_menu">
<ul>
<li>Additional
<ul>
<li>Commands</li>
<li>Guides</li>
</ul>
</li>
</ul>
</div>
Yo will need to use either javascript or jquery in order to attach an event to the whole li element.
If you decide for jquery you will need to add a class or id to identify the li you are targeting then, you will need to attach it the corresponding event.
$( "#top_menu ul li" ).click(function() {
alert( "Handler for .click() called." );
});
More informacion at: https://api.jquery.com/click/
I have some problems with a dropdown. I want that it drops to the left side, but I don't know how to do that. I've tried some stuff with margin-right and padding, but I cant find a way to fix it. Code is here:
ul {
list-style: none;
padding: 0px;
margin: 0px;
}
ul li {
display: block;
position: relative;
float: right;
}
li ul {
display: none;
margin-top: -11px;
}
ul li a {
display: block;
padding: 5px 10px 5px 10px;
text-decoration: none;
color: #f00;
}
li:hover ul {
display: block;
position: absolute;
right: 0px;
}
li:hover li {
float: left;
margin-left: 10px;
}
li:hover a {
background: transparent;
margin-left: 10px;
}
li:hover li a:hover {
background: #000;
}
#drop-nav li ul li {
border-top: 0px;
margin-right: 40px;
background-color: #FFFFFF;
width: 260px;
}
img.menu {
height: 39px;
width: 34px;
margin-top: 41px;
}
<ul id="drop-nav">
<li><img src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-256.png" class="menu">
<ul>
<li>General Inquiries</li>
<li>Ask me a Question</li>
</ul>
</li>
</ul>
li:hover ul {
display: block;
position: absolute;
right:0px;
}
I have a hover drop down menu on my website. It displays ok until you hover over. The submenu appears but before you can click on a link, the sub menu vanishes.
Here is the HTML -
<div id="top-nav"><div id="nav">
<nav>
<ul id="menu" style="list-style-type: none;">
<li id="sub">Artists
<ul>
<li>Banks</li>
<li>Lil Silva</li>
<li>Frances and the Lights</li>
<li>Jim-E Stack</li>
</ul>
</li>
<li>Night</li>
<li>Info</li>
</ul>
</nav>
</div>
</div>
And here is the CSS -
#nav {
text-align:center;
list-style: none;
}
ul#menu {
background-color: #FFFFFF;
list-style: none outside none;
margin: 0 auto;
padding-bottom: 0px;
padding-top: 0px;
text-align: center;
width: 300px;
}
ul#menu:after {
content: "";
background-color: #FFFFFF;
height: 10px;
width: 100%;
display: block;
position: absolute;
left: 0;
margin-top: 20px;
}
ul#menu li {
float: left;
}
ul#menu li a {
color: #666666;
font-size: 12px;
margin: 0;
padding: 0px 35px;
text-decoration: none;
}
ul#menu li a:hover {
background-color: #ccc;
}
a.selected-page, ul#menu a.selected-page:hover {
background-color: #FFFFFF;
}
li#sub ul {
display: none;
position: absolute;
background-color: #FFFFFF;
z-index: 22222;
margin-top: 4px;
overflow: hidden;
}
li#sub ul li {
display: block;
float: none;
border-top-style: none;
border-width: 2px;
border-color: #FFFFFF;
text-align: left;
padding-top: 5px;
padding-bottom: 5px;
}
ul#menu li#sub:hover ul {
display: block;
}
ul#menu li#sub ul li:hover {
background-color: #FFFFFF;
}
What am I doing wrong? Any help is greatly appreciated!
the problem is the following line of your CSS code:
li#sub ul {
...
margin-top: 4px;
...
}
Just remove this margin-top and your drop down menu will work properly.
In your example there is a 4px margin space between the "Artists"-link and the drop down menu below. And if your cursors leaves the link and enters this "margin area", the browser interprets it as un-hovering the link - and hides the drop down.
Like dalucks said, remove the top margin from your CSS:
li#sub ul {
margin-top:0;
}
Also, reduce the left margin/paddings from the submenu UL and/or LI children. With the original large values (35px) the menu could be hovered over a lot of invisible space.
ul#menu li ul li a {
padding-left:5px;
}
Fiddle: http://jsfiddle.net/LXwTr/
Add Padding: 0 to this
li#sub ul {
padding: 0;
}
http://jsfiddle.net/tdQmE/
Below is my code, currently when I hover on "About Us" everything below the dropdown menu opens; how can i change the css so that it only hovers when i mouseover, this means, when i hover on "Team", then I should see the menus below it.
also how can i adjust the width so that it is shiffted more to the left.
also when the dropdown menu is longer in lenth, it hides below my content, i want the dropdown menu to be over the body of the page, not in hiding.
thanks in advance you all.
<style>
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul { display: none; }
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #000061;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover { background: #617F8A; }
li:hover ul {
display: block;
position: absolute;
}
ul li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #617F8A; }
li:hover li a:hover { background: #95A9B1; }
</style>
<body>
<ul id="menu">
<li><b>Home</b></li>
<li><b>About Us</b>
<ul>
<li>Team
<ul>
<li>Profile</li>
<li>Board</li>
</ul>
</li>
</ul>
</li>
<ul>
</body>
JSFiddle: http://jsfiddle.net/LWEry/
Like this:
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul { display: none; }
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #000061;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover { background: #617F8A; }
li:hover > ul {
display: block;
position: absolute;
width: 100%;
}
ul li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #617F8A; }
li:hover li a:hover { background: #95A9B1; }
.sub-menu
{
position: absolute;
top: 0;
left: 100%;
}
http://jsfiddle.net/3xWcu/2/
I changed one selector.
FROM
li:hover ul
TO
li:hover > ul
Edited my fiddle above. Added a sub-menu class to the ul containing the Profile and Board li tags:
<ul class="sub-menu">
<li>Profile</li>
<li>Board</li>
</ul>
and added some CSS above.
You mean like this? http://jsfiddle.net/3xWcu/
<style>
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul { display: none; }
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #000061;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover { background: #617F8A; }
li:hover ul {
display: block;
position: absolute;
width: 100%;
}
ul li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #617F8A; }
li:hover li a:hover { background: #95A9B1; }
</style>
<body>
<ul id="menu">
<li><b>Home</b></li>
<li><b>About Us</b>
<ul>
<li>Team
<ul>
<li>Profile</li>
<li>Board</li>
</ul>
</li>
</ul>
</li>
<ul>
</body>