My page is here.
My drop down navigation css is here.
I'm trying to add a transparent png image, image here, to the drop down portion of the menu. However, it's not appearing.
I thought adding a "suboptions" class to the dropdown ul would do the trick, along with setting CSS for that dropdown, but it doesn't seem to be working.
HTML in question:
<ul class="suboptions">
<li>F.A.Q.'s</li>
<li>Installation</li>
</ul>
CSS in question:
#menu li ul.suboptions {
background-image: url(/images/bkg_nav.png) !important;
background-color: transparent !important;
}
Any suggestions? Thanks!
you have float for the <li>
You have to clear the float, after <li> or apply bg image for li.
EX:1
add this to your css
#menu li ul.suboptions:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#menu li ul.suboptions {
display: inline-block;
}
html[xmlns] #menu li ul.suboptions {
display: block;
}
* html #menu li ul.suboptions {
height: 1%;
}
EX2:
add this to #menu li ul.suboptions li class
#menu li ul.suboptions li {
background-image: url(/images/bkg_nav.png) !important;
background-color: transparent !important;
}
Related
Here on my website http://www.collectifsaga.com/X/wordpress/fr/home-fr/ , I have a menu on hover.
In the menu, there is some filters (architecture, news …) to reorganize the grid (displaying the posts).
The problem is when I click on a filter, I would like the menu disappear. It's a small thing, but to have a clean webpage when I select a filter I would like to have only the logo at the top and the the grid with a few elements and not the menu.
Of course the menu disappear when the mouse is out of it, but I would like it disappears right after clicking on a filter.
Do you have an idea how to make it ?
Here is my CSS:
#nav, #nav ul {
align-text: left;
list-style: none;
max-height: fit-content;
}
#nav a {
display: inline-block;
}
#nav a:hover {
display: inline-block;
}
#nav li {
float: left;
}
#nav li ul {
position: absolute;
left: -999em;
}
#nav li:hover ul {
left: auto;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
And the same on mobile devices
Thanks a lot for your help : )
I am going nuts, what am I missing, something obvious I am sure, to make my nav buttons stack next to each other inline and not on top of each other. When I tried using display: inline they all got real tiny like slivers!
http://awesomenesslabs.com/staging/brenna-resp/
Just change your UL and LI CSS to this:
ul {
list-style: none outside none;
display: block;
}
li {
line-height: 18px;
margin-bottom: 12px;
display: inline-block;
}
#navbar > ul > li {
display: inline-block;
}
You should add a class like this.
#navbar ul li {
display: inline-block;
}
and your work tab hover position should be
.nav-work-button:hover {
background-position: 0 -47px;
}
Note: There seems to be a same problem before but I hope to ask it in better way, get an answer to mark as solved.
In short, transparent element borders are not really transparent because they take the color of the element background instead of being invisible eventhough it is drawn as an "outside border". How can I draw real transparent border with CSS?
Why do I want this?
Because I have a CSS menu with drop down on hover. Between the main menu and the sub menu, there is a requirement for a gap in between. The gap causes the hover to lose focus, thereby closing the menu. There may be other ways to do it, but transparent border, if possible, will be as neat.
HTML
<ul id="root">
<li>Item 1
<ul><li>Subitem 1</li></ul>
</li>
<li>Item 2
<ul><li>Subitem 2</li></ul>
</li>
</ul>
CSS
ul, li {
list-style: none;
margin: 0; padding: 0;
color: #fff;
}
ul ul { background-color: red; }
ul#root > li {
background-color: blue;
display: inline-block;
position: relative
}
ul#root > li > ul {
position: absolute;
display: none;
/* margin-top: 10px; want to have gap but the hover will lose focus*/
border-top: 10px solid green; /* if only this is transparent */
}
ul#root > li:hover > ul {
position: absolute;
display: block;
}
Use background color for li instead of ul & use padding top
ul#root > li > ul { padding-top:10px; background: transparent; }
ul#root > li > ul > li { background: #f00; }
or Use
ul#root > li > ul { border-top :10px solid rgba(0,0,0,0); }
or
ul#root > li > ul { border-top :10px solid transparent; }
enter code herehttp://jsfiddle.net/gkbcj9sr/2/
use rgba colour, but check if all browsers support them or not.
Check this fiddle: http://jsfiddle.net/gkbcj9sr/6/
I changed a little your css in order to keep your html intact:
Changed the ul ul rule, to ul ul li in order to add the background to li and not to the entire ul which was causing you troubles.
Added border-top: transparent to your ul#root > li > ul rule, to have your transparent gap.
Here's the new css:
ul, li {
list-style: none;
margin: 0; padding: 0;
color: #fff;
}
#root { border: 1px solid green; }
ul ul li { background-color: red; } /* Background only in your li elemnts
ul#root > li {
background-color: blue;
display: inline-block;
position: relative
}
ul#root > li > ul {
position: absolute;
display: none;
/* margin-top: 10px; want to have gap but the hover will trigger */
border-top: 10px solid transparent; /* transparent border top */
}
ul#root > li:hover > ul {
position: absolute;
display: block;
}
Hope this was you were looking for.
I want to add some kind of thick line underneath my currently active<li> items. Problem is, I can't set it up properly. I want the line underneath to inherit the width of its respective <li> or at least to be centered ...
Here's my fiddle
Much appreciated
If you want an absolutely positioned element to inherit the width of it's parent, you need to position that parent relatively. More info here. For your situation, you need to :
Add position:relative; to .nav li
Add width :100%; left:0; and remove margin-left: -6em; on nav li.current a:after, nav li a:hover:after
FIDDLE
You seem to be adding the :after content in two places which seems excessive.
Since you only want in on active 1i you can strip down your code as follows:
CSS
nav ul {
list-style: none;
margin-top: 1.25em;
}
nav ul li {
display: inline-block;
position: relative;
}
nav li a {
color: black;
text-transform: uppercase;
text-decoration: none;
padding: 1em 1.25em;
width: auto;
}
nav li.current a, nav li a:hover {
text-decoration: underline;
}
nav li.current:after {
background-color:black;
content: "";
height: 1em;
position: absolute;
left:0;
top: 100%;
width: 100%;
}
JSFiddle Demo
I have a menu:
<div class="headerMenu">
<ul>
<li>Home <span>Home Page<span></li>
<li>About <span>About My Website<span></li>
<li>Contact <span>Get in touch<span></a></li>
</ul>
</div>
My current CSS is as follow:
.headerMenu{
width: 100%;
}
.headerMenu ul{
margin: 0;
padding: 0;
float: left;
}
.headerMenu ul li{
display: inline;
}
.headerMenu ul li a{
float: left;
color: white;
padding-top:25px;
padding-left:50px;
font-size:24pt;
}
.headerMenu ul li a:visited{
color: white;
}
.headerMenu ul li a:hover, .menu ul li .current{
color: #fff;
background: url(../../Content/Images/menu-selector.png) repeat-x; /* 25x10 arrow/*
}
And now for the question:
How can i get the content in the span tag to be below the Main text.
When i hover over the anchor, How do i add the hover image as shown in screen shot
The Mockup i created in Photoshop looks like this:
I know this would be easily achievable by making use of images, but my solution requires that menu to be created dynamically.
1) How can i get the content in the span tag to be below the Main text.
You need to use display: block on the span to have it appear on a new line:
.headerMenu ul li a span {
display: block;
}
2) When i hover over the anchor, How do i add the hover image as shown in screen shot
Try to center the arrow to the top. This might work:
.headerMenu ul li a:hover, .menu ul li .current {
color: #fff;
background: url(../../Content/Images/menu-selector.png) no-repeat center top;
display:block;
/* also make sure that you use display block with correct height
so that you can positionate the arrow on the correct place... */
}
Add the following code for problem 1:
.headerMenu ul li a span {
display: block;
}
This sets the <span> to display as a block level element, therefore occupying the full parent container width by default.
For problem 2, there are multiple ways to do this. However, my suggestion would be to add the array to the <li> and use the :hover pseudo class. Note: that this will only work in IE for 7+.
.menu ul li:hover{
background: url(../../Content/Images/menu-selector.png) repeat-x;
}
See it in action - http://jsfiddle.net/kxqx8/1/ (I changed the colors to help display)