How to draw real transparent border with CSS? - css

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.

Related

Menu stays open on click

I have a menu with drop down statement on hover the problem is that when i remove the mouse it hides again, can someone help me keep the sub menu open when i click the option on the main menu?
It show´s when mouse hover but i need it to stay open even after i remove the mouse cursor.
thanks
#cssmenu > ul {
position: relative;
z-index: 999;
float: left;
border-bottom:2px solid lightblue;
}
#cssmenu > ul li {
float: left;
min-height: 0px;
line-height: 1.3em;
vertical-align: middle;
padding: 0px;
}
#cssmenu > ul li.hover,
#cssmenu > ul li:hover {
z-index: 599;
cursor: default;
}
#cssmenu > ul ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
}
#cssmenu > ul ul li {
float: none;
}
#cssmenu > ul li:hover > ul {
visibility: visible;
border-bottom:2px solid lightblue;
color: white;
}
#cssmenu {
width: auto;
background: black;
font-size: 13px;
color:white;
top:0px;
}
#cssmenu > ul {
padding: 0 1px;
display: block;
float: none;
zoom: 1;
}
#cssmenu > ul:before {
content: '';
display: block;
}
#cssmenu > ul:after {
content: '';
display: table;
clear: both;
}
#cssmenu ul ul {
margin: 0 10px;
padding: 0 10px;
float: none;
background: black;
border-bottom:2px solid lightblue;
border-left: 1px solid lightblue;
border-right: 1px solid lightblue;
border-top: none;
right: 0;
left: 0;
visibility: hidden;
<div id='cssmenu' style="opacity: 0.5;filter: alpha(opacity=50);align-top:0px;color:white;">
<ul>
<li class='activeM'><a class="inicio" href='#'><span>Home</span></a></li>
<li class='activeM'><a class="competencias" href='#'><span>Competências</span></a>
<ul>
<li class='active'><a class="saude" href='#'><span>Saúde</span></a></li>
<li class='active'><a class="ecosocial" href='#'><span>Economia Social</span></a></li>
<li class='active'><a class="desnvsustent" href='#'><span>Desenvolvimento Sustentado</span></a></li>
</ul>
</li>
</div>
thanks in advance.
The most recent comment seems to make this more clear that you're looking for a visual fading effect. You're right. A transition would be a good way to go.
You'll need to use opacity as well as visibility. I mocked up an example here: http://jsbin.com/cesacu/1/edit?html,css,output
You may want to play with the transition timing function or duration to get the effect you're looking for.
Edit: Thanks for the demo. It seems to have appropriate behavior at larger screen sizes, when the menu is all on one level. You're right that there's a problem when the menu goes to two levels on smaller screens.Is that the situation where you're experiencing the real problem?
I found this CodePen that shows one way to make a responsive two-level menu like this. If you need a pure-CSS menu, try searching for "responsive pure css mega menu". There look to be some other options there.
Initial answer:
I do think you'll need Javascript as Hakim said. One option would be to add classes that replace your :hover pseudo classes, then use a jQuery call to add those classes to the menu.
This example from a 2009 CSS Tricks post, tweaked for your case:
$('#cssmenu > ul li:hover > ul').hover(
function(){
$(this).children().addClass('visible');
}
)
It looks like you'll also need to add a class directly on $(this) for the #cssmenu > ul li.hover selector. You would then need another command, such as $(your-selector).click(function(){ $(this).removeClass('visible')) to make it go away again.
On a more general note, it does seem a little odd to want a sub-menu to stay open even when you leave it. Unless there's a third level menu, that is.

WordPress sub-menu items not displaying properly on hover

I am having trouble with the sub-menu items at the following site. Actually the problem is with the sub-sub-menu items, i.e. the 3rd level items (I am not sure what these are actually called).
You may need front-end password to view "calzada321" (no quote marks).
http://polynovo.com.au/
As per screenshot (link below), in most browsers, the 3rd level items are squished, ie they do not display in an attractive or useful fashion on hover. I am not sure how to fix (obviously). Any help appreciated.
http://polynovo.com.au/wp-content/uploads/2014/11/Untitled-1.jpg
/* 2.3 Navigation
------------------------------------------------------------------------------*/
#navigation {
margin-bottom: 7px;
position: relative;
z-index: 2;
}
#navigation .menu-item {
float: left;
background: url(../images/common/bg_nav-separator.png) no-repeat 0 center;
position: relative;
}
#navigation .menu-item:first-child {
background: none;
}
#navigation .menu-item.has-sub-menu:hover {
background-color: #e5eaef;
}
#navigation .menu-item a {
color: #002d62;
display: block;
font-size: 15px;
/* font-weight: bold; */
padding: 18px 17px 18px 16px;
text-transform: uppercase;
}
#navigation .menu-item:first-child a {
padding-left: 3px;
}
#navigation .current-menu-item > a,
#navigation .current-page-ancestor > a,
#navigation .menu-item a:hover {
color: #c72932;
text-decoration: none;
}
#navigation .has-sub-menu .current-page-ancestor > a {
color: #002e62;
}
#navigation .has-sub-menu .current-page-ancestor > a:hover {
color: #fcb040;
text-decoration: none;
}
/* Sub-navigation */
#navigation .sub-menu {
display: none;
position: absolute;
top: 50px;
left: 0;
padding: 17px 22px 18px;
width: 155px;
background: #e5eaef;
}
#navigation .menu-item.has-sub-menu:hover .sub-menu {
display: block;
}
/* ---I added this item below made sub-sub items sit out more but still not good---*/
#navigation .menu-item.has-sub-menu:hover .sub-menu .sub-menu {
margin-left:200px;
margin-top:-35px;
display:block;
}
#navigation .sub-menu .menu-item {
float: none;
padding-left: 12px;
margin-bottom: 5px;
background: transparent url(../images/common/sprite_icons.png) no-repeat 1px -229px;
}
#navigation .sub-menu .menu-item a {
padding: 0;
font-weight: normal;
line-height: 40px;
text-transform: none;
}
There is some issue in your css code, like hovering action. first you should use direct child selector for showing the sub-menu, so the third level will remain hidden.
.menu-item:hover > .sub-menu{ display: block }
And lastly is for your problem, add styling for sub-menu starting from the third level. You just need to set the left property to 0;
.sub-menu .sub-menu{ left: 0 }
EDITED ANSWER ACCORDING TO THE CODE SNIPPET
you can change this selector which is for showing sub-menu to this
#navigation .menu-item:hover > .sub-menu { display: block }
this selector will show only direct sub-menu, not all sub-menu in one menu item. and you don't need to set margin top nor margin-left.
Next you need to add styling for third level menu, since this menu positioned on the left side.
#navigation .sub-menu .sub-menu{
left: 100%;
top : 0;
}
Since the sub-menu is absolute positioned, you just need to set the left to 100%, this will placed the third level menu sit next to the selected 2nd level menu

Adjusting the Menu Folder Margin

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

CSS Dropdown specific item smaller

i have a Problem with my Website..
I want to make a dropdown-item smaller.
Otherwise it will "plop" out of my theme..
I´m using WordPress..
Can anyone help me?!
This is the Website:
MDS
The Problem is shown at the menu-point "Kontakt -> Presse"
if reduce width it will create problem when inner text is big in length so
change this properties if you like it as below..
ul#dropdown-menu li .sub-menu li a {
color: #252525;
width: 140px;
}
ul#dropdown-menu ul {
position: absolute;
top: 100%;
right: 0;
width: 160px;
list-style: none;
display: none;
border: 1px solid #EFEFEF;
border-bottom: none;
background-color: white;
z-index: 35;
}
css:
#menu-item-38 ul, #menu-item-38 li{
width:100px;
}
#menu-item-38 ul li a{
width:80px;
}
Hi now define your last submenu width as like this
#menu-item-38 .sub-menu{
width:90px;
}
You have too many widths defined in the ul#dropdown-menu
ul#dropdown-menu ul li a = 160px ;
ul#dropdown-menu ul li = 180px ;
Change
ul#dropdown-menu ul li to
ul#dropdown-menu ul li{width:160px; overflow:hidden;}
Make sure to add overflow:hidden

CSS Menu Help (Second menu dissapear)

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 {}.

Resources