I'm having an issue where I cannot get my sub nav to hide until on Hover. I assume I accidentally just deleted some kind of css that I need, but I cannot for the life of me figure out what I did.
The link to the dev site is: http://fallriverbenefits.com/dev/
I solved this by adding this to the css:
.nav li ul {
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul {
display: block;
}
.nav li ul li {
display: block;
}
Related
I'm trying to build a fairly simple Sass mixin for a dropdown menu built as an html list
My html is
<div class="parent">
<div class="name">My Name</div>
<ul>
<li>profile</li>
<li>logout</li>
</div>
then I have a mixin which is applied to the UL
#mixin dropdown() {
// create a dropdown list from a ul
position: absolute;
display: none;
margin: 0;
padding: 0;
list-style-type: none;
&:hover {
display: block;
}
li {
padding: 0;
background-color: red;
}
li a {
#include button();
padding-left: 0;
}
}
Then I am trying to simply make the css by including the mixin in the parent
.parent {
position: relative;
ul {
#include dropdown();
}
&:hover ul {
display: block;
}
}
The problem is that the mixin needs to set ul { display:block} when I hover on the parent so the css needs to read .parent:hover ul {displa:block} but of course, I'd prefer to have it assigned to the parent rather than add the class on the parent itself.
I thought I should be able to do * &:hover or .parent:hover & or something of that sort, but any combination I've tried has not worked.
Using .parent:hover & creates css of
header .parent ul:hover, .parent:hover header .parent ul {
display: block; }
Which is not right.
Suggestions? Without having to specify the parent element would be preferred.
Originally I was trying to put the mixin no the dropdown itself, but thanks to #cimmanon pointing out that I didn't include how I am using the mixin, I reconsidered the approach and have re-created the mixin to be applied to the parent, which works pretty well, but somebody may have a better way.
.parent {
#include dropdown();
}
#mixin dropdown() {
display: relative;
// create a dropdown list from a ul
&:hover ul {
display: block;
}
ul {
position: absolute;
display: none;
margin: 0;
padding: 0;
list-style-type: none;
&:hover {
display: block;
}
}
I am having problems getting the sub menu on my nav bar to display correctly - hovering doesn't seem to be over the correct link ("media") but in between, and the dropdown displays off to the right and not under "media" link.
Any suggestions gratefully received.
HTML:
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Testimonials</li>
<li><a>Media</a>
<ul>
<li>Photos</li>
<li>Videos</li>
</ul>
</li>
<li>More Info</li>
</ul>
</nav>
css here:
nav ul {
background-color: black;
text-align: center;
}
nav ul li {
display: inline-block;
padding: 10px;
}
nav ul li a {
color: white;
text-decoration: none;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
position: absolute;
}
nav ul ul li {
display: block;
}
Include the whole sublist ul inside the A tag, instead of after it. That means you need to adjust the nav ul li:hover > ul line as well (you can drop the > if you don't require further levels)
I've already received some valuable informations in answer related to my previous question but I still have the problem with media queries.
Previous question:
Replace menu item with icon (Prestashop theme)
I'm working with this demo:
http://livedemo00.template-help.com/prestashop_53577
The problem is connected with the look on mobile devices. Home icon is hidden. How to make similar effect on max-width: 767 px etc.? Classes are not the same in superfish-modified.css and I'm a little bit confused with that.
CSS Files which were changed:
blocktopmenu.css http://pastebin.com/PzyhH9x6
This code was added:
.stickUpTop.isStuck .sf-menu li:first-child a:before {
content: "\f015";
font-family: "FontAwesome";
display: inline-block;
font-size: 33px;
line-height: 55px;
color: black;
text-indent: 0;
width: 0;
left: 0;
}
.stickUpTop.isStuck .sf-menu li ul li a:before {
content: none!important;
}
.stickUpTop.isStuck .sf-menu li:first-child a:after{
width: 0;
}
superfish-modified.css:
http://pastebin.com/f2JG4hnT
This code was added:
.sf-menu li:first-child a {
text-indent: -9999em;
white-space: nowrap;
}
.sf-menu li:first-child a:before{
content: "\f015";
font-family: "FontAwesome";
display: inline-block;
font-size: 33px;
line-height: 70px;
color: black;
text-indent: 0;
width: auto;
left: 0;
}
.sf-menu li ul li a:before{
content:none!important;
}
You should add this:
.sf-menu li:first-child a:before {
position: absolute;
}
and remove on line 92 of superfished-modified.css the line
content: "";
because that is what remove you icon on smaller resolutions
I'm making a dropdown list and the items have quite distinct lengths, so a standard width for all the items makes it look strange, however I can't get the dropdowns to behave in a way that doesn't look strange anyway. I'd like for the dropdown unordered lists to be centered to their parents but without predetermining a set width. I've seen ways to do this with js, but wondering is there a way to acheive it just with CSS?
hhttp://jsfiddle.net/QacGj/2/
<div id="menu">
<ul>
<li>item 2</li>
<li>parentcategory
<ul class="child">
<li>1</li>
</ul>
</div>
#menu
{
display: block;
margin: 0 auto;
padding: 0;
text-align: center;
width: 100%;
}
#menu li
{
display: inline-block;
position: relative;
}
#menu li a
{
padding: 0 10px;
}
#menu li a:hover
{
text-shadow: 0 0 15px #FFF, 0 0 15px #FFF;
}
#menu li ul
{
border: thin #DDD solid;
list-style-type: none;
padding: 5px 0;
position: absolute;
margin: 0 auto;
width 100%
z-index: 99999;
}
#menu li ul li
{
width: 100%;
display: block;
padding: 5px;
text-align: left;
}
#menu li:hover > ul.child
{
display: block;
}
#menu li > ul.child
{
display: none;
}
I would try to achieve this so, that the main link and its child popup were inside the same wrapper, with automatic margin left and right. That way they would both be centered with the same center point. Obviously ul li structure won't work that well for it, or if it does, I'm too tired to think properly :)
Here's an example: http://jsfiddle.net/QacGj/4/
i have a big problem with a menue ONLY in IE8 - all other browsers work perfect:
There's an menue like this one:
<ul>
<li>Point 1</li>
<li>Point 2</li>
</ul>
and the CSS is this one:
ul li { padding-left: 23px; line-height: 29px; }
ul li:hover,
ul li.active { background: url(../images/bg_arrow_blue.png) no-repeat top left; }
ul li a { font-size: 18px; color: #FFFFFF; text-decoration: none; margin-bottom: 5px; letter-spacing: -0.03em; }
ul li a:hover,
ul li a.active { border-bottom: 1px solid red; }
So now - in IE 8 i have the problem, that on mouseover the links jumps up and down on mouseout, because of the border-bottom i think. All other browsers do it right with border bottom and no jump.
I have googled a lot and not found a solution.
Hope anyone here can help!
Thank you so much.
Sascha
Okay,
for anyone who's interested - i have the solution:
ul li a { font-size: 18px; color: #FFFFFF; text-decoration: none; margin-bottom: 5px; letter-spacing: -0.03em; padding-bottom: 1px; }
i just had to add a "padding-bottom: 1px;" to the "ul li a" statement.
Have a nice christmas.