I did change Bootstrap 3 drop-down behavior from on click to on hover by adding some CSS
.dropdown:hover .dropdown-menu {
display: block;
}
It's working. The sub-menu has more than 2 <li> tags and when hovering below the 2nd <li> the sub-menu will disappear.
<li class="dropdown">
Exhibitor <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Opportunities</li>
<li>Exhibitor List</li>
<li>Market Information</li>
<li>Floor Plan</li>
<li>Pricing</li>
</ul>
</li>
I can hover until <li>Exhibitor List</li> only.
When I reach <li>Market Information</li> the sub-menu disappears.
The problem is this element:
<body>
[…]
<section style="position: absolute;left: 0;right: 0;top: 100px;z-index:4000;">[…]</section>
</body>
It is an invisible stripe above the menu at around the third element. As it has a higher z-index you'll leave the menu when hovering this element.
PS: It's the container that holds the links Exhibitor list, Floor plan and Opportunities.
Related
I'm trying to get the anchor to change color on active and focus but either my syntax is wrong or the style is being overrided.
<ul id="nav">
<li class="nav active">
HERE
</li>
<div class="dropdown">
<li class="drop nav active">
ABOUT
<div class="dropdown-content">
<ul>
<li>
<p class="drops">OTHER</p>
</li>
<li>
<p class="drops">THING</p>
</li>
</ul>
</div>
</li>
</ul>
and my css
.drop a:hover,
.drop a:focus {
background:lightgoldenrodyellow !important;
color:red !important;
}
The background changes on hover and focus because of the !important (doesn't work without that) but the color does not change. Just need to make sure I don't have some silly syntax error before looking for conflicts. If it's a conflict and there's some other trick to overide it, I'd appreciate it.
Before HTML 5, <p> was a block-level element and <a> was inline, the latter should not contain the sooner.
In other words: <a> should be inside <p>, not the opposite. Perhaps your document is not HTML 5, or at least your browser don't treat it as such. The following code works fine for me:
.drop a:hover,
.drop a:focus {
background: lightgoldenrodyellow;
color: red;
}
<ul id="nav">
<li class="nav active">
HERE
</li>
<div class="dropdown">
<li class="drop nav active">
ABOUT
<div class="dropdown-content">
<ul>
<li>
<p class="drops">
OTHER
</p>
</li>
<li>
<p class="drops">
THING
</p>
</li>
</ul>
</div>
</li>
</div>
</ul>
I have also fixed another syntax error in your HTML code: you forgot </div> before the last </ul>.
I see no real problem but you can:
change a:focus to a:active or make sure you are including the stylesheet in your html
I have the following dom tree:
<ul class="nav">
<li>Item1</li>
<li>Item2</li>
<li>Item3 That Has a List</li>
<ul>
<li class="sidebar-search">
<div class="input-group custom-search-form">
<input type="text" class="form-control" ng-model="searchText" placeholder="Αναζήτηση...">
<span class="input-group-btn">
<div class="dropdown">
<a id="toolsDrop" href="" role="button" class="dropdown-toggle btn btn-primary" data-toggle="dropdown" style="padding: 6px 6px 6px 8px;">Filters <b class="caret"></b>
</a>
<ul class="dropdown-menu" style="min-width: 0; top: 34px; left: -20px;">
<li>Filter1</li>
<li>Filter2</li>
<li>Filter3</li>
<li>Filter4</li>
</ul>
</div>
</span>
</div>
</li>
<li>
<ul class="nav nav-second-level sidebar-device-list">Another list that gets filtered by the dropdown and thus, changes size
</ul>
</li>
</ul>
<li>Item4</li>
<li>Item5</li>
</ul>
As you can see in these pictures:
, because the <div class="dropdown"> is under a div inside a list, other list items, will be rendered above the dropdown menu, if the list element that has the dropdown button is too small. I have tried setting the z-index of the dropdown menu to 99999 but it doesn't work, because of how z-indexes work (given that the elements have different parents, they are in a different stacking order/scope as shown in this article).
Is there any way, other than setting the positioning of the dropdown menu to fixed, to show it above the rest of the list? (I don't want it to be above everything in the page, just above the rest of the parent ul's elements.
FINALLY I remembered the cause:
the parent element has overflow-y: hidden
Set that to initial/visible and the dropdown will be shown.
Use z-index property with the higher values for the dropdown and lesser z-index for the other div which needs to go down.
Try with giving z-index:999 for nav class. It's worked for me.
I have a top bar navigation and need a single item and its dropdown to have a different background colour from the rest. I have managed to change the background colour of the item but cannot change its dropdown. I have figured out how to change the drop menus for all items and I have tried all different variations to get this to work with the single item but nothing works.
Can anyone help?
Just to clarify, I am trying to select the dropdown on the right hand side with the id of account and class of top-bar-colour. Thanks
NB: I am using foundation 5. I originally had that info in the title but someone deleted it, not sure why :/
.top-bar-section .top-bar-colour {background-color:red} //this works
.top-bar-section .dropdown li a {background-color:red} //this doesn't as it changes all dropdowns
.top-bar-section li a.top-bar-colour .dropdown li a { background-color:red} //this doesn't work either
<nav class="top-bar" data-topbar >
<ul class="title-area">
<!-- Title Area -->
<li class="name"> </li>
<li class="toggle-topbar menu-icon"><span></span></li>
</ul>
<section class="top-bar-section">
<!-- main nav section -->
<ul class="left">
<li><i class="fi-home medium"></i></li>
<li class="has-dropdown">
menu
<ul class="dropdown">
<li>Dropdown Level 1</li>
<li>Dropdown Option</li>
<li>Dropdown Option</li>
</ul>
</li>
</ul>
<ul class="right">
<li class="has-dropdown" id="account">
<i class="fi-torso medium"></i>
<ul class="dropdown"><li>Login</li></ul>
</li>
</ul>
</section>
</nav>
Assuming you want to change the color of the bar and drop down of the first one you can use this css
.top-bar-section .left .dropdown li a {background-color:red}
Let me know if my assumption is right
I want to the class dropdown invisible. dropdown will be used only for specific li tags. I tried this, but it doesn't work:
.dropdown{
display:none;
}
Is there a way to make this work? Am I doing something wrong in my CSS?
HTML:
<div id="MainNavigation" class="nContainer" name="MainNav" value="MainNavigation">
<ul class="nav navbar-nav">
<li class="dropdown">
page
<ul class="dropdown-menu">
<li>page1 </li>
<li>page2 </li>
<li>page3 </li>
<li>page4 </li>
<li>page5 </li>
</ul>
</li>
<a id="Homepage" class="navbar-brand" href="somepage.com">
<img src="/images/aGif.gif?v=24820" alt="someotherpage.com" border="0">
</a>
</ul>
</div>
My best guess is that it is a specificity issue. That is, .dropdown selector is not detailed enough to override other selectors that come with Bootstrap. Make the selector more specific (i.e., #MainNavigation.nContainer[name = "MainNav"] > .nav.navbar-nav > .dropdown) and see if it works.
Can someone help me. I have this html code and i want to design my submenus with css, but i am new in this and i really need a help
<div class="nav-collapse collapse">
<ul id="nav-list" class="nav pull-right">
<li>Home</li>
<li>About</li>
<li>Updates</li>
<li>Screenshots</li>
<li>How to</li>
<ul>
<li>Sub Item 1.1</li>
<li>Sub Item 1.2</li>
</ul>
<li>Permissions</li>
<li>Download</li>
<li>Contact</li>
</ul>
</div>
I want to have dropdown list for my submenus.My menu is horizontal at the moment
To get you started...
.nav li ul { display: none; }
.nav li:hover ul { display: block;}
Your HTML needs a minor edit also... You need to nest the sub-menu <ul> inside the parent <li>. Like below:
<li>How to
<ul>
<li>Sub Item 1.1</li>
<li>Sub Item 1.2</li>
</ul>
</li>
Here is a jsfiddle demonstrating this working, obviously it is not horizontal as I lack the styles you already made, the functionality still works however when you hover the mouse over "How To":
http://jsfiddle.net/Zuvdf/