I want to keep hover color on parent list, when child list is hovered.
Here's example where second menu has submenus and when you hover over submenus, color of main menu is gone.
http://jsfiddle.net/ya8ga/
Thanks
HTML
<div id="menu2">
<ul>
<li class="l1">Home</li>
<li class="l2 dropDown">Hotel
<ul class="sub1">
<li class="l1">Hotel Sub 1</li>
<li class="l2">Hotel Sub 2
</li>
</ul>
change this:
#menu2 li a:hover{background:#89E00C; color:#2D1C13;}
to this:
#menu2 li:hover{background:#89E00C; color:#2D1C13;}
Related
I am using divi theme with a menu at the top which is aligned center.now I want to align the last two items to the most right side of the bar.
How can I do it?
Thanks for any code or help on this.
You can do this by using the :nth-child() pseudo class selector. Let's say your menu has code which is something like this:
<div class=menu>
<ul>
<li class=menu-item>Menu 1</li>
<li class=menu-item>Menu 2</li>
<li class=menu-item>Menu 3</li>
<li class=menu-item>Menu 4</li>
</ul>
</div>
Now let's say you want to move your 'Menu 3' and 'Menu 4' item to the right, you can target those elements and style them like so:
.menu-item:nth-child(3),.menu-item:nth-child(4) {float:right; /*or margin-left:50px;*/}
By that, only those menus will be targeted and styled. See my pen here
So, i want to make an active links in navbar, but it's working only on "Pocetna" page, but not on others...this is what i've done:
<nav>
<ul>
<li class="active">Pocetna</li>
<li>Forum</li>
<li>Galerija</li>
<li>Donacije</li>
<li>O nama</li>
</ul>
</nav>
and this is in my style.css :
nav li.active{
color: #CCCCCC;
}
I'm using bootstrap...
Did you create a HTML-file for each of your navlinks?
If you did, please do the following:
1. Go to your 'Forum' HTML index file, and change the Navbar to:
<nav>
<ul>
<li>Pocetna</li>
<li class="active">Forum</li>
<li>Galerija</li>
<li>Donacije</li>
<li>O nama</li>
</ul>
</nav>
2. Then go to your 'Galerija' HTML index file, and change the Navbar to:
<nav>
<ul>
<li>Pocetna</li>
<li>Forum</li>
<li class="active">Galerija</li>
<li>Donacije</li>
<li>O nama</li>
</ul>
</nav>
Do you understand where I'm going with this? You only need to add the class="active" to your active HTML index file.
Don't touch the CSS unless you wish to change the active color of your Navbar links.
In Short
I need to be able to activate a menu on hover while I'm dragging a sortable object. Is this possible?
The context:
I have a nav menu that's being powered by cssmenu, which basically takes list items and arranges them into a nice clean menu structure. I'd like to connect the lists in the nav menu and be able to rearrange the elements with jqueryui sortable connected lists. I can get the connected lists to work separately (outside of the cssmenu) and within one menu of a particular list. The problem is when I try to drag from one menu item to another, the drop-down isn't activated.
You can see in this fiddle that I can sort objects within a list but I can't activate the drop-down menu to drag it into another list (i.e. drag from the yellow list to the blue list or vice versa):
http://jsfiddle.net/9j5wyoLn/
html
<div id='cssmenu'>
<ul id='subNavElements'>
<li class='active has-sub'><a href='#'><span>About Us</span></a>
<ul id="sortable1" class="connectedSortable">
<li class="">Item 1</li>
<li class="">Item 2</li>
<li class="">Item 3</li>
<li class="">Item 4</li>
</ul>
</li>
<li class='active has-sub'><a href='#'><span>Articles</span></a>
<ul id="sortable2" class="connectedSortable">
<li class="">Article 1</li>
<li class="">Article 2</li>
<li class="">Article 3</li>
<li class="">Article 4</li>
</ul>
</li>
</ul>
</div>
js
//make sortable
$(document).ready(function() {
$( "#sortable1, #sortable2" ).sortable({
connectWith: ".connectedSortable"
}).disableSelection();
});
css: handled in fiddle (too much to show below)
Figured it out...
I added a class in the css called "openSaysMe" which styles the elements to appear.
#cssmenu .openSaysMe {
left: auto;
top: 34px;
opacity: 1;
}
Then I added the class when the items are being sorted, took the class away once the sorting was complete.
$( "#sortable1, #sortable2, #sortable3" ).sortable({
connectWith: ".connectedSortable",
sort: function( event, ui ) {
$('#cssmenu ul ul').addClass('openSaysMe');
},
beforeStop: function( event, ui ) {
$('#cssmenu ul ul').removeClass('openSaysMe');
}
}).disableSelection();
Here's a fiddle: http://jsfiddle.net/9j5wyoLn/2/
I have an html menu listing that look like this:
<ul id="navlist" class="clearfix">
<li class="home"></li>
<li class="xo">About Us</li>
<li class="xoxo">People</li>
<li class="xoxoxo">Business</li>
<li class="xo">News</li>
<li class="xoxo">Careers</li>
<li class="xoxoxo">Gallery</li>
<li class="xi">Contact Us</li>
</ul>
My challenge is ensuring the CMSListMenu apply the different classes to each li.
The li could styled each by using Edit > Document Properties > Navigation tab provided in portal engine.
It exposed the css styling of each page li. You can set the link, mouseover and current page classes.
I have a dropdown menu that I am using and can't quite get it to work.
<ul id="nav" class="dropdown dropdown-linear dropdown-columnar">
<li>Home</li>
<a href="http://www.example.com/products/index.php"><li class="dir">Products
<ul>
<li class="dir">Buckyballs</li>
<li class="dir">Calico Critters</li>
<li class="dir">Games</li>
<li class="dir">Magnetics</li>
<li class="dir">Playmobil</li>
<li class="dir">Quercetti</li>
</ul>
</li></a>
<li>Calendar</li>
...
</ul>
The menu is white with red text and then changes when I hover over them from red background to white text. However, when I hover over Products, the whole thing goes red when I hover over the li tag, and the text only goes white when I hover over it. But when I hover over what drops down, it's all red again. See the Navigation bar at redballoontoystore.com . Any help?
Add
.dir:hover a {
color: white!important;
}
to your css code. The !important is probably optional if you place the rule in the right place.
I'm pretty sure that if you switch the nesting of list item elements with your anchor tags, this will fix your issue:
<li class="dir">Buckyballs</li>