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 {}.
Related
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 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 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
Take a look at this site I'm working on: http://appload.nu/flygklubb
The first menu-item has children. But, as you can see, the children make the parent bigger. How can I prevent the parent from getting bigger and at the same time make all of the children the same size?
Position the child UL's absolute.
Change your CSS for:
#topnavigation > ul > li ul { visibility: hidden; }
To
#topnavigation > ul > li ul { visibility: hidden; position: absolute; }
Same width as parent
To keep the submenu the same width as the menu, but avoid stretching the menu:
#topnavigation ul li {
position:relative;
}
#topnavigation ul li ul {
position:absolute;
z-index:1;
}
#topnavigation ul li ul li {
height:auto;
min-height:15px;
}
#topnavigation ul li ul li a {
height:auto;
min-height:15px;
}
-OR- Same width as eachother
#topnavigation ul li ul {
position:absolute;
z-index:1;
}
Note: I also recommend adding a background color (or less busy image) to the submenu items for better readability.
The Elment gots bigger because of the padding on the
#topnavigation a {
padding: 10px 11px;
}
change the padding - its fot padding top and bottom. (i would prepare 4px)
remove the height from the #topnavigation a - it is not necessary
remove the height from the #topnavigation li - it is also not necessary
change the height of the div (#topnavigation). (i would prepare 26px)
Your new CSS:
#topnavigation li {
display: list-item;
}
#topnavigation a {
display: block;
padding: 4px 11px;
}
#topnavigation {
background-color: #ADA287;
border-radius: 5px 5px 5px 5px;
height: 26px;
position: relative;
top: 20px;
width: 970px;
}