My problem is that I've got a div at the top of my site that has a dropdown menu with a float to the left, the thing is that under that div where I want to have a header whenever I hover over the menu the header floats to the left as well.
I tried to do a clear div after the top div then on css use clear:both; but it didn't really help
Here's the JSfiddle:
http://jsfiddle.net/Safushi/XRNP5/
ul {
font-size: 16px;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
padding: 5px 15px 5px 15px;
background: #464646;
white-space: nowrap;
}
ul li a:hover {
background: #565656;
}
is some of the code for the menu (had to paste some code to be able to paste JSfiddle link).
It will be fixed by adding a
position: absolute;
to the ul that contains the submenu.
The child ul element needs to be absolutely positioned if you don't want it to effect the other elements.
Example Here
#top li > ul {
position:absolute;
width:100%;
}
And as Adrift mentions, you may also want to give the ul a width of 100%.
You got the layer of HTML file right,but the property "position" wrong.
Demo
Once a tag's settled position:absolute; ,it will only be positioned referring to its containing block.So you need to set #menu{postion:relative;} to let its parent-tag be the containing block.In fact,now the submenu is totally deleted from the normal flow,so it won't affect the styles of other tags.
Moreover,I highly recommend you to resist to use descendant selectors,which not only let your browser slower,and your code maintenance much more complex as well.
Related
I have this problem where I want make a box around a menu list. But I've never seen something like this. When I hover over my menu list it flickers? The jsfiddle has the full-code.
Here is the link to jsfiddle
li {
display: inline-block;
position:relative;
line-height: 7vmax;
vertical-align: middle;
}
ul li a {color:rgb(23,123,177);text-decoration: none;margin-left:5vmax;font-size:1.3vmax;}
a:hover { background-color: #2c3e50;
padding: 1vmax;}
Does anyone know why is this? And how can I fix this? Thanks.
The flickering and jumping are caused by the padding you're adding on hover.
Simply add the padding on your normal state like this:
ul li a {
color:rgb(23,123,177);
text-decoration: none;
margin-left:5vmax;
font-size:1.3vmax;
padding: 1vmax; // add it here
}
a:hover {
background-color: #2c3e50;
// remove it here
}
I've created a fork of your code and updated it:
https://jsfiddle.net/7jsf9o2t/1/
I was working on this site and added the header menu with drop downs. The third menu item WINDOWS SUPPORT sub menus are aligned to the left while others are aligned to to the center of the dropdown.I have edited the css to
.sub-menu li a {
text-align: center;
}
but the dropdown area is aligned to the right compared to others.Please help me in making it align correct.Thanks!!
i checked your site. just add these two classes in your css. it will resolve the problem.
#mainmenu .menu-item-292 ul
{
left:-15px;
}
#mainmenu .menu-item-292 li
{
padding-left:15px !important;
}
watch your css file and remove this 2 lines
#mainmenu .menu-item-291 a{margin-right:15px;}
#mainmenu .menu-item-292 a{margin-left:-16px;}
If you want to make more space use padding and border-box:box-sizing
You have
#mainmenu .menu-item-292 a {
margin-left: -16px;
}
It's pulling over both the "Windows Support" anchor, and all anchors below it.
Try this
Add margin-left: 0; css for given anchor tags into your style.css file I guess at line no. 383
#header #mainmenu ul.children li a, #header #mainmenu .sub-menu li a {
color: #FFFFFF;
font-family: 'menu-font' !important;
font-size: 13px !important;
padding: 5px 20px;
text-align: left;
text-transform: uppercase;
margin-left: 0;
}
I hope this solves your problem!
I am using the following (simplified) code to vertically center a hyperlink within a UL. I know it may appear strange that I am applying the style to the hyperink rather than the li, but I require the entire list element to be clickable.
My code works just as intended, however as you can see on this jsFiddle the vertical centering is a little off.
Can anyone advise why this is? Thanks in advance.
HTML
<ul>
<li>
<a href="/">
<label>Foo</label>
<span>Bar</span>
</a>
</li>
</ul>
CSS
ul
{
list-style: none;
}
ul
{
height: 100px;
line-height: 100px;
}
li, li a
{
display: inline-block;
}
li a
{
line-height: 18px;
padding: 5px 10px;
color: #FFF;
text-decoration: none;
}
li label
{
float: left;
}
li span
{
float: right;
}
The line-height on your "ul" is whats moving the link up and down, if you increase it to about 120px it centers it.
Get rid of display:inline-block; on li a.
Demo
i cant post all of my code, so please check the url.
http://www.bierhauschina.com/shekou/kulinarium/
here is css:
http://www.bierhauschina.com/menu/menu_style.css
The problem is a css menu. my menu shows all lists of menu under the first menu. i don't know where is problem, but it is exactly in css. where.. i can't got it.
Add position: relative to .nav li in your CSS.
Add position: relative; to .nav .select, .nav .current, making it like this:
.nav .select, .nav .current {
margin: 0;
padding: 0;
list-style: none;
display: table-cell;
white-space: nowrap;
position: relative;
}
This style:
.nav .select *:hover .select_sub, .nav .current .show
Sets position to absolute. Set it to relative. Also you are loading menu_style.css twice, remove the second reference.
Follow-up from another post here: IE7 li bullet or number shown outside of div
In the previous post, the li element outside the div was fixed, but now I have another IE7 bug with the hover element. Since the hover element can not be set through the , how do I fix this one?
P.S. Obviously I've been having some trouble with the hasLayout bug in IE, so it someone was to give a nice explanation it would be appreciated.
Again everything works in firefox, etc.
The screenshots:
The code:
#create_request ol {
width: 339px;
}
#create_request li {
display: list-item;
line-height: 23px;
background-color: #E3E3E3;
list-style: decimal;
list-style-position: inside;
padding-left: 25px;
padding-top: 5px;
}
#create_request li.alternate {
background-color: white;
}
#create_left li:hover {
width: 356px;
background: url('/images/list_add.png') 100% 100% no-repeat;
background-color: #B0B0B0;
cursor: pointer;
}
Unfortunately, that's not possible without bringing in another element in the <li>. The incorrect list-style-position behaviour occurs in IE6/7 when the <li> element get hasLayout. You want to totally avoid hasLayout on the element. The width is one of the hasLayout triggers.
I suggest to put a <span> in the <li> (yes, sorry if you would cry)
<li><span>Item</span></li>
and change the li:hover style as follows
#create_left li:hover {
background: #B0B0B0;
cursor: pointer;
}
#create_left li:hover span {
display: block;
width: 356px;
background: #B0B0B0 url('/images/list_add.png') 100% 100% no-repeat;
}
This way the span controls the width of the <li> without giving it hasLayout. You only need to remove padding-top: 5px; from the <li>'s CSS and counteract it with line-height, otherwise the <span> will not get the full height.
Make it if necessary an IE6/7 conditional stylesheet.
I believe you need to declare "list-style-position" in the rule for your OL tag:
#create_request ol {
list-style-position: inside;
}