I want to hide following nav-stacked list ios class contained <li> element. I used this code for it. But it doesn't work at all. but background-color is apply for that element. Why is that. I use Bootstrap 3
.ios {
dispaly : none;
}
here is my html code:
<ul class="nav nav-sidebar nav-pills nav-stacked">
<li id="ios-parent">
<b class="fa fa-forumbee"></b> iOS
</li>
<li class="sub-menu">
<b class="fa fa-forumbee"></b> iOS1
</li>
<li class="sub-menu ios">
<b class="fa fa-forumbee"></b> iOS2
</li>
<li class="sub-menu">
<b class="fa fa-forumbee"></b> iOS3
</li>
<li class="sub-menu">
<b class="fa fa-forumbee"></b> iOS4
</li>
</ul>
you have a typo:
.ios {
display : none;
}
instead of dispaly
EDIT
Assuming that the spelling in your CSS is correct, it is probably a matter of your selector being overriden.
In Bootstrap:
.nav > li {
display: block;
}
this is more specific than your .ios selector, try replacing your one with:
.nav > .ios {
display: none;
}
which will make it specific enough to override Bootstrap styling. You can easily see what is being applied using the web inspector in your browser
Related
I'm using [class*="menu-class-"]:not(.menu-class-2) for my <li> elements, it works properly. The problem is when I want to point to the <a> tag inside the <li>, [class*="menu-class-"]:not(.menu-class-2) a. For some reason it doesn't work.
CSS:
.nav-menu .menu-class > .sub-menu li[class*="menu-class-"]:not(.menu-class-2) {
display: table-cell;
}
.nav-menu .menu-class > .sub-menu li[class*="menu-class-"]:not(.menu-class-2) a {
text-transform: uppercase;
}
HTML
<ul class="nav-menu" id="menu-main-navigation">
<li class="menu-class">
Nav 1
<ul class="sub-menu">
<li class="menu-class-3">
Nav 2
<ul class="sub-menu">
<li class="menu-class-2">Anchor, it should be lowercase</li>
</ul>
</li>
</ul>
</li>
</ul>
The problem is the <a> inside the <li class="menu-class-2"> is uppercase, but it should be lowercase, because I didn't add any property for this element. The container of the <a> (<li class="menu-class-2">), didn't get the display:table-cell property, so it works properly.
The JSFiddle link: http://jsfiddle.net/qnzos5t4/3/
The reason is because you do have a li that is not .menu-class-2:
<ul class="nav-menu" id="menu-main-navigation">
<li class="menu-class">
Nav 1
<ul class="sub-menu">
<li class="menu-class-3"> <!-- THIS ONE HERE -->
Nav 2
<ul class="sub-menu">
<li class="menu-class-2">Anchor, it should be lowercase</li>
</ul>
</li>
</ul>
</li>
</ul>
Since your css rule is using a whitespace to select the anchor after the li, every <a> descendant of it, will be uppercase. You need to use a child selector:
Updated JsFiddle
.nav-menu .menu-class > .sub-menu li[class*="menu-class-"]:not(.menu-class-2) > a {
I wanted to let my "Kuantan" menu to stay highlighted after i hover to their child menu which is "kiosk no.35". But i try to change few way to let it stay active but i had failed to do so. Anything i miss out on my code? Please point my wrong. Thanks
Here is the html code:
<ul class="treeview-menu">
<li class="dropdown"><i class="fa fa-angle-double-right"></i> Kuantan
<ul class="nav dropdown-menu" style="width:100px;height:30px">
<li><a href="chooseOption.php?kiosk=35" style="margin-left:-20px;margin-top:-13px;" >Kiosk No.35</a></li>
</ul>
</li>
<li class="dropdown"><i class="fa fa-angle-double-right"></i> UTC Kuantan
<ul class="nav dropdown-menu" style="width:100px;height:30px">
<li><a href="chooseOption.php?kiosk=36" style="margin-left:-20px;margin-top:-13px;" >Kiosk No.36</a></li>
</ul>
</li>
<li class="dropdown"><i class="fa fa-angle-double-right"></i> Temerloh
<ul class="nav dropdown-menu" style="width:100px;height:30px">
<li><a href="chooseOption.php?kiosk=37" style="margin-left:-20px;margin-top:-13px;" >Kiosk No.37</a></li>
</ul>
</li>
<li class="dropdown"><i class="fa fa-angle-double-right"></i> Bentong
<ul class="nav dropdown-menu" style="width:100px;height:30px">
<li><a href="chooseOption.php?kiosk=6" style="margin-left:-20px;margin-top:-13px;" >Kiosk No.6</a></li>
</ul>
</li>
<hr/>
</ul>
Here is the css where i hover the dropdown then the dropdown-menu will came out:
/*3rd level sidebar menu */
.dropdown:hover .dropdown-menu {
display: block;
left:220px;
top:0;
}
What i want is that after i hover the dropdown and went to dropdown-menu, the dropdwn will stay highlighted. Is there possible? Sorry i'm still new to this css skill.
As explained in my comment - .dropdown should still be "highlighted" on :hover, because .dropdown-menu is nested inside it and therefore you are still hovering over .dropdown.
/* Assuming you are making nested lists display:none */
ul{
list-style: none;
}
.dropdown-menu{
display: none;
}
.dropdown:hover{
background: yellow;
}
.dropdown:hover .dropdown-menu {
display: block;
left:220px;
top:0;
}
DEMO HERE
By using jQuery this is one option with your current code (fiddle here: https://jsfiddle.net/j0wLj6z9/)
<script type="text/javascript">
$(document).ready(function(){
$('.dropdown').hover(function(){
$(this).toggleClass('highlighted');
});
});
</script>
and your css is whatever you'd like:
.highlighted
{
background: yellow;
}
Also include jQuery in your project:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
I have set this:
list-style: none outside none;
And HTML:
<ul class="menu custompozition4">
<li class="item-507">Strategic Recruitment Solutions
</li>
<li class="item-508">Executive Recruitment
</li>
<li class="item-509">Leadership Development
</li>
<li class="item-510">Executive Capability Review
</li>
<li class="item-511">Board and Executive Coaching
</li>
<li class="item-512">Cross Cultutral Coaching
</li>
<li class="item-513">Team Enhancement & Coaching
</li>
<li class="item-514">Personnel Re-deployment
</li>
</ul>
but even though bullets are displayed. (I'm not quite sure that those are ul's bullets, because when you hover the text the "bullets" get underlined.)
Image Demo:
https://i.imgur.com/2wsnBqP.png
The third level from the menu
Have you tried setting
li {list-style-type: none;}
According to Need an unordered list without any bullets, you need to add this style to the li elements.
You can remove the "bullets" by setting the "list-style-type: none;" Like
ul
{
list-style-type: none;
}
OR
<ul class="menu custompozition4" style="list-style-type: none;">
<li class="item-507">Strategic Recruitment Solutions
</li>
<li class="item-508">Executive Recruitment
</li>
<li class="item-509">Leadership Development
</li>
<li class="item-510">Executive Capability Review
</li>
<li class="item-511">Board and Executive Coaching
</li>
<li class="item-512">Cross Cultutral Coaching
</li>
<li class="item-513">Team Enhancement & Coaching
</li>
<li class="item-514">Personnel Re-deployment
</li>
</ul>
ul.menu li a:before, ul.menu li .item:before, ul.menu li .separator:before {
content: "\2022";
font-family: FontAwesome;
margin-right: 10px;
display: inline;
vertical-align: middle;
font-size: 1.6em;
font-weight: normal;
}
Is present in your site's CSS, looks like it's coming from a compiled CSS file from within your application. Perhaps from a plugin. Changing the name of the "menu" class you are using should resolve the issue.
Visual for you - http://i.imgur.com/d533SQD.png
In my case
li {
list-style-type : none;
}
It doesn't show the bullet but leaved some space for the bullet.
I use
li {
list-style-type : '';
}
It works perfectly.
In your css file add following.
ul{
list-style-type: none;
}
you can use it this way to
{
Fdata.map((point,index) =>(
<ul style ={{listStyle:'none'}}key={index} >
<li className="text_paragraph"style={{fontSize:"0.8rem",color:"#ff1100"}}>{point.list}</li>
</ul>
))
}
Try this it works
<ul class="sub-menu" type="none">
<li class="sub-menu-list" ng-repeat="menu in list.components">
<a class="sub-menu-link">
{{ menu.component }}
</a>
</li>
</ul>
I'm making a navbar that consists of icons followed by the title of their page (e.g. Icon of a home followed by the text 'Home'). Let's say I want to change the color of only(!) the icon from black (default) to blue when hovering over either the text or the icon itself using the :hover selector. How can I do that? (I don't want to use jQuery, just CSS)
The markup is now something like this:
<ul id="navbar">
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-home"></i></li>
<li class="navname">Home</li>
</ul>
</li>
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-info"></i></li>
<li class="navname">Information</li>
</ul>
</li>
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-contact"></i></li>
<li class="navname">Contact</li>
</ul>
</li>
</ul>
Of course everything is {display:inline}
Set the hover to the ul inside the navgroups. CSS below does that, you can add whatever styling you like to it.
http://jsfiddle.net/PQShS/9/
CSS:
.navgroup ul:hover .navicon{
color:#FFF;
}
Your Code
<ul id="navbar">
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-home"></i></li>
<li class="navname">Home</li>
</ul>
</li>
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-info"></i></li>
<li class="navname">Information</li>
</ul>
</li>
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-contact"></i></li>
<li class="navname">Contact</li>
</ul>
</li>
</ul>
Since it boils down to changing the look of the icon when the cursor hovers anywhere above the ul element, you can do this:
.navgroup ul:hover .navIcon .icon-home
{
/*hover style for the icon*/
}
.navgroup ul .navIcon .icon-home
{
/*non-hover style for the icon*/
}
You should use the following css:
.navgroup:hover .navicon {
background-color: blue;
}
It will modify just the navicon anytime you hover anywhere within the navgroup
See this jsFiddle
you should use anchor tag
css:
.testing:hover {
color: red;
}
html:
<a class="testing" href="">
<span>hello1</span>
<span style="color:black;">hell2</span>
</a>
Give the whole styling to <a> tag and give the inline styling to other element inside <a> tag that you don't want to change.
I am using Twitter Bootstrap and I want to make a group of hidden fields inside a dropdown menu:
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Export
<b class="caret bottom-up"></b>
</a>
<ul class="dropdown-menu bottom-up pull-right">
<li><a id="downloadJsonButton">Link1</a></li>
<div id="downloadFormFilesDiv">
<li class="divider"></li>
<li><a id="downloadXformsButton">Link2</a></li>
<li><a id="downloadXmlButton">Link3</a><br /></li>
</div>
</ul>
</li>
However, links inside div element looks differently than those which are outside it. I want to make them look the same (links: 2 and 3 should look like link1). How can I accomplish it?
ul li{
width: 300px;
height: 70px;
background: #000;
color: white;
}
Now the menu is look the same to link content and to none content.
Try delete the div between <li> to <li>, you got iligal use with him.
Hope i helped..