I have a nested unordered list and I have to show them horizontally.
This is a link
enter code here JSFiddle link
Currenly it is showing first link in different line
but I want to display as :
Home News Contact About
You need to set the display to inline-block in li a, that will allow them to stack horizontally.
li a {
display: inline-block;
color: white;
text-align: left;
padding: 16px;
text-decoration: none;
}
To reverse the order use float:right;
If you want the same as in the link.. then just remove the second ul tag which is before News li
Hope this will help you.
The answer to your problem is flexbox, if the element has a style display: flex, you can define the direction of each items inside it (horizontal/ vertical).try this:
.main_menu {
display: flex;
flex-direction: row;
width: 100%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
display: inline-block;
display: flex;
flex-direction: row;
}
li a {
display: block;
color: white;
text-align: left;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #111111;
}
<ul >
<li class="main_menu">Home
<ul>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</li>
</ul>
This link will explain a lot about flexbox.
Hope it helps
Related
I've looked at several related posts here and none seem to cut to the core of my challenge.
The scenario is that I have an li element that contains a ul element. I want the widths of the li elements inside the contained ul to be at least as wide as the parent li.
Below are two examples. The first example displays the way I want it to. The second illustrates the issue. I want the items that start "Sub-Item 1" and "Sub-Item 2" to take on the width of the item that starts "Long Item". If you run the code snippet it should be pretty clear what I am after.
I am looking for a 100% CSS solution.
Any assistance would be appreciated.
<style>
ul {
padding:0;
}
ul li {
position: relative;
display: inline-block;
list-style: none;
text-decoration: none;
text-align: center;
float: left;
background-color: red;
white-space:nowrap;
}
ul li ul {
position: absolute;
display: flex;
flex-direction: column;
text-align: left;
background-color: lightgoldenrodyellow;
padding:0;
}
ul li ul li {
text-align: left;
width: 100%;
margin-left: 0;
border-style: none;
background-color: lightgoldenrodyellow;
padding:0;
}
</style>
<div style="position:absolute;top:0;">Example 1
<ul>
<li>
Short Item
<ul>
<li>This is longer than First Item and displays as desired.</li>
<li>Filler - width is same as sibling</li>
</ul>
</li>
</ul>
</div>
<div style="position:absolute; top:200px;">Example 2
<ul>
<li>
Long Item - This is deliberately longer. I want the width of li below to display as wide but it doesn't
<ul>
<li>Sub-Item 1: Shorter than Long Item and does NOT display as desired</li>
<li>Sub Item 2: Filler - width is same as sibling</li>
</ul>
</li>
</ul>
</div>
This can be accomplished by using flex and wrapping the "Short Item" text in a span tag.
ul {
display: flex;
padding:0;
}
ul li {
position: relative;
display: flex;
flex-basis: auto;
flex-direction: column;
list-style: none;
text-decoration: none;
background-color: red;
white-space:nowrap;
}
span{
flex-basis: auto;
flex-grow: 1;
}
ul li ul {
display: flex;
flex-direction: column;
text-align: left;
background-color: lightgoldenrodyellow;
padding:0;
}
ul li ul li {
text-align: left;
width: 100%;
margin-left: 0;
border-style: none;
background-color: lightgoldenrodyellow;
padding:0;
}
<div>Example 1
<ul>
<li>
<span>Short Item</span>
<ul>
<li>This is longer than First Item and displays as desired.</li>
<li>Filler - width is same as sibling</li>
</ul>
</li>
</ul>
</div>
I'm probably doing something wrong here. Here's my code for it:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: auto;
background-color: #000066;
z-index: 1;
}
.header {
position: fixed;
top: 0;
width: 100%;
overflow: auto;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .droptn {
background-color: #ccb3ff;
color: black;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #ccb3ff;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 2;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block, flex;
flex-flow: column;
justify-content: space-evenly;
flex-grow: 2;
text-align: left;
z-index: 3;
}
.dropdown-content a:hover {background-color: white; color: #000066;}
.dropdown:hover .dropdown-content {display: block;}
<ul class="header">
<li>Home</li>
<li>About Us</li>
<li>Request a Quote</li>
<li>Colors</li>
<li class="dropdown">Products
<div class="dropdown-content">
Address Blocks
Balls and Finials
Columns
Coping (Wall Caps)
Custom Products
Fireplaces
Lawn Edgers and Tree Rings
Panel System
Patio Stones and Pavers
Parking Bumpers
Pier (Pillar) and Tier Caps
Quoins
Sills and Lintels
Splash Blocks
Window and Door Trim (Surrounds)
Wainscots
</div>
</li>
</ul>
When my dropdown displays, it appears in the header with a tiny scrollbar, and it doesn't drop down out of the header. I know I'm probably an idiot, and this is likely a super easy fix. A picture of what I'm talking about. I've obviously tried messing with the z-indexes of the elements. It didn't do anything. I've googled my little fingers off, and I've been trying things out. Nothing is working. I'm a dummy, I know.
The issue you are having is that the overflow is set to auto, thus causing the scroll bar to appear when hovering over the dropdown and being larger than the allocated space. To resolve this, remove overflow:auto from header and ul.
See this fiddle for the working example.
https://jsfiddle.net/tdz018ug/
I want to align the contents / below mentioned links in one single straight line. I have entered them in my drupal 7 website. Any CSS help . I am unable to figure out.
Give li elements float:left or inline-block should work
Something like this should do it.
h1 {
text-align: center;
}
nav {
width: 100%;
}
nav {
display: flex;
justify-content: center;
}
ul {
display: flex;
margin: 0;
padding: 0;
list-style: none;
}
li:not(:last-child) {
margin-right: 1rem;
}
<h1>Looking for</h1>
<nav>
<ul>
<li>Blogs</li>
<li>Forums</li>
<li>FAQ</li>
<li>Support</li>
</ul>
</nav>
Thanks all. I used a table and i entered the contents in a table row.
I've browsed around for a while but I believe I have a slightly more unique situation here.
I have a simple navigation which is a <ul> list, with each <li> containing an anchor <a>. The first <li> contains an image which is the logo.
I'd like for each of the subsequent <li> AND <a> elements to expand to the height of the logo, whatever it may be (I would like for the only static height in this solution to be defined on the logo's image, if possible).
The elements should also be vertically centered.
When you hover on the <a> tags, the background and cursor selection should cover the entire height.
I've tried using display: flex; and display: table-cell, with vertical-align: middle and a bunch of other things. I've almost got it but there is some empty space above and below the <a> tags. The only way I can see to fix it is to use a static height on the <a> tags, but I'm posting here to see if anyone knows of any alternatives.
Please note that this doesn't have to be a cross-browser solution (although that would be nice).
Also note that these elements will include a sub-navigation dropdown, so solutions which might include overflow: hidden may not be applicable in that case.
Here is the code:
a {
font-family: 'Trebuchet MS';
text-decoration: none;
}
nav {
background: #444;
}
nav > ul > li {
display: table-cell;
vertical-align: middle;
}
nav > ul > li img {
display: table-cell;
vertical-align: middle;
height: 24px;
padding: 24px;
}
nav > ul > li a {
display: table-cell;
vertical-align: middle;
padding: 24px;
color: #fff;
}
nav > ul > li:hover a {
cursor: pointer;
background: white;
color: #444;
}
<nav role="navigation">
<ul>
<li>
<img src="http://i.imgur.com/ZPB7f3l.png" />
</li>
<li>About
</li>
<li>Work
</li>
<li>Ideas
</li>
<li>Contact
</li>
</ul>
</nav>
Here is the fiddle: http://jsfiddle.net/0br6r0sh/1
Any advice is appreciated!
Thanks,
Ryan
I've tried to implement your requirements using Flexbox. Unfortunately not in a cross browser fashion as it only works on Chrome.
The <img> is given a display: block to remove all padding/margin around it. I've used three sets of display: flex, for the <ul>, <li> and <a>.
a {
font-family: 'Trebuchet MS';
text-decoration: none;
}
nav {
background: #444;
}
nav > ul {
display: flex;
flex-direction: row;
align-items: stretch;
}
nav > ul > li {
background-color: #555;
display: flex;
}
nav > ul > li img {
height: 24px;
padding: 24px;
background-color: #ccc;
display: block;
}
nav > ul > li a {
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 24px;
color: #fff;
background-color: #666;
}
nav > ul > li:hover a {
cursor: pointer;
background: white;
color: #444;
}
<nav role="navigation">
<ul>
<li>
<img src="http://i.imgur.com/ZPB7f3l.png" />
</li>
<li>About
</li>
<li>Work
</li>
<li>Ideas
</li>
<li>Contact
</li>
</ul>
</nav>
I'm trying to make a CSS drop down menu but the problem is that child list items overlap parent list items as you can see in the picture.
I found the source of the problem to be the padding: 10px 5px; in line 12 - When removed, the problem is solved. But I need the padding for the look. I read Inline elements and padding which addresses a similar issue but even the solution provided in the article - using float: left; instead of display: inline; - does not solve my problem.
Why does this happen and what is the solution?
HTML Code
<ul id="navigation_2">
<li>Home</li>
<li>About
<ul>
<li>Who We Are</li>
<li>Our Goal</li>
</ul>
</li>
</ul>
CSS Code
ul#navigation_2
{
margin: 0;
padding: 0;
list-style: none;
font-family: "Century Gothic","HelveticaNeueLT Pro 45 Lt",sans-serif;
}
ul#navigation_2 li
{
float: left;
position: relative;
padding: 10px 5px;
font-size: 114%;
text-align: center;
width: 100px;
}
ul#navigation_2 li a
{
text-decoration: none;
}
ul#navigation_2 li a:link, a:visited, a:active
{
color: black;
}
ul#navigation_2 li:hover
{
background-color: red;
}
ul#navigation_2 li ul
{
margin: 0;
padding: 0;
list-style: none;
display: none;
}
ul#navigation_2 li ul li
{
display: block;
width: 150px;
text-align: left;
}
ul#navigation_2 li:hover ul
{
display: block;
position: absolute;
background-color: #CBD966;
}
Here, I have a working example:
http://jsfiddle.net/hzCZY/2/
Never underestimate the power of inline-block! Basically your list was colliding with the text 'About' as opposed to the red box around the text 'About'. I formatted the actual a tag to be the red block instead, an inline-block, which then collided correctly with the ul below it.
If you need any more explanation I'd be more than happy to help.