I am having trouble with my submenu. It's a simple drop down menu that I have beside my posts and I got it working and all. The problem is that depending on my scroll position, it will sometimes reach the bottom of my screen. I was thinking about making something similar to the menus of http://9gag.com where the menus are fixed in 50% of the screen. But I guess that would be too complicated.
I tried to set the parent menu z-index to a lower value but it didn't work? I'd be thankful for any help.
Here's the fiddle: http://jsfiddle.net/HyKuR/
.Post .Bottom .nav {
display: block;
line-height: 24px;
font-weight: bold;
margin: -140px 450px 0px;
position: absolute;
z-index:2;
}
.Post .Bottom .nav li.submenu ul {
visibility:hidden;
-webkit-padding-start: 0 !important;
margin-left: 40px;
margin-top: -215px;
bottom:100%;
background-color: white;
border:1px solid gray;
}
.Post .Bottom .nav li.submenu:hover ul {
visibility: visible }
.Post .Bottom .nav li.submenu ul li {
border-bottom:1px solid gray
z-index:10 !important;
}
As drip says give us your code in a jsfiddle so we can help. But from the top of my head I'd say your problem is down to your position:absolute on both menus. You should use position:relative on the parent menu then use position:absolute on the submenu so that it is placed based on the parent menu rather than the screen.
Related
My sub menu disappears immediately after I move my mouse pointer to scroll towards the sub menu. Feel like I have screwed my CSS somewhere. I could not figure out after several attempts to make it stay active. I followed few tutorials(have a look at it) where they have called the hover on the ul instead of a(anchor), I tried similar ways but could not achieve what I want. Please point out where I have made the mistake. Here is my fiddle(my code). Sample CSS code for hover is below.
#topnav ul li ul
{
display: none;
position: absolute;
text-align: left;
background:#510000;
top:30px;
}
#topnav ul li:hover ul
{
display: block;
}
Put the padding on your list items instead of your ul or container. That way the dropdown overlaps your hover element and your browser never thinks that you hovered out of the element. See this:
#topnav li {
display:inline-block;
padding:10px 0;
margin-right:30px;
position: relative;
}
http://jsfiddle.net/jeffreyTang/q5cmqLrf/1/
You can also give
#topnav ul li ul {
padding-top:30px
}
instead of:
#topnav ul li ul {
top:30px
}
The problem is with your padding being at the nav level and you trying to make the drop down appear below it. Because you position your dropdown away from the parent li, you're no longer hovering over it when you move your mouse down. To fix, remove the padding from the nav and add it to the li.
remove padding from here:
#topnav{
display:block;
clear:both;
width:500px;
margin:0;
padding:0;
text-align:center;
}
add to here:
#topnav li{
display:inline-block;
padding: 15px 0 15px 5px;
margin-right:30px;
position: relative;
}
remove top from here:
#topnav ul li ul {
display: none;
position: absolute;
text-align: left;
background:#510000;
}
fiddle: http://jsfiddle.net/zj8krh95/7/
Here's a way to do it (it's more of a trick):
http://jsfiddle.net/zj8krh95/5/
#topnav ul li:hover {
padding-bottom: 10px;
margin-bottom: -10px; /* so that the menubar's height stays the same */
}
#topnav ul li:hover ul {
margin-top: -10px; /* so that the menu opens at the right position */
}
Basically, on hover, i extend the menu item's height so that no mouseout is trigger when i move down to the menu.
I have a purely .css driven menu. Currently, I have the flyout on the sub-sub menu appearing at 180px. This obviously doesn't work because as soon as menu text that exceeds 180px is entered, the submenu text is overlayed with the sub-submenu text (In the example, Highlighting Products > Entertainment Centers USA shows the problem).
The spot in the .css where I have explicitly stated the 180px width is below. I need it to be dynamic, i.e. the desired behavior is for the flyout to align with the right side of the first level vertical menu regardless of the first level submenu's width.
/* -- Appearance of second vertical dropdown menu unhovered (submenu of first level vertical menu) -- */
.rmenu li ul li:hover ul li a {
padding: 0px 0px 0px 5px;
background: #e8dec7; /*background color for submenu hovered text*/
color: #51db29; /* this is the color of the sub-sub menu text. I made the color (#51db29) 'unusual' as an example. Should be changed to something less jarring (of course) */
word-wrap: break-word;
min-width:100px;
position: relative; left: 180px; top: -35px; /* display 3rd level to the right (180px) */ /*left: 180px*/
}
The jfiddle is here:
http://jsfiddle.net/9c8wcxju/4/
Many, many thanks.....
I have simplified everything down and made this for you. You can expand on it and do what you want with it. I couldn't really work with yours, ended up deleting most of the css.
As you can see I have added class to each level of the sub-menu so it is easier to target. What I have created is what I think you wanted, I hope this puts you on the right track.
http://jsfiddle.net/9c8wcxju/5/
.rmenu ul li {
margin: 0;
padding: 0;
position: relative;
}
.rmenu ul {
list-style-type:none;
margin:0;
padding:0;
}
.rmenu li a {
display:block;
min-height: 35px;
line-height: 35px;
font-family: "Arial", sans-serif;
font-size: 18px;
color: #000000;
background-color: #e8dec7;
text-decoration: none;
white-space: nowrap;
}
.rmenu li:hover a {
background: #d6cbb0;
}
.rmenu .hidden {
display: none;
}
.rmenu .level_1 > li {
float: left;
}
.rmenu .level_1 > li a {
padding: 0 10px;
}
.level_1 > li:hover .level_2,
.level_2 > li:hover .level_3 {
display: block;
}
.level_2 {
position: absolute;
left: 0;
}
.level_3 {
position: absolute;
top: 0;
left: 100%;
}
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'm trying to create a hover effect for the whole anchor element but it's not working, as soon as the mouse is out of the text the drop down menu disappears:
Here is the test site.
Css:
.menu{}
.menu li{float:left;margin-right:24px;list-style-type:none;height:46px;}
.menu li a{width:100%;text-transform: uppercase;color:#39444A;text-decoration:none;font-weight: bold;font-size:18px;display:block;height:46px;}
.menu li a:hover{border-bottom-style: solid;border-bottom-width: 2px;border-bottom-color: #E87D05;color:#E87D05;height:46px;display:block;}
ul.sub_navigation , .sub_navigation
{
position: absolute;
display: none;
z-index: 100;
background-image: url('/images/menu-bg-png.png');
background-repeat:repeat-y;
padding:10px 0px 10px 28px;
}
Where am I getting it wrong?
CSS ( add ):
.menu li a {
position: relative;
z-index: 5;
}
In your case is because the div #slider-container is overlaping the #header div. I see that the #slider-container is absolute.
In this case you can add extra 20 - 30px on the TOP property and get rid of the padding-top.
The other thing to do is just to add position:relative and z-index:10 (for example) on the #header div
Try this:
.menu > li:hover .sub_navigation {
display: block;
}
the anchor elements have the size of the text and nothing else.
The space between link and link is the right margin of the li.
remove
li {margin_right: 40px}
and set
a {padding_right: 40px}
I build a simple list and added to it css. Now the vertical menu works.. the problem is in the section of the css. The list items area is bigger than the links themselves. That means that if the user clicks on the area, nothing happens cause the links area doesnt cover all the lists items area.
#sidebar1 li {
list-style: none;
position: relative;
width: 120px;
height: 30px;
padding: 0 20px;
background-color: black;
line-height: 30px;
cursor: pointer;
}
#sidebar1 li a {
text-decoration: none;
color: white;
}
What I thought to do was to match the links padding or width to that of the lists width. So wherever the users clicks on the menu's item a link will be clicked. Thats problem is that i tried it and it didnt work
Move most of the styling to the A-tag and fix a few things:
#sidebar1 li{
list-style: none;
position: relative;
margin:0 <-- added
padding:0 <-- added.
}
#sidebar1 li a{
text-decoration:none;
color: white;
width:120px;
height: 30px;
padding:0 20px;
background-color: black;
line-height: 30px;
cursor:pointer;
display:block <-- this is important
}
Just use display: block to make the a element fill the available horizontal width of the parent element:
#sidebar1 li a{
text-decoration:none;
color: white;
display: block;
height: 100%;
}
The height: 100% forces the a to inherit the full height of the parent element. Remove padding from the parent li, otherwise you'll enforce a space between the edges of the a and the li.
Further, in your li I've not only removed the padding (which simply causes problems as noted above), but also the cursor: pointer, as if the user hovers over the link the cursor will change automatically, if they're not over the link then the cursor's type, that of pointer, is merely confusing when clicking produces no effect:
#sidebar1 li {
list-style: none;
position: relative;
width:120px;
height: 30px;
background-color: black;
line-height: 30px;
}