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;
}
Related
In my <ul> list I have several <li> with <a> tags in them.
I want to change the color of the li bullet icons when hovering on the <a> tag (I mean bullets beside <li>)
I tried
a:hover {
color:red;
}
but it doesn't affect the<li> bullet icon.
I also tried
ul li:hover{
color:red;
}
But it doesn't work perfectly because when mouse move to near <a> tag and not on it <li> and the bullets starts to change color.
your code actually worked for me.
<ul>
<li>
A
</li>
<li>
B
</li>
<li>
C
</li>
</ul>
CSS:
ul li:hover{
color:red;
}
Fiddle: https://jsfiddle.net/tox9je8n/
I have tried something related to your question and it works fine. To fix the issue of li:hover not hovering link, you should set to display:block, as below, so that it takes full width.
ul li a {
color: black;
display: block
}
ul li:hover {
color: red;
}
ul li:hover a {
color: black;
}
<ul>
<li>Value 1</li>
<li>Value 2</li>
<li>Value 3</li>
</ul>
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 have a menubar made of li elements, each floating left to have them side-by-side.
This works on on most brwsers but not on my customer's firefox (mac version 26)
the li are a bit larger making them overflow at the end of the line (10px together probably)
Any idea why? I have a css reset and margin and padding are set to a value.
this is html:
<ul id="menu">
<li class="menuItem"><a class="menuItemLink" href="interface.php?type=architecture&page=projets-realisations">projets-realisations</a>
<ul class="subMenu">
<li class="subMenuItem"><a class="subMenuItemLink" href="interface.php?type=architecture&page=projets-realisations-en-resume">En résumé</a></li>
<li class="subMenuItem"><a class="subMenuItemLink" href="interface.php?type=architecture&page=projets-realisations-az">De A à Z</a></li>
</ul>
</li>
<li class="menuItem"><a class="menuItemLink" href="interface.php?type=architecture&page=portes-parquets-escaliers">Portes-parquets-escaliers</a> </li>
<li class="menuItem"><a class="menuItemLink" href="interface.php?type=architecture&page=cuisines-salles-de-bain">cuisines-salles de bain</a> </li>
<li class="menuItem"><a class="menuItemLink" href="interface.php?type=architecture&page=decoration-tentures">decoration-tentures</a> </li>
<li class="menuItem"><a class="menuItemLink" href="interface.php?type=architecture&page=de-ville-en-ville">de ville en ville</a> </li>
<li class="menuItem"><a class="menuItemLink" href="interface.php?type=architecture&page=espace-animalier">espace animalier</a> </li>
</ul>
css:
.menuItem {float:left; cursor: default; position: relative; margin-left:4px; padding:0px; margin-right:0px;}
.menuItem:last-child {margin-right:-50px;}
.menuItemLink {line-height: 20px; color: #ffffff; text-transform: uppercase; font-size: 13px; padding-left:5px; padding-right: 5px; text-decoration: none;}
The margin-right -50 is just to mae sure the last elements doesn't goes on a new line...
Why is it miscalculated by his firefox? The strangest thing is I tried the same firefox version on a mac (different osversion) and don't have this issue.
You need to increase the right margin for menuItem
margin-right: 15px;
You can check the http://jsfiddle.net/raunakkathuria/vRns2/
If you don't need the list style add to .menu
list-style-type: none;
and display: inline-block to .menuItem then you don't have to play with margin
Tried all your suggestions, but didn't worked, after all replaced all paddings by combined margins, now everything is ok
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
For some reason my menu items keep having some spacing left and right between the menu items..! While I'm kind of sure I havent programmed this..?
Anyone know why there is like 3 pixels spacing between my menu items?
http://jsfiddle.net/skunheal/ceFSJ/
HTML:
<div id="menu">
<ul id="nav">
<li class="page_item page-item-13">
Contact
</li>
<li class="page_item page-item-5 current_page_item">
Home
</li>
<li class="page_item page-item-7">
Nieuws
</li>
</ul>
</div>
CSS:
#nav, #subNav {
list-style: none;
padding-left: 0px;
margin: 0px;
}
#nav li, #subNav li {
display: inline;
padding:0px;
}
/* Currently selected page nav item (and parent) if applicable */
.current_page_item a,
.current_page_parent a {
text-decoration: none;
font-family:futura;;
color:#CCC;
}
.page_item a{
text-decoration: none;
font-family:futura;;
color:#FFFFFF;
display:inline-block;
background:#00C;
line-height:30px;
width:120px;
height:30px;
}
#menu{
height:30px;
text-align:center;
}
Thanx in advance,
Greetings,
Merijn!
You've set the display of lis to inline. So, the spaces between your li tags (the line-breaks and indentions) behave like spaces between words. Just remove the spaces and make it like this:
<div id="menu">
<ul id="nav">
<li class="page_item page-item-13">Contact</li><li class="page_item page-item-5 current_page_item">Home</li><li class="page_item page-item-7">Nieuws</li>
</ul>
</div>
You can also fix it with setting font size of ul to zero and setting it again on lis.
Try removing all the white space from between the <ul> and <li> items.
Either have them in a single line, or split over the lines like this...
<ul id="nav"><li class="page_item page-item-13">Contact</li
><li class="page_item page-item-5 current_page_item">Home</li
><li class="page_item page-item-7">Nieuws</li
></ul>
Update
Based on your JSFiddle... here is the same fiddle with the white space removed