my Menu is something like this:
<section class="top-bar-section">
<ul class="left">
<li class="menu-item menu-item-main-menu menu-item-cine-suntem has-dropdown not-click" id="menu-item-60">TopLevel Menu
<ul class="dropdown">
<li class="menu-item menu-item-main-menu menu-item-misiuneviziune" id="menu-item-66">SubLevel Menu</li>
</ul>
</ul>
And the CSS that ads a black arrow when I hover over the TopLevel Menu
.top-bar-section .has-dropdown > a:hover:after{
content: "";
display: block;
width: 0;
height: 0;
border: inset 5px;
border-color: #000 transparent transparent transparent;
border-top-style: solid;
margin-top: 22px;
z-index:999;
}
How do I get that arrow to stay visible, when I hover the child element of that menu item, because now as soon as I start hovering the child, the arrow from the parent item disappears.
Use the hover for list-item i.e li:hover to achieve what you are looking for, as that will select the parent to have the hover that is visible on hover only for the child elements.
PS: Your above markup as provided is jagged and not correct. You need to correct it for the code to work properly.
Change
.top-bar-section .has-dropdown > a:hover:after{...}
.top-bar-section li a:hover, .top-bar-section .dropdown li a:hover{background:#c1212e;}
to
.top-bar-section .has-dropdown:hover > a:after {...}
.top-bar-section li:hover a, .top-bar-section .dropdown li:hover a{background:#c1212e;}
Note:
Closing tags are missing in your HTML markup. Which is a bad practice.
DEMO here.
Related
I am creating an HTML Multi-level Dropdown menu.
I want to change the background of the second menu level when I hover over the first menu level.
I am able to change color of first level dropdown items on hover with the first code snipped below
The background colour of the second level in the dropdown I can change with the second code snippet
So I thought that what I want is achieved by just connecting those two snippets with each other.
But connecting both does not work for me. The last code snipped is not working. What am I doing wrong?
.dropdown-content > ul > li > a:hover {
background: blue !important;
}
.dropdown-content > ul > li > ul {
background: white;
}
.dropdown-content > ul > li > a:hover .dropdown-content > ul > li > ul {
background: red !important;
}
Would need to see your html code to be sure, but try something like:
.dropdown-content > ul > li > ul > li > a:hover {
background: red !important;
}
I think what you're looking for is the adjacent selectors. Below, the plus sign selector + in the third style rule waits for an anchor tag to be hovered over, and then finds the adjacent .dropdown-content element and highlights its child ul element in red:
.dropdown-content>ul>li>a:hover {
background: blue;
}
.dropdown-content>ul>li>ul {
background: white;
}
.dropdown-content>ul>li>a:hover+.dropdown-content>ul {
background: red;
}
<div class="dropdown-content">
<ul>
<li>
Menu Item
</li>
<li>
Menu Item
</li>
<li>
Menu Item
<div class="dropdown-content">
<ul>
<li>
Menu Item
</li>
<li>
Menu Item
</li>
</ul>
</div>
</li>
</ul>
</div>
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 am modifying the CSS of an existing web page. The navigation menu is in the form of a list in which the items have a certain background color under normal circumstances and another color when active or hovered-over. The CSS code for this is as follows:
#navigation li a:hover,
#navigation li#active a {
background: #104E91;
}
Some of the menu items (list items, in this case) have drop-down menus with links to sub-pages. I'm trying to make the navigation menu items have the "active" background color not only if they are themselves active, but also if one of their sub-pages is open. Is there any way to implement this? The code for the drop-down menus looks as follows:
#wsite-menus .wsite-menu li:first-child {
border-top: 1px solid #000;
}
#wsite-menus .wsite-menu li a {
padding: 8px;
color: #fff;
background: #2f2f2f;
border: 1px solid #4b4b4b;
border-top: none;
}
#wsite-menus .wsite-menu li a:hover {
background: #4b4b4b;
}
I suspect that the way to bring this about would be to modify the first of the two above blocks of code to read as follows:
#navigation li a:hover,
**#navigation li#active child,**
#navigation li#active a {
background: #104E91;
}
or something similar, but I can't figure out the exact syntax. Is there a way an open child page can make the parent page look active in the navigation menu?
The HTML is as follows:
<div id = "navigation">
<ul class = "wsite-menu-default">
<span id = "Span1" class = "wsite-nav-handle"> style="display: inline;">
<li class="w-menu-item wsite-nav-0" style="position: relative;">
... and so on, there are a number of list items. I guess I should create a separate span that imparts an active background color to a list item, and, on each child page, put that span around the list item that is responsible for the page's parent's menu item.
You didn't show any HTML, so I made up some of my own. I didn't use your tags of the same reason.
HTML:
<nav>
<li>Home</li>
<a href="#">
<li>Dropdown
<div class="dropdown">
<div class="dropdown-inner">
<a>Menu</a>
<a>Number</a>
<a>3</a>
</div>
</li>
</a>
<li>About</li>
</nav>
CSS:
nav li {
list-style:none;
display:inline-block;
text-align:center;
background:#222;
color:#FFF;
width:100px;
padding:10px 20px
}
nav a {
text-decoration: none;
color:#FFF;
}
nav li div.dropdown {
display:block;
position:absolute
}
nav li div.dropdown .dropdown-inner {
right:20px; /* Equal to li padding Y */
width:100px; /* Equal to li width */
padding:10px 20px; /* Equal to li padding X */
background:#333;
top:10px;
position:relative
}
nav li span.dropdown a {
display:block;
}
Codepen: http://codepen.io/anon/pen/bzIGl
The problem you're having is because you're assigning the background color to the <a> tag instead of <li> tag. When you exit a parent <li> item and move down to a child <li> element, you've technically left the <a> and so the background color reverts correctly. If however you apply the background color to the <li> tag, rolling over any child list items will keep the active state on the parent <li> item.
For a website I need to make a css/html menu like this:
As you can see there some yellow borders to the left and also to the right of the menu links that fill up the availabe width. Also there is a background image underneath the menu with a gradient in it.
Does somebody has any idee on how to achive this menu style?
Code so far:
<div id="submenu">
<ul>
<li class="selected">
Wirtschaft<div></div>
<ul>
<li>Kurzeinführung Wirtschaft</li>
<li>Wirtschaftstheorie</li>
<li>Arbeitsmarkt</li>
<li class="selected">Geld- und Konjunktur</li>
<li>Staatsfinanzen</li>
<li>Wirtschaft: alle Beiträge</li>
</ul>
</li>
</ul>
</div>
#submenu {
width: 225px;
}
#submenu ul {
list-style-type: none;
}
#submenu ul li a {
border-left: 6px solid transparent;
padding-left: 4px;
display: block;
margin-bottom: 15px;
color: #222624;
font-size: 17px;
}
#submenu ul li a:hover,
#submenu ul li.selected > a {
border-left: 6px solid #CAB106;
}
#submenu ul li ul li a {
margin-bottom: 7px;
font-size: 14px;
}
EDIT: the gradient in the picture actually resides in the body and i think it can not be done with pure css so it has to be a background image.
EDIT2: the solution provided by PeterVR works great! unfortunately i am stuck with another list with the same style but without the blocks ending complete when the ul ends. any idea on how to achive this with the code provided by PeterVR?
something like this perhaps: http://jsfiddle.net/AXze7/1/
I changed a few thing in your css:
- set the main ul to overflow hidden
- removed the display block from your <a> tags
- set the <a> tags to position relative, for the following to work:
#submenu ul li a:hover:after,
#submenu ul li.selected > a:after {
background: #CAB106;
content: ' ';
display: block;
height: 100%;
width: 225px;
margin-left: 4px;
position: absolute;
left: 100%;
top: 0;
}
This adds the green blocks after the anchor tags.
EDIT:
I updated my fiddle for your second case: http://jsfiddle.net/AXze7/2/
A short overview of what changed:
I removed the overflow:hidden from the ul, and put it on the li
I tweaked the styling and played with the pixels to make it look a bit more like your screenshot. Comparing this with the previous example should help you understand how to achieve what.
I added an extra pseudo-class :before for the arrow icon that appears to change on hover/select.
The code looks like this:
#submenu ul li a:before,
#submenu ul li.selected > a:before {
background: #fcc; /* put your black arrow image here */
content: ' ';
display: block;
height: 12px;
width: 12px;
margin-left: 2px;
position: absolute;
left: -18px;
top: 2px;
}
#submenu ul li a:hover:before,
#submenu ul li.selected > a:before {
background: red; /* put your colored arraw image here */
}
check this demo in js fiddle.make an image one pixel height with the grenadine shown on the picture , and replace #eee with that image.
I have a simple ul list. the li's contain simple a href's.
I have a background and all that on the li and I want to change the li's border when the a href is mouseover...
Is that possible?
<ul>
<li>Button 1</li>
</ul>
anyway, I need the li border to change on mouseover... this seems simple, but I can't figure it out.
I would make the li the same size as the a tag.
then in your css file:
ul li {
border: 1px solid #000000;/*Black 1px border*/
}
ul li:hover {
border: 2px dotted #ff0000; /*Red 2 pix dotted line border*/
}