Here is the link to the fiddle : http://jsfiddle.net/UL2LB/1/
As you can see, I only have specified z-indexes on the hidden sub-list and the nav element, both of which have explicit positioning. So my question is, why the hell is my sub-menu still showing on top of the <nav>?
Thank you in advance for any answer.
Give your ul a pixel width and add position:relative to it the li.
nav.global ul li ul {
width:180px;
...
}
nav.global > ul > li {
display: inline-block;
margin-left: 2%;
position: relative;
}
Related
I have some difficulties trying to center my dropdown navigation.
Below I posted an image of the current design and some CSS.
As you can see, the dropdown doesn't fit on the page.
.structure-mainnavigation ul li ul {
width:500px;
}
.structure-mainnavigation ul li ul li {
width:25%;
float:left;
text-align: center;
}
Any help is appreciated.
After messing around for hours and hours i solved my own problem by adding the following code:
li:hover ul { left:auto; right:0; }
you can try:
position: absolute;
margin:0 auto;
when you say centering you mean to put drop down on center of the page or center of menu item?
I am using the archi wordpress theme which is a great theme.
I am looking how to make the dropdown menu width wider so my text is on 1 line rather then 2 lines.
My website: http://cobbys.gentwijzer.be/fabrieksverkoop/
For example menu item: Stoffen, dropdown is ok except for "brandvertragende stoffen" . How do I increase the width of the dropdown so it will be on 1 line.
Thank you
I would change from:
#mainmenu li ul {
width: 200px;
}
#mainmenu li li a {
width: 200px;
}
to
#mainmenu li ul {
width: auto;
}
#mainmenu li li a {
width: auto;
white-space: nowrap;
}
Using width: auto will allow the ul of the dropdown to grow as needed and you won't be stuck specifying a universal width for all dropdowns or manually setting a specific width for each dropdown.
white-space: nowrap; prevents the text from wrapping to a new line when there is not sufficient space to do so.
Set the width of #mainmenu li ul to what ever you want(for example 300px) and on #mainmenu li li a use width:auto
I am trying to get some menus to look good, but I seem to have two options that do half of what I want. What can I do that will give me both of the behaviors I want?
The problem is with the offset in my menu. When I set the submenu to relative. Everything expands as it shouldn't. When a submenu is moused over it expands in place instead of off to the right as I would like it to. The jsfiddle below shows this behavior:
http://jsfiddle.net/7a4dzxt2/
When I use absolute, all the sub menus are stuck to the left. They exapnd exactly as I would like, but each menu is all the way on the left of the screen and not directly below the main menu item. The jsfiddle below shows this:
http://jsfiddle.net/w8ztr9eb/
The code that is being changed is:
#navbar ul li ul {
display:none;
position:absolute;
left: 30px;
background-color:transparent;
padding:10px;
opacity:0.95;
}
To:
#navbar ul li ul {
display:none;
position:relative;
left: 30px;
background-color:transparent;
padding:10px;
opacity:0.95;
}
How can I keep the menus from expanding like in the second jsfiddle, but keep the menu from being stuck to the left side of the page?
If you set the containing li elements to position: relative then your absolutely positioned ul elements will be positioned in relation to their parent:
#navbar ul li {
/* ... */
position: relative;
}
http://jsfiddle.net/w8ztr9eb/3/
It's a start. When you use absolute, it positions based on the nearest positioned parent. So, try:
#navbar ul li {
position: relative;
}
#navbar ul li ul {
position:absolute;
left: 0px;
padding:1px;
}
http://jsfiddle.net/w8ztr9eb/2/
I have spent like 4 hours and still cannot fix it, I have 2 divs, one floated left and one right, in left div I have text and in right I have a <*ul>, when I use text-align:center; based on media query for the left template it works perfectly, but I also want the <*ul> to be centered when the browser width is reduced. Please take a look here and let me know what I am doing wrong and where exactly ? http://goo.gl/OJ5OHt THANKS A LOT to anyone who helps me get out of this..
The problem is not so much the UL but the children LI, that are floated left.
You have two options:
A)
Set a fixed width to UL and center via margin auto:
.social-icons ul {
margin: 5px auto;
width: 220px;
}
B) Remove the float from the children LI, set them to inline and set their children A to inline-block (and then UL text-align would work):
.social-icons ul {
text-align: center;
}
.social-icons ul li {
display: inline;
float: none;
}
.social-icons ul li a {
display: inline-block;
}
The only ways I can see to do this is to add the following to your ul style under your media query:
margin: 0 auto;
width: 217px;
It needs to be a fixed width.
OR
Change your ul to:
text-align: center;
And your li and a items to:
display: inline-block;
Either way should work.
I am facing a css problem. I cannot get a Li to occupy whatever width is left in a div How can i possibly do this?
Here is an image for reference:
http://rhythemaggarwal.heliohost.org/login/css/ques.png
Link to my webpage: http://rhythemaggarwal.heliohost.org/login/index.html
change your css as follows:
#menu ul li {
display: table-cell;
white-space: nowrap;
}
and then add
#news_link { width: 100%;}
that will do what I think you want
Remove the border-right from #menu ul li (change to border: 0;) and it works for me