I am using bootstrap3 dropdown-menu. Once I open and close the menu which contains subcategories, its hover color got disabled.
For example,
<ul class="nav navbar-nav">
<li> item1 </li>
<li> item2 </li>
<li> submenu </li>
<ul class="dropdown-menu">
<li> sub item1 </li>
</ul>
</ul>
My customized css for this,
.menu ul li a:hover {
background: #6f9be2;
}
When I check with developer tools on my browser, it got disabled.
How can I fix this?
Thanks in advance!
Use :
ul li a:hover {
background-color: #6f9be2 !important;;
}
ul li a:hover {
background-color: #6f9be2 !important;;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<ul class="nav navbar-nav">
<li> item1 </li>
<li> item2 </li>
<li> submenu </li>
<ul class="dropdown-menu">
<li> sub item1 </li>
</ul>
</ul>
Related
First, see the code below:
ul.parent li:hover{
background-color: red;
}
/* ul.parent li:hover .child{
background-color: white;
} */
<ul class="parent">
<li> App </li>
<li>
Components
<ul class="child">
<li> Badge </li>
<li> Dropdown </li>
<li> Navbar </li>
<li> Modal </li>
</ul>
</li>
</ul>
The problem is when I hover on components the ul child list also changes the background-color as expected. But I don't want it, When I hove on components only this li should be changed not the ul list.
Again, when I hover on it then I can change the ul background color as I need (for me it makes a lot of problems).
How can I do this stuff? Advance Thanks.
You can color only the a inside
ul li:hover>a{
background-color: red;
}
<ul class="parent">
<li> App </li>
<li>
Components
<ul class="child">
<li> Badge </li>
<li> Dropdown </li>
<li> Navbar </li>
<li> Modal </li>
</ul>
</li>
</ul>
Set the background property to the anchor tags, not the list items. You can then unset the color for nested anchor tags (or set a different color or effect):
ul.parent > li:hover > a{
background-color: red;
}
ul.parent > li:hover ul.child a{
background: unset;
}
ul.child > li:hover a{
background: blue !important;
}
<ul class="parent">
<li>
App
</li>
<li>
Components
<ul class="child">
<li> Badge </li>
<li> Dropdown </li>
<li> Navbar </li>
<li> Modal </li>
</ul>
</li>
</ul>
I'm trying to create a white strike through in my active nav. It works in firefox but for the other browsers it only shows up in black. Is there a way to get it to be white.
HTML
<div id="menu">
<ul class="nav nav-pills menu">
<li class="nav_item">
HOME
</li>
<li class="nav_item">
ABOUT US
</li>
<li class="nav_item">
PORTFOLIO
</li>
<li class="active">
CONTACT US
</li>
</ul>
</div>
CSS
.active {
color: #fff;
text-decoration: line-through;
}
Here is the jsfiddel: JSFIDDLE
This works for me in Chrome:
.active a{
text-decoration-color: inherit;
text-decoration: line-through;
}
.active {
color:#fff;
}
jsFiddle example
Try this setting it to the a
.active a{
color: #fff;
text-decoration: line-through;
}
DEMO
Try this:
<div id="menu">
<ul class="nav nav-pills menu">
<li class="nav_item">
<span style='color:black;'>HOME</span>
</li>
<li class="nav_item">
<span style='color:black;'>ABOUT US</span>
</li>
<li class="nav_item">
<span style='color:black;'>PORTFOLIO</span>
</li>
<li class="active">
<span style='color:black;'>CONTACT US</span>
</li>
</ul>
</div>
sorry if this has been asked before, I've looked and have tried several options but I can't seem to get this to work. I want to center my submenu. Each parent item has variable widths, and the submenu items also have variable widths.. This is my code:
.menu-wrap ul li{margin:0;padding:0;display:inline-block}
.menu-wrap ul li>a{font-size:16px;color:rgba(0,0,0,.6);display:block}
.menu-wrap ul li>ul{position:absolute;float:left;left:0;right:auto;top:90px;width:auto;padding:10px 0;background:#fff;opacity:0;border-top:solid 1px rgba(245,130,32,1)}
.menu-wrap ul li.parent:hover>ul{opacity:1}
<ul class="nav menu">
<li class="item-101">Home</li>
<li class="item-129 parent">About
<ul class="nav-child">
<li class="item-148">About Us</li>
<li class="item-116">Testimonials</li>
</ul>
</li>
<li class="item-114 parent">Services
<ul class="nav-child">
<li class="item-122">Services Page Example</li>
<li class="item-123">Services Page Example 2</li>
<li class="item-124">Services Page Example 3</li>
</ul>
</li>
<li class="item-154">Case Studies</li>
<li class="item-115">Gallery</li>
<li class="item-149">FAQ's</li>
<li class="item-117">Contact</li>
</ul>
Currently it's just left aligned.
I came across this guide recently and found it helpful.
http://css-tricks.com/centering-css-complete-guide/
I'm trying to create a horizontal list, something like this
<nav class="tabs">
<ul>
<li class="active">
<a>Bar Foo</a>
</li>
<li>
<a>Foo Bar</a>
</li>
</ul>
</nav>
The problem is that with only 1 li element it works (like this ) but with 2 the first li item is not positioned correctly (like this )
Can someone explain to me whats happening?
UPDATE: remove type with class 'active' on anchor!
No need to use absolute positioning. Just do as following:
li.active a {
color: #abc522;
padding: 20px 40px 13px;
width: 146px;
background-color: white;
}
fiddle
Remove the class active from the first list item tag.
<nav class="tabs">
<ul>
<li> <-- Here
<a class="active">Bar Foo</a>
</li>
<li>
<a class="active">Foo Bar</a>
</li>
</ul>
</nav>
OR
<nav class="tabs">
<ul>
<li class="active">
<a>Bar Foo</a>
</li>
<li class="active">
<a>Foo Bar</a>
</li>
</ul>
</nav>
I have 2 or more <UL> sets inside, and wants to only make first UL <a> set to bold.
in fact, this is a menu with multiple sub menus, and I only want to make parent links bold.
I know it can be done by adding some more ID's or classes, but this is not an option, and just want to try css method only.
<ul class="menu">
<li class="collapsed first">
<a title="Mechanical products" href="1">Mechanical Products</a>
</li>
<li class="collapsed">
<a title="Chemicals" href="2">Chemicals</a>
</li>
<li class="expanded active-trail">
<a title="Instrumentation" href="3">Instrumentation</a>
<ul class="menu">
<li class="leaf first">
<a title="Control valves FISHER" href="4">Control Valves</a>
</li>
<li class="expanded active-trail">
<a class="active" title="Corrosion Monitoring System" href="5">Corrosion Monitoring</a>
<ul class="menu">
<li class="leaf first">
<a title="Access Fitting Assemblies" href="6">Fitting Assemblies</a>
</li>
<li class="leaf last">
<a title="Coupon Holders, Coupons & Probes" href="7">Holders,Coupons</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="collapsed">
<a title="Mechanical products2" href="8">Mechanical Products2</a>
</li>
</ul>
as of this example, only "Mechanical Products", "Chemicals", "Instrumentation" and "Mechanical Products2" should get bold.
Use the first child selector: >
.menu > li {
font-weight: bold;
}
Not that if you need to support IE6, you'll have to do it manually, as IE6 doesn't support the > selector:
.menu li a {
font-weight: bold;
}
.menu li ul li a {
font-weight: normal;
}
It will probably do it...
ul.menu li a
{
font-weight:bold;
}
ul.menu li ul li a
{
font-weight:normal;
}
You'll have to use the child selector and make the top-level <ul> unique by giving it some class:
ul.top-level > li > a {
font-weight: bold;
}
Demo: http://jsfiddle.net/kJJw9/
ul.menu li.collapsed a{font-weight:bold;}