here is the fiddle:
http://jsfiddle.net/frcdd/
This is a drop down menu using jquery. Now if you click on the fiddle you will see the problem.
When one clicks on a menu item say "canada", the menu will open fine and display the animation, however the background of the menu items will be clipped top and bottom. I am not sure what is going on. I suspect a CSS error somewhere but I have spent hours looking so here I am. Also, I can't seem to figure out how to change the text-decoration to none and change the hover, active, link, visited colors of the menu items.
div.container {
background:#292B29;
padding-top:0px;
margin-top: 0px;
padding-bottom:0px;
padding-top:0px;
Your uls has a margin 16px. Put margin 0px on it
.container ul{
margin: 0px;
}
Modified Fiddle
To change anything on visited anchors put pseudo class :visited
a:visited{
color: blue;
}
Related
I'm trying to edit the default menu for Wordpress TwentyTwelve theme. So far I have made the sub-menus horizontal but they don't align the same in Firefox than Chrome.
In Ff it looks as I want, but in Chrome, the sub menu align with the Menu item previously clicked, NOT to the far left of the main menu.
basically, I want a horizontal two-lines menu. I can' t get the "position:"" properly.
Here's how it looks in both browsers:
Here's how it looks in both browser:
Chrome:
http://imageshack.us/photo/my-images/248/cssmenuchrome.jpg/
I can't post more links because I need 10 reputation but the second image (menu in Firefox) in there too.
And here's a fiddle of my code so far:
http://jsfiddle.net/ZN9my/
.main-navigation li ul ul {
top: 0;
left: 100%;
}
.main-navigation .menu-item li {
display: none;
margin-right: 14px !important;
}
Your problem, as you say, is that both browsers seem to be dealing with your position:absolute; differently. position:absolute should be calculated in regards to the most recent parent element with an explicitly set position, which means that it's actually Chrome which is interpreting it right.
In this case, you've given .main-navigation li a position:relative, which means that Chrome is positioning the submenu, li.sub-menu, relative to it. If you remove position-relative from the CSS for .main-navigation li and add it to ul#menu-main, then li.sub-menu will be positioned relative to the main navigation ul, and should behave as you want it to across browsers. You'll probably want to change .main-navigation li ul's top from 100% to something like 37px so it still sits in the right place.
I've made the changes to your jsfiddle as well: http://jsfiddle.net/ZN9my/1/.
EDITED
So basically I was able to create the drop down shown above in html css, but when i converted it into a wordpress theme the drop down didnt work anymore,can someone help me out? Thank!
`homeabout
work
by client
by category
clients
contact
`
I did it here using a pseudo element that is positioned absolutely to the left of the li element. This then butts it up right up to the border on the parent UL element. In order to get the line on the bottom li to align with the bottom of the border I had to bump the li's down with a top position property, so I added some margin so it wont overlap with anything underneath it.
ul{
padding:16px 8px 0px 0px;
border-left:1px solid #000;
}
li{
display:block;
padding-left:12px;
position:relative;
top:9px;
height:20px;
}
Other then using images, this is probably the easiest way involving the least amount of css.
http://jsfiddle.net/PfChj/4/
EDIT
Here's the modified fiddle. I pretty much redid your css because it was a little hard for me to follow with all those sub ul and li children. Sometimes it's better to use a class for readibility, so you're going to have to redo your styles a bit. The sub menu is positioned in the center of the top li which has a set width now. If you don't want it at the center and what your top li's to flex with the link widths, you can modify this.
http://jsfiddle.net/FYnS4/2/
I have a main menu using a list. When the user hovers over an item it moves up to indicate the hover to the user all while changing the background color and displaying its sub-menu.
Link to the website with the issue.
Add debug=true to the query string if you need firebug.
The issue is in IE8 where if a sub-menu is active and the user hovers over any list item in the main level all of the previous items act like they are being hovered over too. This means that those list items move up but the background-color does not change. Depending how the user moves the mouse over the list items, some of the items will even go bellow the start position.
Here is the SASS that I converted to CSS in order to help understand how I move my menu items like that.
#mainmenu ul li:hover,
#mainmenu ul li.active{
margin-top: -15px
}
The only difference in HTML between The sub-menu being active and not is the main level list item has a class subactive which is not used by any css and the active sub list item gets a class active.
I have a feeling that the issue is somewhere between the background-color change and the margin-top negative value.
Usually one would expect the elements after to be affected and not the ones before.
Please avoid any Javascript fixes please.
Thank you!
In IE8, when you adjust the margin-top: -15px, it pushes the UL box top to fit, instead of letting the LI go outside the UL box. So all the other tabs move up to fit the new UL box.
I suggest setting the non-hover LI to margin-top: 15px and hover LIs to margin-top: 0--reverse it.
#mainmenu UL LI
{
margin-top: 15px;
}
#mainmenu UL LI:hover
{
margin-top: 0;
}
(This will still work cross-browser.)
The site is appearing fine in Mozilla, Chrome, and IE6. But IE7 onwards, the menu background image was not appearing at all.
In the file moo.menu.css, I made the following changes in li:
.ry-cssmnu ul li {
margin: 0; /* all list items */
padding: 0;
float: left;
display: block;
background: url(../images/mainnav-bg.gif) repeat-x center top blue;/*added this line*/
cursor: pointer;}
After this, the background repeat is appearing only where the menu text is present.
http://bit.ly/ie8issue
The site is at: www.agmrcet.com/cons
Thanks in advance.
You have to declare a height to that container. Your floating list items are not giving their parent container height because float removes them from the document flow. Your <ul> has a current height of nothing, and the background image won't remedy that.
#mainnav { height:44px; ... }
First of all, I would change the CSS background property according to the CSS syntax:
background: blue url(../images/mainnav-bg.gif) repeat-x center top;
Looks like the problem is with your
<div class="clearfix" id="mainnav">
tag. Have you tried adding a pink border or something (to debug it) to the mainnav element and then setting a fixed width on it to make sure it goes the full width?
I have the problem whereby I can't keep my sub menu visible. When I hover over the parent <li> it appears, and then when I move down to select one of the sub menu items it disappears. This is as soon as focus is lost from the parent <li>
I can't find a solution anywhere.
can someone please check it?
http://www.mymediaventure.com/about.php. It is under the Pricing tab. This is so frustrating. other examples I look at seem to work and I can't spot any clear differences that would hint why theirs works and mine doesn't.
Thanks in advance.
The problem is in styles.css and has to do with your #main_content h1 title element overlapping your div#primary_navigation. You can fix it by setting a higher z-index on your navigation element as I've done in the example below.
#wrapper #top #right div#primary_navigation
{
position : relative;
z-index: 2;
font-size : 11pt;
margin-top : 72px;
}
And a little further down in the CSS:
#main_content h1
{
position : relative;
z-index: 1;
top : -20px;
font-weight : normal;
}
If you want to visually see the problem, add a background colour to your #main_content h1 and you'll notice it almost completely overlaps your tabs. As a result you can trigger the dropdown when you hover over the top of the Pricing tab, but as you move down to the sub items, your mouse goes over the title and the menu disappears.
#main_content h1 {
font-weight:normal;
position:relative;
top:-20px;
}
THis is the problem, try deleting the position:relative, or change it to something else, ie:absolute
My solution to this was to expand the padding around the parent so that the selectable/hover region was larger.
In my case I set something like: .nav a {padding: 20px;}
I had a similar problem and I've found a solution for mine. Now I'm not versed in coding at all, some light Dreamweaver, but that's about it. I was having this problem with a tumblr theme and none of these solutions worked. Only after changing top: 25px; to top: 20px;, the dropdown did work for my site. Hope this helps someone.
I followed the advice of the previous poster but with modifications. I changed all of my relative positioning to absolute for all items on the page (header, menu, and content) and this fixed the menu problem. I had to change for all three items for the menu to stop disappearing on mouseover.
I had a margin set on the <ul> which I removed and put on a div containing the <ul>.
anyway I managed to get a drop down menu from image hover effect, example and example code here dropdown menu from custom button image hover
I hope this helps someone
I had a similar problem: a drop down menu disappeared when the mouse pointer hovered over a part of the drop down menu at which underneath a adsense ad was shown. Putting the ad down in the html page solved the issue. Did not try out other solutions.
I also had this problem. The problem was that there was a space between where the main menu ended and where the dropdown menu began, so while moving the nouse down to the dropdown options, it would pass over an area of the background and the menu would disappear.
The fix was adjusting the top position as shown below (in my case, from 4.0 to 3.75em)
.main-navigation ul ul {
position: absolute;
top: 3.75em;
I had the same problem with the secondary hover navigation going away when i tried to move from the primary to the secondary menu. What seemed to help for me was to move the margin up into the primary menu. I added the following line to my already existing ul li ul { margin-top: -.1em; }