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})}
Related
Here is example http://jsfiddle.net/x9ghnf99/7/
Have ul li menu
<div class="nav" id="nav1">
<ul>
<li>Home</li>
</ul>
</div>
Set initial background color for li. Also set some padding from text (a) to "borders" of li. And also want to create rounded corners
#nav1 ul li {
display: inline;
background-color: #dddddd;
padding: 5px 5px 5px 5px;
border-radius:5px 5px 0px 0px;
}
On hoover want to change/replace color, for example to green, so as green fills whole li
With this http://jsfiddle.net/psxvy320/
#nav1 ul li :hover{
background-color: green;
}
green is only around text (a) and for other part of li i see previous background.
Tried http://jsfiddle.net/psxvy320/1/
#nav1 ul li :hover{
background-color: green;
padding: 5px 5px 5px 5px;
}
See part of previous background and li expands to left and right.
I want to see li the same widht/height, want only to change background, like here http://jsfiddle.net/psxvy320/4/ (below menu)
What need to change/add to the code?
There is a space between li and :hover in your code.
It should be .nav ul li:hover. When you add a space li :hover, it adds the hover effect to the child element (in this case, to the <a>)
Fiddle1: http://jsfiddle.net/psxvy320/5/
Fiddle2: http://jsfiddle.net/x9ghnf99/10/
Add the padding for a instead of li so that the whole item will be clickable. and change li display to inline-block
#nav1 ul li a{
padding: 5px 5px 5px 5px;
border-radius:5px 5px 0px 0px;
display: block;
}
.nav ul li {
display: inline-block;
}
http://jsfiddle.net/afelixj/x9ghnf99/11/
Note: There seems to be a same problem before but I hope to ask it in better way, get an answer to mark as solved.
In short, transparent element borders are not really transparent because they take the color of the element background instead of being invisible eventhough it is drawn as an "outside border". How can I draw real transparent border with CSS?
Why do I want this?
Because I have a CSS menu with drop down on hover. Between the main menu and the sub menu, there is a requirement for a gap in between. The gap causes the hover to lose focus, thereby closing the menu. There may be other ways to do it, but transparent border, if possible, will be as neat.
HTML
<ul id="root">
<li>Item 1
<ul><li>Subitem 1</li></ul>
</li>
<li>Item 2
<ul><li>Subitem 2</li></ul>
</li>
</ul>
CSS
ul, li {
list-style: none;
margin: 0; padding: 0;
color: #fff;
}
ul ul { background-color: red; }
ul#root > li {
background-color: blue;
display: inline-block;
position: relative
}
ul#root > li > ul {
position: absolute;
display: none;
/* margin-top: 10px; want to have gap but the hover will lose focus*/
border-top: 10px solid green; /* if only this is transparent */
}
ul#root > li:hover > ul {
position: absolute;
display: block;
}
Use background color for li instead of ul & use padding top
ul#root > li > ul { padding-top:10px; background: transparent; }
ul#root > li > ul > li { background: #f00; }
or Use
ul#root > li > ul { border-top :10px solid rgba(0,0,0,0); }
or
ul#root > li > ul { border-top :10px solid transparent; }
enter code herehttp://jsfiddle.net/gkbcj9sr/2/
use rgba colour, but check if all browsers support them or not.
Check this fiddle: http://jsfiddle.net/gkbcj9sr/6/
I changed a little your css in order to keep your html intact:
Changed the ul ul rule, to ul ul li in order to add the background to li and not to the entire ul which was causing you troubles.
Added border-top: transparent to your ul#root > li > ul rule, to have your transparent gap.
Here's the new css:
ul, li {
list-style: none;
margin: 0; padding: 0;
color: #fff;
}
#root { border: 1px solid green; }
ul ul li { background-color: red; } /* Background only in your li elemnts
ul#root > li {
background-color: blue;
display: inline-block;
position: relative
}
ul#root > li > ul {
position: absolute;
display: none;
/* margin-top: 10px; want to have gap but the hover will trigger */
border-top: 10px solid transparent; /* transparent border top */
}
ul#root > li:hover > ul {
position: absolute;
display: block;
}
Hope this was you were looking for.
I have a folder that drops down when you hover over it, however I've placed a 20px margin-top to the drop down so it's not pushed up against the main navigation. I like the spacing however when you move your mouse to go select a sub-item the menu disappears.
How would you adjust the margin of the drop down so that it stays so the user can select an item in it?
> ul {
display: none;
}
&:hover > ul {
display: block;
position:absolute;
text-align: left;
z-index:1000;
background-color:#nav-folder-bg-color;
width:150px;
padding: 10px;
list-style: none;
border-radius:#nav-border-radius;
margin-top:20px;
> li a {
color:black;
font-size: .8em;
text-decoration: none;
}
}
EDIT: Here is the menu I am working on - http://menudemo.squarespace.com/home
Put the margin on the first LI in the sub-menu:
&:hover > ul li:first-child {
margin-top:20px;
}
Needed to add
height:50px;
to .main-navigation ul li
I am trying to put this css menu together but I couldn`t get it working right. When you go over any link in top menu it opens up second menu although second menu disappears when you go on it. Plus, its misplaced. I couldn't place it in left:0
http://tinyurl.com/7rxskdj
#menu {width:800px;background-color:#FFF;min-height:30px;border:0;border-top:2px solid #8BD2E4;padding:0 5px;margin:0 auto;}
#nmenu {list-style:none;padding:0;margin:0;width:700px;}
#nmenu li {display:inline;float:left;height:20px;margin-left:45px;position:relative;}
#nmenu li.frst {margin-left:0}
#nmenu li a {font: 11px/30px Tahoma, Geneva, sans-serif;text-decoration:none;color:#979598;letter-spacing:2px;font-weight:bold;text-transform:uppercase;}
#smedia {width:100px;height:30px;float:left;}
#fb, #tw, #pt {background: #FFF url(smedia.png) no-repeat center;width:16px;height:16px;display:block;float:right;margin:7px 3px;}
#fb {background-position: -1px -1px;}
#tw {background-position: -18px -1px;}
#pt {background-position: -35px -1px;}
#nmenu li ul {display:none;position:absolute;top:30px;left:0;border:1px solid red;background-color:#FFF;}
#nmenu li:hover ul {display:block}
#nmenu li ul li {float:left;width:100px;}
try the below css:
#nmenu li {
display: inline;
float: left;
margin-left: 44px;
position: relative;
}
#nmenu li ul {
background-color: #FFFFFF;
border: 1px solid red;
display: none;
left: -5px;
padding: 0;
position: absolute;
top: 30px;
}
#nmenu li a {
color: #979598;
display: block;
font: bold 11px/30px Tahoma,Geneva,sans-serif;
letter-spacing: 2px;
padding-left: 2px;
text-decoration: none;
text-transform: uppercase;
}
To fix the disappearing menu: Add 5px bottom padding to your top level anchors which will remove the gap between elements.
The 'misplaced' problem is due to the default padding and margins on the ul and li elements. Explicitly set the margins and padding to position them.
You're applying a height to your list item instead of your link item inside your li, so move the height and also apply a line-height to your a tags that matches the height of your menu block and then you can simply reposition your submenu to appear exactly 100% from your menu item, like so:
CSS
#nmenu li a {
height:30px;
line-height:30px;
display:block;
}
#nmenu li ul {
top:100%;
}
Your absolute positioning leaves a gap between the container <li> and the <ul> child element. Decrease the value for "top" on #nmmenu li ul {}.
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.