I am creating a responsive mobile version of my website. As you can see in this jsfiddle, when a user hovers <li> item, the menu opens up but overlays the <li> instead of expanding the menu.
I have added display: block in various places and width: 100% hoping that would fix the issue.
What do I need in the code for the menu to expand with a <ul> tag correctly once hovering over an <li> tag?
It's not pushing the menu down because it's positioned absolutely, therefore being removed from the normal document flow.
Remove all position:absolute statements from the li ul selector.
Working demo:
http://jsfiddle.net/306pfgs3/1/
Related
I'm working on a Bootstrap project, the first task is to use Bootstrap navbar to build a navigation in the header. I want to use collapse functionality of Bootstrap to create a dropdown-menu div, when users hover or active a nav item, it will be visible. I want to make this dropdown-menu div 100% width of the screen.
Here's the sample code:
<ul class="nav navbar-nav">
<li class="dropdown">
<a ...>ABOUT</a>
<div class="dropdown-menu">
</li>
</ul>
The question is: the position property of dropdown-menu is absolute, which makes this div positioned based on the closest positioned ancestor. In the sample code is "li" tag, because in Bootstrap there's a rule:
.nav>li{
position: relative;
}
When I add a rule, which could make this "li" tag position static:
.navbar-nav>li {
position: inherit;
}
This rule is ignored by browser, I found this from Chrome inspect. When I uncheck the nav>li rule, my rule works. I want to know how does browser choose which of the css property value to render when it gets two rules on the same element and same property?
Thanks.
In short, specificity. The more specific the selector is, the higher priority it will be given.
For more details, look here... https://developer.mozilla.org/en/docs/Web/CSS/Specificity
Having said that, your rule appears to be wrong, as you need a dot to indicate a class...
.navbar-nav>li {
position: inherit;
}
We have a navigation menu built by <ul> and <li> tags using CSS. Such that sub-menu shows up when user hovers over a menu item.
I am trying to add border to the menu and sub-menus. Can I encapsulate all <li> elements in a <div> elements. I know, <div> is not a valid child for <ul> but browser (chrome) in this case renders it correctly. As per usecase we do not care much about other browsers.
Is it OK to use <div> tag to encapsulate <li> tags to add border in this case.
No it's not ok, <div> tags are not allowed in <ul> according to the W3C specs (see this page).
Why don't you add the border css rules to the surrounding <ul>/<ol> element ? Or you can encapsulate the <ul>/<ol> element in a <div> with borders.
I need a way to hide a parent <li> but keep the child <ul> visible.
So for example I have the following code:
<li class="toplevel">Link
<ul>
<li class="secondlevel">Link</li>
</ul>
<li>
Basically, I want the class toplevel to be hidden but the class secondlevel to be visible. Now I know I can do this with the css:
visibility:hidden / visibility:visible
But that keeps the height and width of the hidden class. What I need to use is more like:
display:none / display:inline
But of course, this doesn't work as the child isn't show and there isn't a way to make it re-show it appears.
Is there another method apart from using visibility to hide the parent but keep the child so that there is no height/width kept for the hidden parent?
Thanks.
It is impossible to hide parent and display it's children.
You can place toplevel Link which you want to hide into some inline tag:
<li class="toplevel"><span>Link</span>
<ul>
<li class="secondlevel">Link</li>
</ul>
</li>
And then, set display:none for this tag:
li > span { display: none }
I have a div that is hidden until the user clicks on a link. Using the a:active + div selector the div is shown. I then have div:active, div:focus to keep the div visible.
Whilst making the div appear was simple enough, keeping it visible is the problem I have. If I click on the div (taking the active off the link and placing focus / active on the div) then the div disappears again.
I have tried using div:hover and while that shows the div (even after I click on it) when I hover off the div still disappears. Why are :active and :focus not being applied to my div?
Example: http://jsfiddle.net/pJWPE/
You could take a different approach, using the :target pseudoclass instead. The best way to illustrate this is with an example:
#box {
display: none;
}
#box:target {
display: block;
}
Open Close
<div id="box">content</div>
Warning, I'm not sure what browser support is like for this example. It works in my version of Chrome.
Why are :active and :focus not being applied to my div?
Because :active and :focus have some restrictions:
6.6.1.2. The user action pseudo-classes :hover, :active, and :focus
Interactive user agents sometimes change the rendering in response to user actions. Selectors provides three pseudo-classes for the selection of an element the user is acting on.
The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it. On systems with more than one mouse button, :active applies only to the primary or primary activation button (typically the "left" mouse button), and any aliases thereof.
The :focus pseudo-class applies while an element has the focus (accepts keyboard or mouse events, or other forms of input).
There may be document language or implementation specific limits on which elements can become :active or acquire :focus.
http://www.w3.org/TR/2011/REC-css3-selectors-20110929/#dynamic-pseudos
A <div> isn't any form of input (<textare>, <input>, ...) or otherwise interactive element (like <a>, <audio>, <video>). It's just a container. Neither :focus nor :active are going to be applied.
Use :target instead as suggested by Casey.
Context is a menu containing submenus, which I want to be shown on clicking the related menu, and keep it showed while clicking a link. (quite similar to you).
HTML Markup :
<nav>
<ul>
<li>
<a href="#" >
</a>
<div>
<ul>
<li>
submenu link1</li>
<li>
submenu link2</li>
<li>
submenu link3</li>
</ul>
</div>
</li>
</ul>
</nav>
For Firefox & Chrome web browser, I personnally use :
nav > ul > li > a:focus + div, nav > ul > li > a + div:active {
display : block;
}
The first selector references to my link anchor, in order to get which submenu show when it is clicked/tab selected. The second one, is to keep the submenu div opened as you click on a link (it keep showing the active div).
This works great for me but not for IE unfortunatly.
I am unable to get :hover to function on my footer links. Does this have to do with z-index?
Thank you!
URL: http://bonusest.com/clients/republican_committee/
The problem is that your main div with id page-wrap is ontop (overlapping) of your footer so the links in the footer cannot be clicked.
Seems the .links and .contact divs don't contain any actual links - you need to wrap them in anchor tags like in your main navigation.
As for the .social div, this should work:
<h4>Find Us</h4>
<ul>
<li id="facebook">facebook</li>
<li id="twitter">twitter</li>
<li id="picassa">picassa</li>
</ul>
You'll want to keep the text-indent:-9999px to hide the text. To add a hover state, simply target #facebook:hover