My second question today. I don't seem to find the answer why the dropdown disappears before I can reach it with my mouse cursor.
http://www.liveaerosmith.com
The "1970s" button in the top menu has a submenu, but it can't be clicked because it disappears before the cursor can reach it.
Same behaviour on FF and Chrome.
This image says it all:
so there's a clear gap between the element with the :hover state and the child ul item
you could create a transparent :after pseudo element on the hovered LI that will connect the elements and "fill" the gap.
Or rather do it the proper way:
.site-bar {
border-top: solid 1px #ebebeb;
border-bottom: solid 1px #ebebeb;
/*padding: 13px 0; REMOVE THIS */
z-index: 10000000;
}
.navigation > li > a {
margin-right: 30px;
padding: 13px 0; /* ADD THIS */
}
.navigation li:hover > ul, .navigation .sfHover > ul {
top: 44px; /* INSTEAD OF 34px */
}
Related
I created a to-do list and applied styling that sets even list items to have a light grey background color with li:nth-child(even), but there's a gap to the left of these lines where the white doesn't continue due to setting margin-left: 15px for li elements. I would like the white to be filled in all the way to the left side of the container, but for the text to remain starting 15px to the right of it. How can I accomplish this? Here's the relevant CSS (view CodePen for more):
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
background: white;
/* distance from the top of the first line of text to the top of the second */
line-height: 40px;
min-height: 40px;
color: #666;
margin-left: 15px;
position: relative;
}
/* Sets color of even li elements */
li:nth-child(even) {
background: #f7f7f7;
}
/* Sets appearance of span content (Bootstrap trash can icon) when user hovers over list item */
li:hover span {
width: 40px; /* Applies to icon background */
opacity: 1.0;
}
Change
margin-left:15px;
to
padding-left:15px;
My page is https://visiapera.wordpress.com/ . I have been trying to make some changes in my drop-down menu but it does not seem to work.
I am trying to replace the red color when the mouse is over with white and just underline the word.
Then even though I make the text-align to left it does not align it to the left side of the main title. I will appreciate any suggestions...
.main-menu ul a {
text-align: left;
width: 170px;
padding-left: 8%;
padding-right: 0;
margin-left: 15%;
border-top: 1px;
border-bottom: 1px;
border-left: 0;
border-right: 0;
background-color: rgba(255,255,255,0.6);
}
In detail:
If you go to the drop-down menu of the "design" title you will see that it is not aligned to the actual title (meaning the "design").
Then when the mouse goes over the drop-down menu it turns red and I do not want to have that (I only want it to be white).
I hope it is clear now as it is not possible to upload any photo...:(
To get the hover effect that you want:
You should change:
.main-menu ul a:hover {
background: #ca2017 none repeat scroll 0 0;
border-color: #ca2017;
color: #fff;
}
to something like:
.main-menu ul a:hover {
border-bottom-style: solid;
border-bottom-width: 1px;
border-color: black;
background-color: #fff;
}
You may also want to remove the border radius from:
.main-menu > li > a, .main-menu ul > li:first-child > a, and .main-menu ul > li:last-child > a
Your sub menu alignment issue is a bit of a mess.
Your problems are from the negative left margins and the left positioning listed below (change them all to "0"):
.main-menu ul {margin-left: -110px; /* change to 0 */}
.main-menu ul a {margin-left: 15%; /* change to 0 */}
.main-menu > li:hover > ul {left: 50%; /* change to 0 */}
To correct 3rd level sub menu alignment:
Update the margin-left on your 3rd level menus to match the width of your 2nd level dropdown plus the additional space for the css arrow. It is currently 235px and should be 180px.
.main-menu ul ul {margin-left: 180px; /* 170px ( width of .main-menu ul a) + 10px (CSS Arrow - .main-menu ul ul::after {left:-10px})}
I am trying to put a border around a link on hover, and the style applies to it, but it jumps (the element jumps) when i hover over it... what can I do?
code:
.navigation li:hover {
border: 1px solid #ccc;
}
You 'jump' is caused by the 1px height of the border, that make your li move
You might use
.navigation li:hover {
border-color: #ccc;
}
.navigation li {
border: 1px solid #<parentBackgroundColor/transparent>;
}
instead. This way, the border is here from the beginning, so no jump on hovering, and it's invisible, since it's the same color of the parent container or transparent.
.navigation li {
border: 1px solid transparent;
}
You can add a transparent border when you're not hovering, then it won't jump.
Or, you can remove a total of 2px vertical padding around the element, for example:
.navigation li {
padding: 10px
}
.navigation li:hover {
padding: 9px;
border: 1px solid #ccc;
}
I am trying to replicate the effect I see
Currently I have http://jsfiddle.net/GWkk3/
How can I remove the border between the active li and the 2nd level nav?
Draw the border on the parent <li> elements rather than the child <ul>. Add/change these properties:
.appTabs li {
border-width: 1px 0 1px 1px; /* was 1px 0 0 1px */
}
.appTabs li.active {
border-bottom: 1px solid #EEE;
}
.appTabs li ul {
top: 25px; /* was 24px */
}
And remove this property:
.appTabs li ul {
border-top: 1px solid #CCC;
}
That gets us this far:
Now the inner border just needs to be extended all the way to the right (I'm working on that part).
Make the active tab have 1px extra bottom padding, and have a bottom margin of -1px, so it sits over the line.
I have a horizontal menu. I want to have a border around the menu (not the entire-row, only the space menu is covering). When I put border on ul, it covers the entire row, when I put border on li, it has border between menu items as well.
<ul id="menu" style = "text-align:left;">
<li>...anchor stuff...
</li><li>...anchor stuff...
</li><li>...anchor stuff...
</li><li>...anchor stuff...
</li><li>...anchor stuff...</li>
</ul>
Here is the CSS:
ul#menu
{
padding: 0 0 0px;
position: relative;
margin: 0 0 0;
text-align: right;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
ul#menu li
{
display: inline;
list-style: none;
}
ul#menu li a
{
padding: 0px 0px;
margin-right:20px;
font-weight: bold;
text-decoration: none;
line-height: 2.8em;
}
Kill display: inline on the list items and float them left instead. Float the container as well, which will ensure that it's only as wiide as its contents. Finally, set overflow: hidden on the ul.
Declare ul with display:inline-block. It'll cause ul to take only space necessary to display its contents, not 100% of it.
An example
Use display: inline-block on the ul and add the border to the ul.
If you need IE6 compatibility:
#menu li {
border-top: 1px solid #000;
border-bottom: 1px solid #00;
}
You might be able to use li:first-child (I can't remember, and don't have a copy of IE6 to test with) to apply:
#menu li:first-child {
border-left: 1px solid #000;
}
But you'll likely have to add either a class-name, or id, to the first and last li elements to give them the appropriate border-left and border-right.