This is proving very difficult. Nav is pasted pasted below. This is a wordpress website so while I could change the structure of the html I'd rather not.
It looks like the nested drop down menus <ul> are contained within parent <li> elements.
My goal is to have, on hover, the list items be orange with 0.4 opacity. I would also like this for the drop down menu line items. Except, the problem is, that when hovering over a line item that has a drop down nested within it, the 0.4 opacity seems to apply to the whole menu, as opposed to just the hovered one. I have tried numerous things. Here is a taste of what I have tried:
.dropdown > ul li:hover { // the styling in question. Everything below is an attempt to limit this from affecting the whole drop down menus.
background-color: orange;
opacity:0.4;
}
.dropdown > ul.children li:hover, .dropdown > ul.children:hover { // trying to select just the drop down menu and take of the opacity by setting it to 1
opacity: 1;
}
ul.children li:hover { // similar to above just another attempt
opacity: 1;
}
ul.children, ul.children:hover, ul.children li, ul.children li:hover{ // just resorting to trying everything now
opacity: 1;
}
I made a fiddle too: http://jsfiddle.net/m7owomb0/
See how when you hover over the menu items with drop downs it's transparent? Then click on one of the actual links and the styling from the live site loads into the frame. When you hover there it's not transparent and you can see the items clearly. I just want them to be orange when hovered.
<div id="main-navigation">
<nav>
<div class="dropdown dropdown-horizontal">
<ul class="main-nav">
<li class="current_page_item">
<a href="http://dduck8977.webfactional.com/">
Home
</a>
</li>
<li class="page_item page-item-57">
<a href="http://dduck8977.webfactional.com/?page_id=57">
Clear Outs & Offers
</a>
</li>
<li class="page_item page-item-8 page_item_has_children">
<a href="http://dduck8977.webfactional.com/?page_id=8">
Flooring
</a>
<ul class='children'>
<li class="page_item page-item-19">
<a href="http://dduck8977.webfactional.com/?page_id=19">
Chestnut
</a>
</li>
<li class="page_item page-item-15">
<a href="http://dduck8977.webfactional.com/?page_id=15">
Douglas Fir
</a>
</li>
<li class="page_item page-item-12">
<a href="http://dduck8977.webfactional.com/?page_id=12">
Heart Pine
</a>
</li>
<li class="page_item page-item-17">
<a href="http://dduck8977.webfactional.com/?page_id=17">
Maple
</a>
</li>
<li class="page_item page-item-10">
<a href="http://dduck8977.webfactional.com/?page_id=10">
Oak
</a>
</li>
</ul>
</li>
<li class="page_item page-item-50 page_item_has_children">
<a href="http://dduck8977.webfactional.com/?page_id=50">
Locations
</a>
<ul class='children'>
<li class="page_item page-item-52">
<a href="http://dduck8977.webfactional.com/?page_id=52">
New York
</a>
</li>
<li class="page_item page-item-55">
<a href="http://dduck8977.webfactional.com/?page_id=55">
Philadelphia
</a>
</li>
</ul>
</li>
<li class="page_item page-item-21 page_item_has_children">
<a href="http://dduck8977.webfactional.com/?page_id=21">
Paneling
</a>
<ul class='children'>
<li class="page_item page-item-31">
<a href="http://dduck8977.webfactional.com/?page_id=31">
Barn Wood
</a>
</li>
<li class="page_item page-item-27">
<a href="http://dduck8977.webfactional.com/?page_id=27">
Eastern Mix
</a>
</li>
<li class="page_item page-item-29">
<a href="http://dduck8977.webfactional.com/?page_id=29">
Mushroom Wood
</a>
</li>
<li class="page_item page-item-23">
<a href="http://dduck8977.webfactional.com/?page_id=23">
Oak
</a>
</li>
<li class="page_item page-item-25">
<a href="http://dduck8977.webfactional.com/?page_id=25">
Pine & Fir
</a>
</li>
</ul>
</li>
<li class="page_item page-item-40">
<a href="http://dduck8977.webfactional.com/?page_id=40">
Patchwork
</a>
</li>
<li class="page_item page-item-37 page_item_has_children">
<a href="http://dduck8977.webfactional.com/?page_id=37">
Reclaimed Wood
</a>
<ul class='children'>
<li class="page_item page-item-47">
<a href="http://dduck8977.webfactional.com/?page_id=47">
Lumber Phrases
</a>
</li>
<li class="page_item page-item-42">
<a href="http://dduck8977.webfactional.com/?page_id=42">
Wood Types
</a>
</li>
</ul>
</li>
<li class="page_item page-item-35">
<a href="http://dduck8977.webfactional.com/?page_id=35">
Shelving
</a>
</li>
<li class="page_item page-item-33">
<a href="http://dduck8977.webfactional.com/?page_id=33">
Tables
</a>
</li>
</ul>
</div>
</nav>
</div>
How can I add styling so that hovered line items are orange with opacity 0.4, without affecting nested ULs within these line items?
You cannot override opacity in child elements, use rgba instead.
.dropdown > ul li:hover {
background-color: rgba(255,165,0,0.4);
}
Related
In the website I'm working on the navigation menu is made by several nested lists, when one element is clicked on the <li> element with the page name acquires the .active class, if it belongs to a nested list all parent li elements above also acquire the .active class.
I'd like to be able to style the last <li> element with class .active since it corresponds to the currently open webpage.
I'm working with Omeka s content management system, which means that I can't use javascript or modify the HTML files, so I'm looking for a solution in pure CSS.
here is the menu structure:
`
<ul class="">
<li >
Introduction
</li>
<li>
level 1
<ul>
<li>
subpage
<ul>
<li>
sub-subpage
<ul>
<li>
sub-sub-page
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
here is when I'm on th page "sub-sub-page":
<ul class="">
<li >
Introduction
</li>
<li class="active">
level 1
<ul>
<li class="active">
subpage
<ul>
<li class="active">
sub-subpage
<ul>
<li class="active">
sub-sub-page
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
`
I've tried to use li.active:last-of-type but it only select the last element of type li.
ul *{
color : #000;
text-decoration: none
}
ul .active ul li ul li ul li a{
color : #f00;
font-weight : bold;
}
<ul class="">
<li >
Introduction
</li>
<li class="active">
level 1
<ul>
<li class="active">
subpage
<ul>
<li class="active">
sub-subpage
<ul>
<li class="active">
sub-sub-page
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
It appeared simpler than I first thought:
Given the current structure, from all nested active elements you need to select the li that only has an a element. To make it work in general (other than a list element) don't use the li element selector at all.
I added two differently nested examples in the snippet along with an ::after text...
.active > a:only-child { color: red }
.active > a:only-child::after { content: ' (active)' }
<ul class="">
<li>
Introduction
</li>
<li class="active">
level 1
<ul>
<li class="active">
subpage
<ul>
<li class="active">
sub-subpage
<ul>
<li>
sub-sub-page
</li>
<li class="active">
sub-sub-page
</li>
<li>
sub-sub-page
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<br><br><br>
<ul class="">
<li>
Introduction
</li>
<li class="active">
level 1
<ul>
<li class="active">
subpage
<ul>
<li>
sub-sub-page
</li>
<li>
sub-sub-page
</li>
<li class="active">
sub-subpage
</li>
<li>
sub-sub-page
</li>
</ul>
</li>
</ul>
</li>
</ul>
<br><br><br>
<ul class="">
<li>
Introduction
</li>
<li class="active">
level 1
<ul>
<li class="active">
subpage
<ul class="">
<li>
Introduction
</li>
<li class="active">
level 1
<ul>
<li class="active">
subpage
<ul>
<li class="active">
sub-sub-page
</li>
<li>
sub-sub-page
</li>
<li>
sub-subpage
</li>
<li>
sub-sub-page
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
I want to hide this bit: <li class="categories">Kατηγορίες<ul> as seen in the code below (also see here https://poiimata.com/poets/):
<li class="categories">Kατηγορίες<ul>
<li class="cat-item cat-item-123">
<a href="https://poiimata.com/category/robert-frost/" >Robert Frost</a>
</li>
<li class="cat-item cat-item-124">
<a href="https://poiimata.com/categoryshlain-goldberg/" >Shlain</a>
</li>
I tried using
.categories {
display:none;
}
but the result was to hide all items below that one (the whole list).
That happen because you've an invalid HTML code in :
<li class="categories">Kατηγορίες<ul>
_________________________________^^^^
The browser will evaluate your code to the below format, that why all your li's become hidden :
<ul>
<li class="categories">Kατηγορίες
<ul>
<li class="cat-item cat-item-123">Robert Frost
</li>
<li class="cat-item cat-item-124">Shlain
</li>
</ul>
</li>
</ul>
Instead it should be :
<ul>
<li class="categories">Kατηγορίες</li>
<li class="cat-item cat-item-123">Robert Frost
</li>
<li class="cat-item cat-item-124">Shlain
</li>
</ul>
Snippet:
.categories {
display: none;
}
<ul>
<li class="categories">Kατηγορίες</li>
<li class="cat-item cat-item-123">Robert Frost
</li>
<li class="cat-item cat-item-124">Shlain
</li>
</ul>
It appears you just have an error in your HTML. You use an incorrect closing tag and therefore hide the entire thing.
<li class="categories">Kατηγορίες<ul> <!--- closed <li> with <ul> --->
<li class="cat-item cat-item-123">
<a href="https://poiimata.com/category/robert-frost/" >Robert Frost</a>
</li>
<li class="cat-item cat-item-124">
<a href="https://poiimata.com/categoryshlain-goldberg/" >Shlain</a>
</li>
Try instead:
<ul class="categories">
<li >Kατηγορίες<li>
<li class="cat-item cat-item-123">
<a href="https://poiimata.com/category/robert-frost/" >Robert Frost</a>
</li>
<li class="cat-item cat-item-124">
<a href="https://poiimata.com/categoryshlain-goldberg/" >Shlain</a>
</li>
</ul>
and change CSS to
.categories:first-child {
display:none;
}
That's just one way of accomplishing it. There are quite a few different angles you can take.
Since li contains tags that you do not need to hide, you need to masked the hidden text. for example like this:
.categories {
font-size: .1%;
}
.categories ul {
font-size: 100000%;
}
if only child elements is not a bug...
I am trying to style the nav in a template theme that I neither wrote nor picked. The nav uses lists in its structures and the children at various levels have the same class. I'm hoping someone can help me find the right CSS selector to pick the third level down. Here is the basic structure:
<nav class="nonbounce desktop vertical">
<ul>
<li class="item sub active">
<a class="itemLink" href="https://sitename/tools/" title="Tools">Tools</a>
<ul class="subnav">
<li class="subitem">
<a class="subitemLink" href="https://sitename/tools/outdoors/" title="Outdoors">Outdoors</a>
<ul class="subnav">
<li class="subitem">
<a class="subitemLink" href="https://www.safenready.net/tools/outdoors/mowers/" title="mowers">Mowers</a> THIS ONE!!!
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
What I need to do is grab the 3rd level down (called Mowers in example).
My ultimate goal is to style this level and move it vertically but first I need to be able to modify only that level with CSS.
This is a new site but I can provide the real site URL if that would help.
jc
You can try this
.subitemLink[title~="mowers"] {
font-size:20px;
}
<nav class="nonbounce desktop vertical">
<ul>
<li class="item sub active">
<a class="itemLink" href="https://sitename/tools/" title="Tools">Tools</a>
<ul class="subnav">
<li class="subitem">
<a class="subitemLink" href="https://sitename/tools/outdoors/" title="Outdoors">Outdoors</a>
<ul class="subnav">
<li class="subitem">
<a class="subitemLink" href="https://www.safenready.net/tools/outdoors/mowers/" title="mowers">Mowers</a> THIS ONE!!!
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
How can I display LI.parent side by side?
I'm using Bootstrap 3 and my HTML is:
<ul role="menu" class="dropdown-menu">
<li class="item-001 dropdown parent">
ABC
<ul role="menu" class="dropdown-submenu">
<li class="item-1">
Link 1
</li>
<li class="item-2">
Link 2
</li>
<li class="item-3">
Link 3
</li>
<li class="item-4">
Link 4
</li>
</ul>
</li>
<li class="item-002 dropdown parent">
DEF
<ul role="menu" class="dropdown-submenu">
<li class="item-1">
Link 1
</li>
<li class="item-2">
Link 2
</li>
<li class="item-3">
Link 3
</li>
<li class="item-4">
Link 4
</li>
</ul>
</li>
<li class="item-003 dropdown parent">
GHI
<ul role="menu" class="dropdown-submenu">
<li class="item-1">
Link 1
</li>
<li class="item-2">
Link 2
</li>
<li class="item-3">
Link 3
</li>
<li class="item-4">
Link 4
</li>
</ul>
</li>
</ul>
To have li elements side by side, you simply need to use a left float in your CSS like so:
.dropdown {
float: left;
}
I am trying to add 4 navigation buttons at right side. On Clicking which I would be able to navigate to respective divs in the same page.(just like a single page design).
I am adding following lines of codes to create 4 navigation buttons at right side of the page.
<div data-spy="affix" class="offset8 span1 well offset7 small">
<ul class="nav nav-list">
<a class=".move-1" data-target=".home-1-image"> A </a>
<a class=".move-1" data-target=".home-2-image"> B </a>
<a class=".move-1" data-target=".home-3-image"> C </a>
<a class=".move-1" data-target=".home-4-image"> D </a>
</ul>
</div>
But those lines of codes are not placing my 4 buttons at extreme right. Check snapshot.
Which bootstrap classes can be used to make it place at extreme right side and those should be fixed in position. (responsiveness should be well taken care of).
you can use .navbar-right and also add position: fixed; right: 0;.
that should do the trick
You actually need to use navbar-right, as I found out from here and used in my code:
<div class="navbar-collapse collapse navbar-right" >
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu pull-right" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
HTML
<div data-spy="affix" class="offset8 span1 well offset7 small nav">
<ul class="nav nav-list">
<a class=".move-1" data-target=".home-1-image"> A </a>
<a class=".move-1" data-target=".home-2-image"> B </a>
<a class=".move-1" data-target=".home-3-image"> C </a>
<a class=".move-1" data-target=".home-4-image"> D </a>
</ul>
</div>
CSS
.nav {
position: fixed;
float:right;
margin-right: 0px;
}