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
Related
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.
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 want to add some kind of thick line underneath my currently active<li> items. Problem is, I can't set it up properly. I want the line underneath to inherit the width of its respective <li> or at least to be centered ...
Here's my fiddle
Much appreciated
If you want an absolutely positioned element to inherit the width of it's parent, you need to position that parent relatively. More info here. For your situation, you need to :
Add position:relative; to .nav li
Add width :100%; left:0; and remove margin-left: -6em; on nav li.current a:after, nav li a:hover:after
FIDDLE
You seem to be adding the :after content in two places which seems excessive.
Since you only want in on active 1i you can strip down your code as follows:
CSS
nav ul {
list-style: none;
margin-top: 1.25em;
}
nav ul li {
display: inline-block;
position: relative;
}
nav li a {
color: black;
text-transform: uppercase;
text-decoration: none;
padding: 1em 1.25em;
width: auto;
}
nav li.current a, nav li a:hover {
text-decoration: underline;
}
nav li.current:after {
background-color:black;
content: "";
height: 1em;
position: absolute;
left:0;
top: 100%;
width: 100%;
}
JSFiddle Demo
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 {}.