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
Related
I have the following list:
<ul id="inline">
<li>One
<ul>
<li>Inline1</li>
<li>Inline2</li>
</ul>
</li>
<li>Two
<ul>
<li>Inline1</li>
<li>Inline2</li>
</ul>
</li>
</ul>
What i want to show is the first level li as new lines and the nested list to appear at the same height as its parent but inline. Like this:
One Inline1 Inline2
Two Inline1 Inline2
This is what i have right now:
#inline {
width: 100%;
list-style-type: none;
padding:0;
margin:0;
}
#inline + ul > ul {
display:inline;
}
But I have to basic understanding of css to figure out what is going wrong.
You need to set the ul (child of #inline) and the children li's of these uls to display:inline;. The CSS would be :
DEMO
#inline ul, #inline ul li {
display:inline;
padding:0;
}
I have a simple work around for this. Lets see the fiddle.
OLD: http://jsfiddle.net/kiranvarthi/sfho4xn8/
Updated Fiddle: http://jsfiddle.net/kiranvarthi/sfho4xn8/2/
#inline {
width: 100%;
list-style-type: none;
padding:0;
margin:0;
}
#inline ul li {
display:inline;
}
Use this CSS to make it work
#inline {
width: 100%;
list-style-type: none;
padding:0;
margin:0;
}
#inline ul {
display:inline-block;
list-style:none;
margin-left:-30px;
}
#inline ul li {
display:inline-block;
list-style:none;
text-decoration:none;
margin-left:0px;
}
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 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.
I'm using CSS for creating a dropdown menu, but I don't know what's going wrong with it. It's not dropping the sub-menu (un-ordered list in my code)
when hover is fired. I'm badly stuck here, please help me out.
I also tried the visibility property instead of display. I could see only
menu1, menu2, menu3 in browser horizontally and nothing else.
I'm using IE7 on XP SP3.
CSS:
#navMenu ul{
argin:0;
padding:0;
}
#navMenu li {
margin:px;
padding:0;
position:relative;
float:left;
display:block;
list-style:none;
}
#navMenu li a{
text-align:center;
text-decoration:none;
width:100;
display:block;
}
#navMenu ul ul{
display:none;
}
#navMenu ul li : hover ul {
width:auto;
position:absolute;
background:#453DD;
display:block;
}
HTML:
<div id="wrapper" >
<div id="navMenu">
<ul>
<li>menu1
<ul>
<li>menuitem11</li>
<li>menuitem12</li>
<li>menuitem13</li>
<li>menuitem14</li>
</ul>
</li>
<li>menu2
<ul>
<li>menuitem11</li>
<li>menuitem12</li>
<li>menuitem13</li>
<li>menuitem14</li>
</ul>
</li>
<li>menu3
<ul>
<li>menuitem11</li>
<li>menuitem12</li>
<li>menuitem13</li>
<li>menuitem14</li>
</ul>
</ul>
</div>
</div>
JSFiddle
There mustn't any space between the tag name and pseudo class like you must use li:hover instead of li : hover.
Your style has become messed up. It's missing units and/or values. This seems to work. You can see it here.
#navMenu ul{
margin:0;
padding:0;
}
#navMenu li {
margin:0px;
padding:0;
position:relative;
float:left;
display:block;
list-style:none;
}
#navMenu li a{
text-align:center;
text-decoration:none;
width:100px;
display:block;
}
#navMenu ul ul{
display:none;
}
#navMenu ul li:hover ul {
width:auto;
position:absolute;
background:#453DD;
display:block;
}
<div id="wrapper" class="hfeed">
<div id="access">
<div id="menu">
<ul>
<li class="page_item page-item-2"><a title="About" href="/?page_id=2">About</a></li>
<li class="page_item page-item-20"><a title="Support" href="/?page_id=20">Support</a></li>
<li class="page_item page-item-22"><a title="Links" href="/?page_id=22">Links</a></li>
<li class="page_item page-item-47"><a title="About" href="/?page_id=47">About</a></li>
</ul>
</div>
</div><!-- #access -->
</div>
My current CSS:
div#menu {
background:#000;
height:1.5em;
margin:1em 0;
}
div#menu ul,div#menu ul ul {
line-height:1;
list-style:none;
margin:0;
padding:0;
}
div#menu ul a {
display:block;
margin-right:1em;
padding:0.2em 0.5em;
text-decoration:none;
}
div#menu ul ul ul a {
font-style:italic;
}
div#menu ul li ul {
left:-999em;
position:absolute;
}
div#menu ul li:hover ul {
left:auto;
}
Is my menu however I'm not sure how to centre it in the middle of the page.
Like what hitautodestruct said there are two ways, but you need to describe what you want.
Do you want the whole navigation block center aligned?
If so you could do this in the css (change the width to what ever you neeed it to be):
div#menu {
width:500px;
margin: 0px auto;
}
Do you want the content within the naviagtion to be centered?
If so then add this to your css:
ul {
text-align:center;
}
If these aren't what you are looking for then can you describe in more detail please! Cheers
try to use this css attribute: text-align and vertical-align
http://www.w3schools.com/css/pr_pos_vertical-align.asp
http://www.w3schools.com/CSS/pr_text_text-align.asp
I dont sure is your html is entry page or not so I can not edit the css for you, try to do that by yourself if possible.
If you want to center it on the x grid you would use the simple technique of auto margins:
Set your body so that it aligns text to the center:
body{text-align:center;}
Set your container with auto margin left and right and also so it aligns all text back to the left:
#wrapper{margin:0 auto;text-align:left;}
On the vertical side it's a bit trickier follow this article:
http://phrogz.net/css/vertical-align/index.html