I ran into some problem when trying to position an absolute positioned div. its working as its should i guess, however i want it to stay with parent of parent instead of parent becouse i have a dropdown list and it will follow the parent down on the side when i want it to stay in top like first li with div is displayed. ive created a jsfiddle to show the problem. http://jsfiddle.net/trptR/
can this be done using css only or is Javascript a must?
HTML
<div id="navmenu">
<ul>
<li>example
<ul>
<li>sub example1</li>
<li>sub example2</li>
<li>sub example3</li>
<li>sub example4</li>
</ul>
</li>
<li>Test
<ul>
<li>Sub Test 1
<div>
<ul>
<li>Projekt</li>
</ul>
</div>
</li>
<li>Sub Test 2
<div>
<ul>
<li>Projekt</li>
</ul>
</div>
</li>
</ul>
</li>
</ul>
</div>
CSS
#navmenu{
display:inline-block;
background:red;
}
#navmenu ul{
list-style:none;
margin:0;
padding:0;
}
#navmenu ul li{
float:left;
position:relative;
display:block;
padding:0.5em;
}
#navmenu ul li ul{
position:absolute;
display:none;
border:solid 1px #333;
background:#fff;
}
#navmenu ul li:hover ul{
display:inline-block;
}
#navmenu ul li ul li{
float:none;
display:block;
position:relative;
}
#navmenu ul li ul li:hover{
background-color:#EBEBEB;
}
#navmenu ul li ul li div{
display:none;
width:10em;
height:14.6em;
background:blue;
position:absolute;
top:0;
left:6em;
border:solid 1px #000;
}
#navmenu ul li ul li:hover div{
display:block;
}
Could you remove position:relative from both your #navmenu ul li style set and from you #navmenu ul li ul li style set?
http://jsbin.com/ziqov/1/edit
Positioning is key
I'm not sure I understand the explanation of your problem, but I do think I understand when you say you have
parentElementTop > parentElementBelow > element
that you want element to be aligned to parentElementTop rather than the parentElementBelow.
To align element absolutely to parentElementTop all you need to do in CSS is to not set position to relative or absolute on the intermediate parentElementBelow and any subsequent absolutely positioned element will be aligned according to last non-statically positioned ancestor. In your case that would be the parentElementTop which is what you want.
think about using
#navmenu > ul > li{
float:left;
position:relative;
display:block;
padding:0.5em;
cursor:pointer;
}
because otherwise your selectors overwrite each other.
Related
ul li defined as float left,so the main li's are came side by side,but how first li's childs are coming one after other,but it seems ul li properties applying on first li's child too..can some explain me
<html>
<head>
<style>
ul {
margin:0px;
padding:0px;
list-style:none;
}
ul li {
list-style:none;
float :left;
width:150px;
height:30px;
line-height:30px;
text-align:center;
background-color:yellow;
}
ul li a {
text-decoration:none;
color:red;
}
</style>
</head>
<body>
<ul>
<li>Home
<ul><li>Honda</li>
<li>Maruthi</li>
<li>Suzuki</li>
<li>Kawaski</li>
</ul>
</li>
<li>ContactUs
<ul><li>Honda</li>
<li>Maruthi</li>
<li>Suzuki</li>
<li>Kawaski</li>
</ul>
</li>
<li>Report</li>
<li>FeedBack</li>
</ul>
</body>
</html>
You are using descendant selectors, which means ANY li in your document will be styled that way.
If you only want to target the first ul and those first li's use a class for the ul and the child selector, like this:
.first > li { }
Is this what you are looking for?
http://jsfiddle.net/19xxvhpt/
I want to float <li> to the left in ul ul - without setting a width to the inner <ul> element
The problem is that the <ul> is in a nav with width:70px; (take a look at jsfiddle)
Got the following ( http://jsfiddle.net/qfemF/ )
CSS:
nav {
width:70px;
}
ul {
margin:0;
padding:0;
list-style:none;
}
li {
position:relative;
}
ul ul {
position:absolute;
left:70px;
width:auto;
}
ul ul li {
float:left;
}
HTML:
<nav>
<ul>
<li>Test
<ul>
<li>sub1</li>
<li>sub2</li>
</ul>
</li>
</ul>
</nav>
If i set e.x. ul ul { width:200px; } it works, i also tried width:auto - but that doens't work.
This is because of the position:relative that you have set on your <li> in your css.
Delete this row in your css and it should be fine:
li { position:relative; }
Check the demo to see its working.
DEMO
Update: (after new comment from OP)
You schould give the ul ul a width with fixed pixels.
ul ul {
....
width:200px; /* instead of width:auto; */
}
Check the demo to see its working.
DEMO
C Travel's answer is correct, you need to remove position: relative; from your li
But if you can't do that for one reason or another, an alternative is to set display: table; on ul ul
Demo
I am working on a HTML/CSS drop down menu and now whenever I hover my mouse over the top of the menu not every entry is showing in the drop menu. The top one or two entries are always missing. Here is my HTML:
<!-- Navigation Bar -->
<ul id="navi">
<li>Engines
<ul>
<li>DiniJS</li>
<li>Foxen2D</li>
<li>Vivon3D</li>
</ul>
</li>
<li>Team
<ul>
<li>Rob Myers</li>
<li>Nate Mast</li>
</ul>
</li>
<li>Contact
<ul>
<li>Email</li>
<li>Twitter</li>
</ul>
</li>
</ul>
and here is the CSS:
#navi ul {
list-style:none;
margin:0px;
padding:0px;
}
#navi li {
float:left;
width:120px;
padding-top: 13px;
padding-bottom:8px;
background-color:black;
text-align:center;
font-family:"Courier New";
}
#navi li:hover {
background-color:#303030;
}
#navi li ul li {
float:none;
width:116px;
text-align:left;
padding-left:4px;
border-top:1px solid #303030;
display:none;
font-size:85%;
position:absolute;
z-index:2;
}
#navi li:hover ul li {
display:block;
}
#navi a {
text-decoration:none;
color:red;
}
I am open to any Javascript or JQuery suggestions if that is a better way to go about fixing this. Thank you.
Your problem is that all of the submenu items are stacking one on top of another. Simply moving position: absolute; from the #navi li ul li block to a new #navi li ul block should fix this.
When using nested list items. use class names to target. for your menu use class="sub"
for submenu (ul) and set display none and absolute for the sub ul and not for the li.
We're really close to solving this one and just need a little help to ties things off. Everything works fine, but how do we get the nested 'ul' to display relative to it's parent 'li' (ie. directly below parent li)?
Here's the HTML:
<ul id="continent">
<li>Europe
<ul>
<li>CountryA</li>
<li>CountryB</li>
<li>CountryC</li>
</ul>
</li>
<li>Middle East
<ul>
<li>CountryD</li>
<li>CountryE</li>
<li>CountryF</li>
</ul>
</li>
<li>Africa
<ul>
<li>CountryG</li>
<li>CountryH</li>
<li>CountryI</li>
</ul>
</li>
<li>Asia
<ul>
<li>CountryJ</li>
<li>CountryK</li>
<li>CountryL</li>
</ul>
</li>
</ul>
And here the CSS:
ul#continent{position:relative;}
ul#continent li{display:inline; list-style-type:none;}
ul#continent li ul{display:none;}
ul#continent li:hover {cursor:pointer;}
ul#continent li:hover ul{display:block; position:absolute; top:52px; margin:-20px 0 0 -10px; padding:20px; width:160px; z-index:999;}
ul#continent li:hover ul li{display:block; padding:3px 10px;}
Thanks in advance for any help!
Use float:left; and float:none; instead of display:inline;. And than play with margin or padding.
ul#continent li{float:left; list-style-type:none;}
ul#continent li:hover ul li{float:none; padding:3px 10px;}
DEMO
In demo 2 you see it with some background-color, width & height, margin and text-align changes in the css how it looks like.
DEMO 2
Move the position: relative from ul#continent to the first level lis This will allow you to position the nested uls relative to the corresponding li
ul#continent li {
position:relative;
}
ul#continent li:hover ul {
left: 0;
}
Reducing top, margin and padding brings the ul closer to the li.
JSFiddle
My final goal is to create what you see in image B. Note: the menu bar must be centered on the page. I did create B by setting the vertical-align on the image to middle. However, as a result of doing this my dropdown menu is slightly separated from the main header. Therefore, i cannot select the sub-menu items when i move my mouse cursor down. Any ideas on making this work ? Thanks Jillian
<style>
#nav{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
}
#nav li{
position:relative;
display:inline;
}
#nav a{
display:inline-block;
padding:10px;
}
#nav ul{
position:absolute;
/*top:100%; Uncommenting this makes the dropdowns work in IE7 but looks a little worse in all other browsers. Your call. */
left:-9999px;
margin:0;
padding:0;
text-align:left;
}
#nav ul li{
display:block;
}
#nav li:hover ul{
left:0;
}
#nav li:hover a{
text-decoration:underline;
background:#f1f1f1;
}
#nav li:hover ul a{
text-decoration:none;
background:none;
}
#nav li:hover ul a:hover{
text-decoration:underline;
background:#f1f1f1;
}
#nav ul a{
white-space:nowrap;
display:block;
border-bottom:1px solid #ccc;
}
a{
color:#c00;
text-decoration:none;
font-weight:bold;
}
a:hover{
text-decoration:underline;
background:#f1f1f1;
}
</style>
</head>
<body>
<ul id="nav">
<li>Item one</li>
<li>Item two
<ul>
<li>Sub1</li>
<li>Sub2</li>
</ul>
</li>
<li class="double-line">
<img style="vertical-align:middle" src="img/logo_large.png" alt="logo" /></li>
<li>The Fourth</li>
<li>Last</li>
</ul>
</body>
</html>
You do something like,
#nav ul{
background:url('img/logo_large.png') no-repeat center center;
/* more CSS here */
}
unless you have to use it as a link. Then consider position:absolute; for the image with #nav ul being position:relative;, and use a floating layout for the other links with a z-index to overlap where they should hang over.
You can just offset the submenu up to cover the logo height.
Here is a JSfiddle using the google logo and altering the submenu style by adding this:
#nav ul {
top: 20px;
}
Try to insert in CSS line-height: X px; (for example, parent div height) in each menu title (Item one, Item two, The Fourth, etc.)