The Tux Crusader Posted February 21, 2013 Share Posted February 21, 2013 I have a minor issue that is bugging me. I can't seem to work it out (probably due to spending to much time on it). The issue is that when I hover over the menu items the whole menu bar expands and jumps the the content on the rest of the page down a bit. I've done other themes and never had this issue. I'm sure its something simple but my brain is escaping me and sometimes it pays to have a fresh set of eyes look it over. Here is the css for the menu; .main-navigation { /* wraps the entire navigation menu */background-color: #3B813B;font-size: 2em;text-decoration: none;border-bottom: 2px solid #3B813B;border-bottom-left-radius: 35px;border-bottom-right-radius: 35px;padding: 4px;}.main-navigation:after { /* Clears the floats after the menu */clear: both;content: "";display: block;}.main-navigation ul { /* The menu is an unordered list */list-style: none;margin: 0;}.main-navigation li { /* Makes the menu "list" items horizontal */float: left;margin-left: 1%;position: relative;}.main-navigation a { /* The individual list item links */display: block;text-decoration: none;text-align: center;padding: 4px;padding-left: 8px;padding-right: 15px;color: white;}.main-navigation ul ul { /* Submenu drop-down "box" */background-color: #3B813B;display: none;width: auto;position: absolute; top: 1.3em; left: 0;z-index: 99999;}.main-navigation ul ul ul { /* 3rd+ level drop-down "box" */left: 100%;top: 0;width: 100%;}.main-navigation ul ul li { /* List items inside the drop-down box */ }.main-navigation ul ul a { /* Menu links inside the drop-down "box" */padding: 4px;padding-left: 8px;padding-right: 15px;}.main-navigation li:hover > a,.main-navigation li.current_page_item a,.main-navigation li.current-menu-item a,.main-navigation ul ul a:hover { /* Hover styles for menu items */background-color: #469946;border-bottom: 2px solid #469946;border-radius: 15px;padding: 4px;padding-left: 8px;padding-right: 15px;}.main-navigation ul ul :hover > a { }.main-navigation ul li:hover > ul {display: block;} And the site url is;jonathantrinham.com I've tried changing different settings such as padding's etc but no luck. Any ideas anyone? Link to comment Share on other sites More sharing options...
dsonesuk Posted February 21, 2013 Share Posted February 21, 2013 When you hover over the anchor link element it appears with a 1px border (2px total difference), and it is removed when in normal state, you have to counteract this by applying a 1px margin for example, (transparent border, i think has problems associated with its use), on the normal state, and remove it on the hover state. Link to comment Share on other sites More sharing options...
The Tux Crusader Posted February 21, 2013 Author Share Posted February 21, 2013 When you hover over the anchor link element it appears with a 1px border (2px total difference), and it is removed when in normal state, you have to counteract this by applying a 1px margin for example, (transparent border, i think has problems associated with its use), on the normal state, and remove it on the hover state. Ok I tried applying a 1px margin like you suggested, I saw the normal state adjust to the margin but it's still doing the same thing. Link to comment Share on other sites More sharing options...
dsonesuk Posted February 21, 2013 Share Posted February 21, 2013 lose the padding on hover, OR add it to normal state .main-navigation a { color: #2ED2FF; display: block; margin: 1px;/*added by dsonesuk*/ text-decoration: none;} .main-navigation li:hover > a { background-color: #2ED2FF; border: 1px solid #2ED2FF; border-radius: 25px 25px 25px 25px; box-shadow: 0 0 15px #56DAFE; color: yellow; margin: 0; /*added by dsonesuk */ /*padding: 2px; removed by dsonesuk (this needs to be added to above OR removed*/} .main-navigation ul ul { background-color: #1E1E1E; border: 2px solid #2ED2FF; border-radius: 25px 25px 25px 25px; box-shadow: 0 0 5px #56DAFE; display: none; float: left; left: 0; position: absolute; top: 44px; /* top: 3em; amended by dsonesuk */ z-index: 99999;} Use px unit for top, this needs to be precise, not dependant on font size, which would cause to move away more than it should and make submenu unreachable, unless you have quick rreactions, that is. Link to comment Share on other sites More sharing options...
The Tux Crusader Posted February 21, 2013 Author Share Posted February 21, 2013 lose the padding on hover, OR add it to normal state .main-navigation a { color: #2ED2FF; display: block; margin: 1px;/*added by dsonesuk*/ text-decoration: none;} .main-navigation li:hover > a { background-color: #2ED2FF; border: 1px solid #2ED2FF; border-radius: 25px 25px 25px 25px; box-shadow: 0 0 15px #56DAFE; color: yellow; margin: 0; /*added by dsonesuk */ /*padding: 2px; removed by dsonesuk (this needs to be added to above OR removed*/} .main-navigation ul ul { background-color: #1E1E1E; border: 2px solid #2ED2FF; border-radius: 25px 25px 25px 25px; box-shadow: 0 0 5px #56DAFE; display: none; float: left; left: 0; position: absolute; top: 44px; /* top: 3em; amended by dsonesuk */ z-index: 99999;} Use px unit for top, this needs to be precise, not dependant on font size, which would cause to move away more than it should and make submenu unreachable, unless you have quick rreactions, that is. Thank you, for you help. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now