css selectors for 5 col footer menu in joomla? - css

I am trying to line up a footer menu and to select only the first list elements as single selection
<ul class="someclass">
<li><!--this is what I am trying to capture-->
<a>something arbitrary here</a>
<ul>
<li>list elemnts here</li>
<li>list elemnts here</li>
<li>list elemnts here</li>
<li>list elemnts here</li>
</ul>
</li>
<li>
<a>something arbitrary here</a>
<ul>
<li>list elemnts here</li>
<li>list elemnts here</li>
<li>list elemnts here</li>
<li>list elemnts here</li>
</ul>
</li>
<li>
<a>something arbitrary here</a>
<ul>
<li>list elemnts here</li>
<li>list elemnts here</li>
<li>list elemnts here</li>
<li>list elemnts here</li>
</ul>
</li>
</ul>
I want to be able to select all the top <li> elements, without directly selecting every other interior <li> elements. which css selectors should I use?


.someclass > li:first-child {
}
Example: http://jsfiddle.net/yUMwD/
Or to select all lis on that level:
.someclass > li {
}
> means 'child element', so it's would take the li that is directly under .comeclass

Related

Select First Child List Item That has Children

I have the following unordered list item with nested ul. How do I select the first li aka the text "List A" ?
I tried ul > li:first-child but this selects the first list item's child as well.
<div class="container">
<ul>
<li>
List A
<ul>
<li>List A sub</li>
<li>List A sub</li>
<li>List A sub</li>
<li>List A sub</li>
</ul>
</li>
<li>
List B
<ul>
<li>List B sub</li>
<li>List B sub</li>
<li>List B sub</li>
<li>List B sub</li>
</ul>
</li>
</ul>
</div>

You should set it up with the default style of ul > li.
ul > li{
font-weight: normal;
color: gray;
}
.container > ul > li:first-child {
font-weight: bold;
color: red;
}
<div class="container">
<ul>
<li>
List A
<ul>
<li>List A sub</li>
<li>List A sub</li>
<li>List A sub</li>
<li>List A sub</li>
</ul>
</li>
<li>
List B
<ul>
<li>List B sub</li>
<li>List B sub</li>
<li>List B sub</li>
<li>List B sub</li>
</ul>
</li>
</ul>
</div>

How to align Bootstrap 3 Nav Submenu to its parent

I included this plugin to have my Bootstrap Nav a submenu. My problem is how can I align the submenu to its parent. I need to move it down a little.
I created a CSS like this:
#header-menu-nav .dropdown-menu li ul { margin-top: -27px !important; }
And it's working fine. My problem is in the responsive part. It also affected.
Here's my code in simple HTML:
<ul class="nav navbar-nav" id="header-menu-nav">
<li>
New
<ul class="dropdown-menu">
<li>TEST</li>
<li>TEST</li>
<li>TEST</li>
<li>TEST</li>
<li>TEST</li>
</ul>
</li>
<li>Furniture</li>
<li>Lighting</li>
<li>Kitchen
<ul class="dropdown-menu">
<li>Action
<ul class="dropdown-menu">
<li>Action</li>
<li>Something else here</li>
<li>One more link</li>
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
</ul>
</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li>One more separated link
<ul class="dropdown-menu">
<li>Another action</li>
<li>A long sub menu
<ul class="dropdown-menu">
<li>Action</li>
<li>Something else here</li>
<li>One more link</li>
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
</ul>
</li>
<li>Another link</li>
<li>One more link</li>
</ul>
</li>
</ul>
</li>
<li>Bath</li>
<li>Interior Goods</li>
<li>Gifts</li>
<li>Outlet</li>
</ul>
Can you help me. Is there a proper way in doing this? Im not really good enough in CSS.

try this.
#header-menu-nav .dropdown-menu li{
position: relative;
}
#header-menu-nav .dropdown-menu li ul{
position: absolute;
top:0;
left: 100%;
}
and remove the margin-top:-27px;

HTML elements misaligned with page zoom

I have a navigation bar with drop down menus created with UL elements. Currently, the drop down table shifts when the web page is zoomed in or out. How do I style the CSS so that the drop down menus will stay aligned?
<ul id="links">
<li>First link</li>
<li>Second link
<ul id="dropdown1">
<li>Drop down item 1</li>
<li>Drop down item 1</li>
<li>Drop down item 1</li>
</ul>
</li>
<li>Third link</li>
<li>Fourth link
<ul id="dropdown2">
<li>Drop down item 1</li>
<li>Drop down item 1</li>
<li>Drop down item 1</li>
</ul>
</li>
</ul>
jsFiddle here.

Style the <li> that has child elements

I'm trying to create a top menu with a dropdown submenu function.
I want to target the list items witch have a submenu (child element) attached to it. So that i can style them with a different color list style etc.
HTML:
<nav>
<ul><div id="logo">
<img src="images/design/logo.png" alt="Logo for responsive template" />
</div>
<li>Home</li>
<li>Parrent Link
<ul>
<li>Child Link</li>
<li>Child Link</li>
<li>Parrent Link
<ul>
<li>Child Link</li>
<li>Child Link</li>
<li>Child Link</li>
<li>Child Link</li>
<li>Child Link</li>
</ul>
</li>
</ul>
</li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</nav>
So each Parrent link get another style than the rest.

You can do it with JQuery: example
$(function(){
$('li').each(function(){
var parent = $(this).parent().parent();
if(parent.is('li')){
parent.addClass("colored");
}
})
});
This solution assumes that your HTML is valid and you use <ul> and <li> correctly.

You can't select an element based in descendent elements. Then you can't have a selector like this:
select all <li> tags that contain an <ul> tag
In the other way you can
select all <ul> tags inside a <li> tag
The best you can do is assign a class:
<li>Child Link</li>
<li>Child Link</li>
<li class="sub">Parrent Link
<ul>
<li>Child Link</li>
<li>Child Link</li>
<li>Child Link</li>
<li>Child Link</li>
<li>Child Link</li>
</ul>
</li>

I Would change the ul.class every time i make a new list.
so that, if the ul li has children, it will change automatically, if i want to have children there.

You just have to use CSS selectors as follows:
ul > li > li {
// your css code here
}
You havethe official documentation in the W3C site.
No need tu use id's or class tags

CSS - Auto height of an element containing absolute positioned children?

on the site I am currently developing I have a <nav> element containing a 2 leveled <ul>, I am absolute positioning the sub list (nav ul li ul) to the right of the main list.
The problem I am having is when the sub list is longer (taller) than the main list, due to the sub list being absolutely positioned, the element is not stretching to accommodate it. See the below image for an example of what I mean.
My HTML is as follows:
<nav>
<ul>
<li>List 1</li>
<li>
List 1
<ul>
<li>List 2</li>
<li>List 2</li>
<li>List 2</li>
<li>List 2</li>
<li>List 2</li>
<li>List 2</li>
<li>List 2</li>
<li>List 2</li>
<li>List 2</li>
<li>List 2</li>
<li>List 2</li>
<li>List 2</li>
<li>List 2</li>
<li>List 2</li>
<li>List 2</li>
</ul>
</li>
<li>List 1</li>
<li>List 1</li>
<li>List 1</li>
<li>List 1</li>
<li>List 1</li>
<li>List 1</li>
<li>List 1</li>
</ul>
</nav><!-- /nav -->
Any idea of a solution to this? Ideally I would like to keep it as a nested list for semantic reasons.
Thanks!
UPDATE:
Please see the following jsFiddle for a working example - http://jsfiddle.net/TcYBQ/

You can't satisfy all your constraints at the same time:
The parent element must have the correct height.
No JavaScript.
In the HTML, "List 2" must be inside "List 1".
To have the correct height on the parent, you can't use absolute positioning on "List 2". Unfortunately, there's then no other way to move "List 2" to where it should be.
Pick from these:
Use JavaScript to set the height and keep the semantic HTML.
Move "List 2" out of "List 1" and avoid JavaScript but sacrifice the semantic HTML.
I'd try to avoid JavaScript for this, unless the rest of the site is highly reliant upon it.

To solve this issue I used a variation of the jQuery in the question linked to by #derekerdmann
var maxHeight = 0;
$('#top nav ul').each(function () {
var tmpHeight = $(this).height() + $(this).position().top;
if (tmpHeight > maxHeight) {
maxHeight = tmpHeight;
$('#top nav').height(maxHeight + 20);
}
});

Resources