I am not sure if this is the right way to do this but I am trying to align a number of ULs beside each other and should drop the third UL when the screen size is smaller. I just need help with the CSS because for some reason, they keep stacking on top of one another even though I already changed the width to 50%. I already created the '#media'.
HTML:
<ul>
<li>Content 1</li>
</ul>
<ul>
<li>Content 2</li>
</ul>
<ul>
<li>Content 3</li>
</ul>
CSS:
ul {
display: block;
width: 100%;
float:left;
}
#media (max-width: 767px){
ul {
width: 50%;
}
}
You need to remove the display: block, and width: 100%. And make display: inline-block
ul {
display: inline-block;
float:left;
overflow: auto;
}
Since making width: 100% will cover up the whole width, you are getting the uls one down another
You don't need the #media.
You need to use display:inline on your lists.
Have a look here: EXAMPLE
This is all you need.
HTML
<ul>
<li>Content 1</li>
</ul>
<ul>
<li>Content 2</li>
</ul>
<ul>
<li>Content 3</li>
</ul>
CSS
ul {
display:inline-block;
float:left;
}
You can see it over here : http://codepen.io/anon/pen/GwBak
Try changing the window size .
CSS code
{
display: block;
color: #FFF;
background-color: #036;
width: 9em;
padding: 3px 12px 3px 8px;
text-decoration: none;
border-bottom: 1px solid #fff;
font-weight: bold;
}
#navcontainer a:hover
{
background-color: #369;
color: #FFF;
}
In html code
<div id="navcontainer">
<ul>
<li>Milk
<ul>
<li>Goat</li>
<li>Cow</li>
</ul>
</li>
<li>Eggs
<ul>
<li>Free-range</li>
<li>Other</li>
</ul>
</li>
<li>Cheese
<ul>
<li>Smelly</li>
<li>Extra smelly</li>
</ul>
</li>
</ul>
</div>
Related
Is there a way to make medium.com like Navbar that can be scroll horizontally in touch devices. The best the way if there is no js is requier because I need it clean with css.
Here is how far I've got. But there is a scroll bar appearing in desktop browsers while the medium.com's navbar is not.
ul {
width: 300px;
list-style: none;
overflow-y: auto;
white-space: nowrap;
}
ul li {
display: inline;
padding: 10px;
}
<ul>
<li>Home</li>
<li>News</li>
<li>Sports</li>
<li>International</li>
<li>Political</li>
<li>TV News</li>
<li>About</li>
<li>Contact</li>
</ul>
JSFiddle
You need to use overflow-x.
CODEPEN
Add this between your tags. This is for responsive design.
<meta name="viewport" content="width=device-width, initial-scale=1">
CSS
ul {
width: 300px;
list-style: none;
overflow-x: auto;
white-space: nowrap;
background-color: #000;
padding: 20px 10px;
}
ul li {
display: inline;
padding: 10px;
color: #fff;
}
#media screen and (min-width: 768px) {
ul {
display: none;
}
}
HTML
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
<li>Link 8</li>
<li>Link 9</li>
<li>Link 10</li>
</ul>
ul {
list-style: none;
padding: 10px;
width: 100%;
border-top: 1px solid gray;
border-bottom: 1px solid gray;
overflow-y:hidden;
overflow-x: scroll;
display:inline-flex;
}
ul li {
display: inline-block;
padding: 5px;
}
ul li a{
text-decoration: none;
color: gray;
}
ul li a:hover{
color: black;
}
<ul>
<li>Home</li>
<li>News</li>
<li>Sports</li>
<li>International</li>
<li>Political</li>
<li>TV </li>
<li>Political</li>
<li>TV </li>
<li>Political</li>
<li>TV </li>
<li>Political</li>
<li>TV </li>
<li>Home</li>
<li>News</li>
<li>Home</li>
<li>News</li>
</ul>
I am trying to create a vertical navigation in my HTML document, but I cannot seem to get the main menu to line up evenly. Here is my HTML for the vertical navigation:
<div id="navbar">
<ul>
<li>Menu 1</li>
<li>Menu 2
<ul>
<li>Drop 1</li>
<li>Drop 2</li>
<li>Drop 3</li>
</ul></li>
<li>Menu 3</li>
<li>Menu 4
<ul>
<li>Drop 1</li>
<li>Drop 2</li>
</ul></li>
<li>Menu 5</li>
</ul>
</div>
And my CSS:
#navbar {
margin-left: -40px;
}
#navbar li{
list-style: none;
position: relative;
width: 209px;
padding: 6px;
line-height: 20pt;
cursor: pointer;
}
#navbar ul ul{
margin-left: 100px;
margin-top: -28px;
visibility:hidden;
height: 100px;
}
#navbar ul li:hover ul{
visibility:visible;
}
This is my first post ever, so I apologize if I didn't post in the correct format. This code is also from a much larger HTML/CSS file, so I just copy/pasted the only part I'm having an issue with. If I need to post a screenshot of what I'm talking about I can do that.
Thank you in advance!!
demo - http://jsfiddle.net/uab2hr50/2/
if you are looking to align the sub menu below the main menu
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#navbar ul {
border: 1px solid red;
display: inline-block;
padding: 6px;
}
#navbar li {
list-style: none;
position: relative;
width: 209px;
line-height: 20pt;
cursor: pointer;
}
#navbar ul ul {
display: none;
padding: 0;
border: 0;
}
#navbar ul li:hover ul {
display: block;
}
<div id="navbar">
<ul>
<li>Menu 1
</li>
<li>Menu 2
<ul>
<li>Drop 1
</li>
<li>Drop 2
</li>
<li>Drop 3
</li>
</ul>
</li>
<li>Menu 3
</li>
<li>Menu 4
<ul>
<li>Drop 1
</li>
<li>Drop 2
</li>
</ul>
</li>
<li>Menu 5
</li>
</ul>
</div>
There are a few problems here preventing the display you expect:
First: the fiddle
CSS CHANGES
#navbar li{
list-style: none;
position: relative;
/*width: 209px;*/
padding: 6px;
line-height: 20pt;
cursor: pointer;
display: block;
}
#navbar li:after {
content: '';
display: table;
clear: both;
}
#navbar ul a {
display: inline-block;
}
#navbar ul ul{
margin-top: 0;
visibility:hidden;
height: 100px;
padding: 0;
display: inline-block;
vertical-align: top;
margin-bottom: -9000px;
}
#navbar ul ul li:first-child {
padding-top: 0;
}
We removed quite a bit of your padding and margin rules here, and stopped setting a width on the li that you went ahead and broke out of anyway in the original code.
Then, we told both the a and ul elements to display as inline-block, told them they were to vertically align at the top and removed the padding-top off the first child of your sub-nav.
Then, we way over-compensate for the height of your lists by setting a margin-bottom of -9000px to pull your subsequent list items up to where they belong.
No absolute positioning needed, which would probably require some JavaScript to position everything reliably for you given different conditions.
Hope that helps.
I am working with a website with css drop down menus within the header div. When the drop down menu appears it resizes the header div therefore shoving down the content div.
In the body of my index.php:
<div class="top"></div>
<div class="container">
<?php include_once("header.php"); ?>
<div class="content"></div>
</div>
The header.php
<div class="header">
<div style="display: table-cell; width: 250px; text-align: center;">
LOGO
</div>
<div style="display: table-cell;">
<br><br><br>
<ul>
<li>Link 1
<ul>
<li>Monkey 1</li>
<li>Monkey 2</li>
<li>Monkey 3</li>
<li>Monkey 4</li>
<li>Monkey 5</li>
<li>Monkey 6</li>
<li>Monkey 7</li>
</ul>
</li>
<li>Link 2
<ul>
<li>Monkey 1</li>
<li>Monkey 2</li>
</ul>
</li>
<li>
Link 3
<ul>
<li>Monkey 1</li>
<li>Monkey 2</li>
<li>Monkey 3</li>
</ul>
</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
</ul>
</div>
</div>
And main.css
ul{
padding: 0;
list-style: none;
}
ul li{
float: left;
width: 100px;
text-align: center;
}
ul li a{
display: block;
padding: 5px 10px;
color: #333;
background: #f2f2f2;
text-decoration: none;
}
ul li a:hover{
color: #fff;
background: #939393;
}
ul li ul{
display: none;
}
ul li:hover ul{
display: block; /* display the dropdown */
}
.top{
background: #1b2d3c;
width: 100%;
height: 40px;
}
.container{
width: 1100px;
height: 1000px;
}
.header{
display: table-row;
width: 1100px;
height: 130px;
}
.content{
position: absolute;
background: #fff;
width: 1100px;
height: 500px;
}
* {
background: #87a0b4;
margin: 0px;
padding: 0px;
margin-left: auto ;
margin-right: auto ;
}
I apologize for the lengthy post. How can I prevent the problem I am having? I want to be sure I am doing things correctly before I get too deep into the project.
You need to change position of ul li:hover ul to absolute, and add some other properties like this JSFiddel (Source)
ul li:hover ul {
display: block;
position: absolute;
width: 100px;
z-index: 100;
}
Hope this will help you ..
As was said in the previous answer, you need to set position: absolute. I'd like to add a bit of information as to why.
According to MDN:
Elements that are positioned relatively are still considered to be in the normal flow of elements in the document. In contrast, an element that is positioned absolutely is taken out of the flow and thus takes up no space when placing other elements. The absolutely positioned element is positioned relative to nearest positioned ancestor. If a positioned ancestor doesn't exist, the initial container is used.
Basically, by giving an element absolute positioning, it is no longer being taken into account when positioning the rest of the page. It will take up its alloted space in its set position no matter what.
In your case, the div was moving relative to the elements surrounding it. By using position: absolute, you are ommiting and relativity.
I am having trouble getting my drop down navigation menu to work. The main issue is when I zoom out in Google Chrome, the menu starts wrapping and dropping to a 2nd line, causing all other divs on the page to wrap too.
I have searched across the internet to find a solution but nothing seems to work. Thanks for your advice.
Html:
<div id="nav">
<ul>
<li>Home</li>
<li>About us</li>
<li>Quality</li>
<li>Processes</li>
<li>Markets</li>
</ul>
<ul>
<li>Products
<ul>
<li>Product information</li>
<li>Product number one submenu</li>
<li>Product number two submenu</li>
<li>Product 3</li>
<li>Product 4</li>
<li>Product num 5</li>
<li>Products 6, more & products</li>
<li>Prod numb Seven</li>
<li>More products eight</li>
<li>More prods, prods and products</li>
<li>prod Stock List</li>
</ul>
</li>
</ul>
<ul>
<li>News
<ul>
<li>Latest news</li>
<li>Case Studies</li>
<li>Testimonials</li>
</ul>
</li>
</ul>
<ul>
<li>Contact
<ul>
<li>Contact us</li>
<li>Directions</li>
</ul>
</li>
</ul>
</div>
CSS:
#nav {
background-color:#14c64a;
height:37px;
width:960px;
}
#nav ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
white-space:nowrap;
}
#nav ul li {
display: block;
position: relative;
float: left;
}
#nav li ul {
display: none;
}
#nav ul li a {
display: block;
text-decoration: none;
color: #ffffff;
padding: 5px 15px 5px 15px;
background: #14c64a;
margin-left: 1px;
white-space: nowrap;
line-height:27px;
}
#nav ul li a:hover {
background: #666;
}
#nav li:hover ul {
display: block;
position: absolute;
}
#nav li:hover li {
float: none;
font-size: 11px;
}
#nav li:hover a { background: #14c64a; }
#nav li:hover li a:hover {
background: #1e7c9a;
}
Chrome doesn't want to shrink its font size below the minimum font size set by the user, even when zooming. That causes the texts to be wider than the 960px container at some point while zooming out.
(You can test this by making the minimum font size equal to the default font size in the settings. Then Chrome won't shrink the text at all when zooming out, not even a little.)
By the way, here is a fiddle of the code in the question, so people can test instantly.
I have two lists that I'm floating into two columns. I want to make it so on small screens, the items become one column, BUT I'd like to alternate the items.
<div>
<ul class="left">
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
<li>Item D</li>
</ul>
<ul class="right">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
So the result should look like this on small screens.
Item A
Item 1
Item B
Item 2
Item C
Item 3
Item D
Item 4
Here is my starting jsfiddle. Should I instead make one list with li width set to 50%? I wanted to see if this was possible while keeping the HTML markup the way it is.
http://jsfiddle.net/aAhX9/
The only way to do this (outside of some very laborious positioning) is to combine the elements into a single list, giving each li a class-name and styling them appropriately:
<div>
<ul>
<li class="left">Item A</li>
<li class="right">Item 1</li>
<li class="left">Item B</li>
<li class="right">Item 2</li>
<li class="left">Item C</li>
<li class="right">Item 3</li>
<li class="left">Item D</li>
<li class="right">Item 4</li>
</ul>
</div>
li {
list-style-type: none;
width: 50%;
}
li.left {
float: left;
background-color: #0f0;
}
li.right {
float: right;
background-color: #00f;
}
#media only screen and (max-width: 480px) {
.left, .right {
float: none;
width: 100%;
}
}
Updated JS Fiddle demo.
As noted by Hashem, in the comments below, it would be possible to use the :nth-child() selector, rather than class-names, to style the various li elements left, or right:
li:nth-child(odd) {
float: left;
background-color: #0f0;
}
li:nth-child(even) {
float: right;
background-color: #00f;
}
#media only screen and (max-width: 480px) {
li {
float: none;
width: 100%;
}
}
Updated JS Fiddle demo.
You can't do that with two ul. However, you can put two span in each li.
Example:
HTML:
<div>
<ul>
<li><span class="left">Item A</span><span class="right">Item 1</span></li>
<li><span class="left">Item B</span><span class="right">Item 2</span></li>
<li><span class="left">Item C</span><span class="right">Item 3</span></li>
<li><span class="left">Item D</span><span class="right">Item 4</span></li>
</ul>
</div>
CSS:
ul{
list-style: none;
margin: 0;
padding: 0;
}
span{
width: 50%;
}
.left {
float: left;
background:blue;
}
.right {
float: right;
background:Red;
}
#media only screen and (max-width: 480px) {
.left, .right {
float: none;
width: 100%;
display:blocK;
}
}
JSFiddle