I am trying to set a nested set of list items in a Joomla menu so that the outermost parents move down to make room for the children. The height of the list items also needs to be a set height because the menu items are buttons. At the moment what happens is that the parent items below a child item horizontally get pushed into the space of the child item so that they overlap. Here is a simplified example of what I am trying to achieve:
<ul>
<li style="height: 40px;">Parent Item 1
<ul>
<li style="height: 40px;">Child item of 1</li>
</ul>
</li>
<li style="height: 40px;">Parent Item 1</li>
</ul>
Here is a link to a page on my site showing exactly this situation:
http://procadsys.worldnz.co.nz/test
Is there any way with CSS to have the heights properly calculated down this list so that each level is 40 pixels below the previous one without any levels overlapping? I've tried changing the position attribute to fixed and relative as well, but this didn't work.
Solved it. The answer is to use line-height, not height:
<ul>
<li style="line-height: 40px;">Parent Item 1
<ul>
<li style="line-height: 40px;">Child item of 1</li>
</ul>
</li>
<li style="line-height: 40px;">Parent Item 1</li>
</ul>
You use this style code
ul > li:hover ul{
height:40px;
margin:0;
padding:0;
}
Related
I have a nested list in my menu and I wanted the first child of the sub list highlighted when the parent is highlighted. I want to code this just by using CSS (in SCSS file format) This is a list within a list. I have list items below another list item of another
<ul id="sub-list">
<li class="sub-list-item">
<span>창업교육</span> <!--serves as the parent when this is highlighted, the first child is also highlighted.-->
<ul class="sub-sub-list"> <!--sublist-->
<li class="item">창업정규교과</li>
<li class="item">창업비정규교과</li>
</ul>
</li>
<li class="sub-list-item">
<span>this is another list item in class="sub-list"</span>
</li>
</ul>
*EDIT: changed some of the words being used in this question to make this one understandable. and added another child item to .sub-list to make a better understanding of the issue.
The 'span' (<a>) isn't actually a parent. It's a sibling. The parent to the first child (list item) in the sub list is the <ul class="sub-sub-list">. That means they are siblings.
You can use the + selector to target siblings: https://www.w3schools.com/cssref/css_selectors.asp
.sub-list-item a:hover + ul > li:first-child {
background-color: lightgrey;
}
<ul id="sub-list">
<li class="sub-list-item">
<span>창업교육</span>
<!--serves as the parent when this is highlighted, the first child is also highlighted.-->
<ul class="sub-sub-list">
<!--sublist-->
<li class="item">창업정규교과</li>
<li class="item">창업비정규교과</li>
</ul>
</li>
</ul>
Currently, if I create a div just after my navigation bar it hides underneath the navigation bar. I'm new to CSS but I'm quite sure this has to do with the fixed navigation bar being taken out of the document flow.
Here is the current situation: https://jsfiddle.net/8pwcobuz/
HTML structure:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<ul id="nav">
<li>List item 1</li>
<li>List item 2</li>
<li class="dropdown">
List item 3
<ul class="dropdown">
<li>List item 3.1111111111111</li>
<li>List item 3.2</li>
<li>List item 3.3</li>
</ul>
</li>
<li>List item 4</li>
<li class="dropdown">
<i class="fa fa-bars"></i>
<ul class="dropdown">
<li>List item 5.1</li>
<li>List item 5.2</li>
<li>List item 5.3</li>
</ul>
</li>
</ul>
<div id="content">
</div>
</body>
</html>
Relevant CSS:
#nav {
background-color: #333;
position:fixed;
width:100%;
box-shadow: 0px 0px 10px 1px;
}
#content {
margin-top:50px;
}
I've tried two approaches.
First of all, I placed the navigation bar outside of the body element and adding a top-margin to the body (if this is terrible please let me know), but it didn't seem to work. My reasoning here was that fixed elements are fixed relative to the viewport, while all other positioned elements are positioned relative to the body. So by giving a margin-top to the body and just adding content like I normally would, it would work right? But it didn't.
Secondly, I tried to create a div that contains the content of the entire page, also with a top-margin to adjust for the space taken up by the fixed navigation element. This didn't work either.
In both cases, the navigation bar moves down as well when I set the margin-top property, and I only want the content to move. What am I missing here?
Additional question: Is there any way right now to do this in a responsive way without using Javascript or jQuery? I'm trying to avoid those for now, since I'm just starting out.
Thanks in advance!
I am using the latest version of Bootstrap for the styling of most of my HTML elements.
On one of my pages I need to dynamically add list items to my <ul></ul> element. I am adding these additional list items with jQuery. This is how I do it:
$('ul.test-items').append('<li class="available">Test Item</li><li class="available">Test Item</li>');');
After a new list item is added to the ul element it seems to lose the styling just for that <li></li> item, the already added list items display correctly. The list items have padding on either side of them, but when added they seems to be added next to each other, with no padding. Do I need to redraw the ul element after adding new list items to it so that it can be styled as part of the ul element?
It seems to work well for adding 1 list item element, but 2 or more you can see the difference.
This is my current HTML markup:
<ul class="list-inline test-items">
<li class="available">product colour 1</li>
<li class="available">product colour 3</li>
</ul>
After adding the new list items via jQuery it looks like this:
<ul class="list-inline test-items">
<li class="available">product colour 1</li>
<li class="available">product colour 3</li>
<li class="available">Test Item</li>
<li class="available">Test Item</li>
</ul>
When I view the markup by pressing F12 in Chrome it looks right, it's just not displaying right. My guess is it is not part of the already styled ul element.
Here is my style:
.test-items .available
{
border: 2px solid #999;
}
The list items have padding on either side of them, but when added they seems to be added next to each other, with no padding
Padding is inside the element – and the newly added elements have that padding inside of their borders as well. That is not the issue.
The spacing between the elements, that comes only from the whitespace between the element’s tags – because the li are displayed inline.
If that’s what you are after here – then you simply have to add that whitespace between the newly added elements yourself:
.append('<li class="available">Test Item</li> <li class="available">Test Item 2</li>');
https://jsfiddle.net/0s7n3907/4/
Having problems with my CSS menu drop-down as instead of overlapping the containers its expanding them. Probably very simple oversight but can't find the answer (closest match was Div within li not expanding but the suggestion of putting an absolute position to the submenu class didn't work). Also there is no JS.
Here is the JSFiddle Link : http://jsfiddle.net/KNBLC/
HTML
<body>
<div class="secondary-content-6col">
<h1><span class="white">Headline</span></h1>
<ul class="yellow-call-to-action">
<li>1. Select a Product <img src="../img/arrow-small.png" alt="arrow"/>
<ul>
<li>Item 1
</li>
<li>Item 2
</li>
<li>Item 3
</li>
</ul>
<!--- 1st column Footer -->
</li>
</ul>
</div>
<p> </p>
Change this in your css
.secondary-content-6col {height:150px;}
You need to set a height to that div, else it wil see the height as
height:auto;
Im having trouble making sure my active graphic is positioned outside of the button, basically the overflow of the parent element keeps the graphic hidden inside of it instead of being outside. I have tried to use position:absolute and z-index but I cant solve this.
HTML
<ul id="mynav">
<li class="active">Link
<ul id="subernav">
<li>Inner Link 1</li>
<li>Inner Link 2</li>
<li>Inner Link 3</li>
</ul>
<span class="active ir">Active Link</span>
</li>
<!-- More links -->
<!--<li>Link</li>-->
<!--<li>Link</li>-->
<!--<li>Link</li>-->
<!--<li>Link</li>-->
</ul>
CSS
body{background:#000;color:#000;font-family:Arial;padding:20px;}
a{text-decoration:none;color:#000;}
#mynav > li{height:45px;background:#fff;width:458px;padding:5px 10px;text-align:center;overflow:hidden;margin-bottom:30px;position:relative}
#mynav > li a{line-height:45px;}
#mynav li.active:hover{height:90px;cursor:pointer}
#mynav li .active{background:#f00 url('http://dummyimage.com/15/f00/fff&text=+') no-repeat -668px -214px;width:15px;height:15px;position:absolute;left:50%;bottom:-15px;margin-left:-7.5px;border:1px solid #f00;z-index:250}
#subernav li{display:inline-block;zoom:1;*display:inline;}
#subernav li a{color:#f00;}
.ir{display:block;text-indent:-999em;overflow:hidden;background-repeat:no-repeat;text-align:left;direction:ltr;}
Link to fiddle:
http://jsfiddle.net/UbvQk/5/
Remove the overflow: hidden and the height from the mynav active (and the :hover).
Set the subernav to display:none;.
Add #mynav li.active:hover #subernav to have display:block;
Updated Fiddle