I am simply trying to get there to be a li:hover function that turns background of one list item black on hover. Please see my jsFiddle at here
<div id="sidebar">
<ul class="nav">
<li id="home">home</li>
<li id="about">about</li>
<li id="blog">blog</li>
<li id="contact">contact</li>
</ul>
Give a
position:relative;
z-index:999;
to the .nav element
Demo at http://jsfiddle.net/ATX9f/1/
#sidebar .nav li:hover {
background: black;
}
Your :before and :after are covering the lis that's why you can't hover them. your hover code is correct.
fixed using z-index here
Related
I'm building a css dropdown menu and have been unable to get the submenus to appear below their respective parent li elements. I've tried a bunch of the solutions suggested in response to similar questions but have been unable to get them to work.
Here's a sample of the menu I'm building:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Menu Test</title>
<link rel="stylesheet" href="menustyle.css" type="text/css">
</head>
<body>
<div id="menudiv">
<ul class="menu">
<li class="menuitem">Aluminum</li>
<ul class="submenu">
<li class="subitem">Round</li>
<li class="subitem">Sheet</li>
<li class="subitem">Plate</li>
</ul>
</li>
<li class="menuitem">Copper</li>
<ul class="submenu">
<li class="subitem">Round</li>
<li class="subitem">Sheet</li>
</ul>
<li class="menuitem">Steel</li>
</ul>
</div>
</body>
</html>
And here's the css:
#menudiv {
text-align:center;
}
ul.menu {
list-style-type:none;
}
li.menuitem {
position:relative;
display:inline-block;
}
ul.submenu {
display:none;
position:absolute;
}
.menuitem:hover+ul.submenu {
display:block;
}
I can move the submenus around by adding things like right:50px; to ul.submenu, but that moves all the submenus to the same location.
What am I missing here? Thanks!!
Here's a Fiddle.
First of all, the following markup structure :
<li class="menuitem">Aluminum</li>
<ul class="submenu">
<li class="subitem">Round</li>
<li class="subitem">Sheet</li>
<li class="subitem">Plate</li>
</ul>
is incorrect. It should be :
<li class="menuitem">Aluminum
<ul class="submenu">
<li class="subitem">Round</li>
<li class="subitem">Sheet</li>
<li class="subitem">Plate</li>
</ul>
</li>
Secondly, you could use a CSS reset for ul,li elements. For the sake of simplicity I've used :
* {
margin: 0;
padding: 0;
}
Now, coming to your question. the following classes needs to be changed :
.menuitem:hover+ul.submenu {
display:block;
}
to
.menuitem:hover > ul.submenu {
display:block;
}
and
ul.submenu {
display:none;
position:absolute;
top:0px;
right:50px;
}
to
ul.submenu {
display:none;
position:absolute;
}
You can then modify the following class (so that the child ul elements "fits-in" to the parent li):
li.menuitem {
position:relative;
display:inline-block;
}
to
li.menuitem {
position:relative;
display:inline-block;
padding: 5px 10px;
margin: 0 10px;
}
In summary, I guess this is what you are looking for :
* {
margin: 0;
padding: 0;
}
#menudiv {
text-align:center;
}
ul.menu {
display: inline-block;
list-style-type:none;
}
li.menuitem {
position:relative;
display:inline-block;
padding: 5px 10px;
margin: 0 10px;
}
ul.submenu {
display:none;
position:absolute;
}
.menuitem:hover > ul.submenu {
display:block;
}
<body>
<div id="menudiv">
<ul class="menu">
<li class="menuitem">Aluminum
<ul class="submenu">
<li class="subitem">Round</li>
<li class="subitem">Sheet</li>
<li class="subitem">Plate</li>
</ul>
</li>
<li class="menuitem">Copper
<ul class="submenu">
<li class="subitem">Round 2</li>
<li class="subitem">Sheet 2</li>
</ul>
<li class="menuitem">Steel</li>
</ul>
</div>
</body>
Hope this helps!!!
Try placing the <ul class="submenu"> inside the <li class="menuitem">. Then set the <li> to position:relative; and set the <ul> to position:absolute;left:0;. This will position the <ul> relative to its parent element, the <li>.
Here's a codepen example: http://codepen.io/anon/pen/WQdMjX
Your markup is incorrect for nesting a sub-list.
You're doing this:
<ul>
<li>text</li><!-- incorrect, don't close li here -->
<ul>
<li>sub</li>
</ul>
</li><!-- correct, though li is already closed -->
<li>text</li><!-- incorrect, don't close li here -->
<ul>
<li>sub</li>
</ul>
<!-- needs closing li here -->
<li>text</li>
</ul>
Instead do this:
<ul>
<li>text
<ul>
<li>sub</li>
</ul>
</li>
</ul>
Then update your CSS selector from .menuitem:hover + ul.submenu to .menuitem:hover > ul.submenu as you're no longer selecting a sibling element (+) but a child element (>).
You'll need to fine tune the positioning of your sub-menus from here but this should get you where you need to be.
Remember, when you are developing menus you need to make sure the link content is inside anchor tags, including the links at the top level navigation that launch the subnav. That way these links are natively focusable. You want to be able to reach these menu elements with a keyboard only since many with arthritis, Parkinson's disease, etc. may be unable to use a mouse (and you won't want to use tabindex to mimic this behaviour since screen-readers will look for anchor tags.)
There was a similar StackOverflow question yesterday: Absolutely positioned child's top edge pinned to the bottom edge of its parent that has unknown height?
You can also Bootstrap Dropdown CSS in a normal case too.
I'm having issues with creating a drop-down menu with HTML&CSS. I got the HTML part down (I think).
<div id="Nav">
<ul>
<li class="Navigation">Item 1</li>
<li class="Navigation">Item 2</li>
<li class="Navigation">Item 3</li>
<li class="Navigation">
<a class="Nav_Text">Item 4</a>
<ul class="sub-menu">
<li class="Sub_Navigation"><a href"" class="Sub_Nav_Text">Sub Item1</a></li>
<li class="Sub_Navigation"><a href"" class="Sub_Nav_Text">Sub Item2</a></li>
</ul>
</li>
</ul>
</div>
Here is what I have for the CSS
.submenu
{
display: none;
}
#Nav ul li:hover > ul
{
display: block;
position: absolute;
/*The rest of the code is just for looks and doesn't effect the position*/
}
The issue that I'm having is that the drop-down menu is not showing up underneath Item 4, but instead at the far left of the screen. Can anyone help me with positioning the drop-down menu underneath Item 4? And not by setting a margin. I tried that, and when the screen resized, the drop-down menu was off alignment.
Thank you ahead of time.
try give class="sub-menu" position:relative
.sub-menu{
position:relative;
}
Not sure it will work :)
Haven't tryed it.
when you're using
position: absolute;
on child elements in the sublist you have to set the parent li's to
position: relative;
#Nav > ul > li{
position: relative;
}
I'm a little confused as to when the properties are implemented between the ul#nav li:hover a and the first ul#nav li.current a. Is there supposed to be a comma there?
ul#nav li.current a, ul#nav li:hover a {
background: #CCC;
}
The CSS selectors you showed do the following:
Set the background color of a to #CCC when a is in a <ul id="nav"><li> which is currently being hovered on or <ul id="nav"><li class="current">.
<ul id="nav">
<li class="current">
This link will have it's background color set
</li>
<li>
This link will have it's background color set when hovered over the parent <li>
</li>
</ul>
The comma identifies that you want it to apply to both of the matches, and it is not one continuous match. If you remove the the comma, the a that will have it's background color set is expected to have the following structure: <ul id="nav"><li class="current"><a href="#"><ul id="nav"><li>
<ul id="nav">
<li class="current">
<a href="#">
<ul id="nav">
<li>
This link will have it's background color set when hovered over the parent <li>
</li>
</ul>
</a>
</li>
</ul>
I wouldn't really call the above a proper HTML structure but it may run in some (or all) browsers. Either way, the comma just allows you to have multiple selectors that will get the same properties assigned. Removing the comma makes it one selector which matches to the last example I gave.
Yes! if you want the current li element (activated) to have the same colour as others on hover.
ul#nav li.current a, ul#nav li:hover a {
background: #CCC;
}
<ul id=nav>
<li class=current><a>Home</a></li>
<li><a>Work</a></li>
<li><a>Contact</a></li>
<li><a>Infos</a></li>
</ul>
No! if you want it to have a different colour
ul#nav li:hover a {
background: #CCC;
}
ul#nav li.current a{
background: red;
}
<ul id=nav>
<li class=current><a>Home</a></li>
<li><a>Work</a></li>
<li><a>Contact</a></li>
<li><a>Infos</a></li>
</ul>
Is it possible to get rid of border-top property in the second line of a list item on hover?
<ul>
<li>This is a<br/>long Link</li>
</ul>
Display:block causes the border has the same width like the whole element
Display:inline-block causes nearly same results
Starting Fiddle
By the help of #Pete and the others I ended up with this:
$('#access a').each(function() {
$(this).contents().filter(function() {
return this.nodeType == 3;
}).wrap('<span></span>');
});
to simply wrap the <li> contents with <span> elements:
<!-- with the javascript -->
<nav id="access" role="navigation">
<ul id="menu-primary" class="menu">
<li class="menu-item">
<a href="http://www.url.com"><span>Hello</span><br/><span>World</span><a/>
</li>
</ul>
</nav>
This makes it possible to create a hover only for the first span element of the li element:
.mainmenu ul a:hover span:first-child {border-top:1px dotted #fbf9ef;}
Pete's Fiddle
you can separate the two line with span tag
<ul>
<li><span>This is a</span><br/><span>long Link</span></li>
</ul>
then make this in css :
a:hover span:first-child {border-top:1px solid}
a:hover span:last-child {border-top:none;}
Add your first line in <span> & use this code a:hover span{border-top:1px solid;}
I'm not sure I understand what you mean if inline-block isn't working for you; this worked for me:
a {
display:inline-block;
text-decoration:none;
vertical-align:text-top;
}
a:hover {
border-top:1px solid;
display:inline-block;
}
http://jsfiddle.net/kK2bf/
You can use the pseudo-element ::first-line.
I'm trying to make a side-menu in wordpress, which is going nicely, but for some reason the css is being a pain and I can't seem to wrap my head around it.
The navigation looks like this:
<nav>
<ul id="sidebar-menu">
<li class="page_item page-item-8 current_page_item">Diensten</li>
<li class="page_item page-item-32">Dienst 1</li>
<li class="page_item page-item-33">Dienst 2</li>
<li class="page_item page-item-36">Dienst 3</li>
</ul>
</nav>
The css for this looks like this:
#left-side nav a:hover, #left-side nav .current_page_item{
border-left:10px #b8d276 solid;
border-right:none;
padding-left:10px;
font-style: italic;
}
Now when one of the items is "selected" (having the .current_page_item-tag) the hover is again applied, what shouldn't happen, it should just stay the same.
On the following page you can see it in action: http://www.consana.nl/en/diensten/
Any help would be appreciated!
Because <li> has default border-left and you are styling anchor elements.
#left-side nav li:hover, #left-side nav .current_page_item{
border-left:10px #b8d276 solid;
border-right:none;
padding-left:10px;
font-style: italic;
}