I've got this menu wich is setup inline and has dropdowns.
The inner ul has a background.
Each dropdown li has a :hover that changes the background of the li:
<div id="navMain">
<ul>
<li>Forside
<ul>
<li>1111111111111</li>
<li>Link 1-2</li>
<!-- etc. -->
</ul>
</li>
<li>Om Os
<ul>
<li>Link 2-1</li>
<li>Link 2-2</li>
<!-- etc. -->
</ul>
</li>
<li>Link 3
<ul>
<li>Link 3-1</li>
<li>Link 3-2</li>
<!-- etc. -->
</ul>
</li>
</ul>
</div>
Problem is, that when one of the submenu li is longer than the others, it will only expand itself, and not the other li ofcourse.
This results in the :hover effect having different lengths.
So how would i make all li in each inner ul the same size as the widest one?
Here you can find the CSS if needed.
Here. Notice I added a class to your menu li's and that I added a body background to your css, because I couldn't notice your menus. Finally the trick is done by making the li elements 100% width
body {
background-color: green;
}
.menu li {
width: 100%
}
#navMain {}
#navMain ul {
padding: 0;
margin: 0;
z-index: 2;
}
#navMain ul li {
margin-right: 5px;
text-align: center;
}
#navMain li a {
display: block;
text-decoration: none;
color: white;
padding-left: 10px;
padding-right: 10px;
}
#navMain li a:hover {
background-color: black;
}
#navMain ul li:last-child {
margin-right: 0px;
}
#navMain li {
position: relative;
float: left;
list-style: none;
margin: 0;
padding: 0;
font-size: 17px;
font-weight: bold;
color: #fff;
}
#navMain ul ul {
position: absolute;
top: 20px;
visibility: hidden;
background-image: url(img/alphaBg.png);
}
#navMain ul li ul li {
font-size: 12px;
margin-right: 0px;
text-align: left;
}
#navMain ul li ul li:first-child {
padding-top: 5px;
}
#navMain ul li:hover ul {
visibility: visible;
}
<html>
<head>
</head>
<body>
<div id="navMain">
<ul>
<li>Forside
<ul class="menu">
<li>1111111111111</li>
<li>Link 1-2</li>
<li>Link 1-3</li>
<li>Link 1-3</li>
<li>Link 1-3</li>
<li>Link 1-3</li>
</ul>
</li>
<li>Om Os
<ul class="menu">
<li>Link 2-1</li>
<li>Link 2-2</li>
<li>Link 2-3</li>
</ul>
</li>
<li>Link 3
<ul class="menu">
<li>Link 3-1</li>
<li>Link 3-2</li>
<li>Link 3-3</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
li {display:block} will make the list items as wide as the widest item in that parent container
body {
background: #ededed;
margin: 0 auto;
}
.wrapper {
width: 720px;
border: 1px solid red;
padding: 5px;
}
.menu {
padding: 0;
margin: 0;
width: 100%;
border-bottom: 0;
}
.menu li {
display: table-cell;
width: 1%;
float: none;
border: 1px solid green;
margin: 2px;
padding: 10px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div class="wrapper">
<ul class="menu">
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
<li>menu 4</li>
<li>menu 5</li>
</ul>
</div>
</body>
</html>
Related
body {
padding: 0px;
margin: 0px;
background-image: url("background.jpg");
background-size: cover;
}
* {
font-family: "Ubuntu", sans-serif;
font-size: 1rem;
text-decoration: none;
color: white;
}
.nav-bar {
background-color: darkred;
display: inline-block;
width: 100%;
height: 48px;
}
#navigation ul {
list-style: none;
float: right;
padding: 0px;
margin: 0px;
}
#navigation ul ul {
display: none;
position: absolute;
width: 200px;
}
#navigation ul li:hover ul {
display: block;
}
#navigation ul li {
float: left;
padding: 15px;
}
#navigation ul ul li {
margin-left: -15px !important;
}
#navigation ul li ul li:first-child {
margin-top: 15px;
}
#navigation ul ul li {
margin-left: 0px;
padding-top: 10px;
background-color: darkgreen;
}
#navigation ul li ul li:hover {
background-color: blueviolet;
}
#navigation ul li:hover {
background-color: firebrick;
}
#navigation ul li:last-child ul li { // Here is actually what the some magic has to be carried out actually.
right: 100px;
background: black;
}
<!DOCTYPE html>
<html>
<head>
<!-- Right hand sided navigation menu with level 1 drop down -->
<title>HTML - CSS Lessons</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div class="nav-bar">
<nav id="navigation">
<ul>
<li>
Menu Item 1
<ul>
<li>Submenu 1 Item 1</li>
<li>Submenu 1 Item 2</li>
<li>Submenu 1 Item 3</li>
</ul>
</li>
<li>Menu Item 2</li>
<li>
Menu Item 3
<ul>
<li>Submenu 3 Item 1</li>
<li>Submenu 3 Item 2</li>
<li>Submenu 3 Item 3</li>
</ul>
</li>
<li>Menu Item 4</li>
<li>Menu Item 5</li>
<li>
Menu Item 6 // This is the place where the menu has to come out of screen
<ul>
<li>Submenu 6 Item 1</li>
<li>Submenu 6 Item 2</li>
<li>Submenu 6 Item 3</li>
</ul>
</li>
</ul>
</nav>
</div>
</body>
</html>
Why the last I mean the menu in black background appears inside the screen? How to pull it out? I have used "#navigation ul li:last-child ul li" to make the last drop down as black color. But, don't have any idea of pulling it out from the screen's right hand side. Can't we make use of "#navigation ul li:last-child ul li" to pull out the menu out of the screen?
body {
padding: 0px;
margin: 0px;
background-image: url("background.jpg");
background-size: cover;
}
* {
font-family: "Ubuntu", sans-serif;
font-size: 1rem;
text-decoration: none;
color: white;
}
.nav-bar {
background-color: darkred;
display: inline-block;
width: 100%;
height: 48px;
}
#navigation ul {
list-style: none;
float: right;
padding: 0px;
margin: 0px;
}
#navigation ul ul {
display: none;
position: absolute;
width: 200px;
}
#navigation ul li:hover ul {
display: block;
}
#navigation ul li {
float: left;
padding: 15px;
}
#navigation ul ul li {
margin-left: -15px !important;
}
#navigation ul li ul li:first-child {
margin-top: 15px;
}
#navigation ul ul li {
margin-left: 0px;
padding-top: 10px;
background-color: darkgreen;
}
#navigation ul li ul li:hover {
background-color: blueviolet;
}
#navigation ul li:hover {
background-color: firebrick;
}
#navigation ul li:last-child ul li {
position: relative;
right: 21%;
background: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Right hand sided navigation menu with level 1 drop down -->
<link rel="stylesheet" href="style.css" />
<title>HTML - CSS Lessons</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div class="nav-bar">
<nav id="navigation">
<ul>
<li>
Menu Item 1
<ul>
<li>Submenu 1 Item 1</li>
<li>Submenu 1 Item 2</li>
<li>Submenu 1 Item 3</li>
</ul>
</li>
<li>Menu Item 2</li>
<li>
Menu Item 3
<ul>
<li>Submenu 3 Item 1</li>
<li>Submenu 3 Item 2</li>
<li>Submenu 3 Item 3</li>
</ul>
</li>
<li>Menu Item 4</li>
<li>Menu Item 5</li>
<li>
Menu Item 6
<ul>
<li>Submenu 6 Item 1</li>
<li>Submenu 6 Item 2</li>
<li>Submenu 6 Item 3</li>
</ul>
</li>
</ul>
</nav>
</div>
</body>
</html>
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>
Please take a look at this Fiddle:
https://jsfiddle.net/wd9wj7oe/1/
CODES:
HTML
<nav id="navigation">
<ul class="menu">
<li>home</li>
<li>about</li>
<li>products</li>
<ul>
<li>Line 1</li>
<li>Line 2</li>
<li>Line 3</li>
<li>Line 4</li>
<li>Line 5</li>
</ul>
<li>help</li>
<li>join us</li>
<li>contact</li>
</ul>
</nav>
CSS:
#navigation{
float: left;
list-style: none;
font-family: Arial;
font-size: 20px;
position: absolute;
}
#navigation li{
list-style: none;
float:left;
padding-left: 28px;
}
#navigation ul ul{
left: 0;
top: 100%;
position: absolute;
float: none;
list-style: none;
}
#navigation ul ul li{
display: none;
left: 0;
float: none;
z-index: 1000;
}
#navigation ul li:hover > ul{
display:block;
}
As you can see, there are two main problems happening here:
1 - The sub menu is not showing up when i hover over "products", as it should.
2 - Even if it would show up, the sub is not positioned correctly.
Help please!
You have the wrong markup for a drop-down menu
instead
<ul>
<li>item 1</li>
<li>item 2</li>
<ul>
<li>subitem 1</li>
<li>subitem 2</li>
<li>subitem 3</li>
</ul>
<li>item 3</li>
</ul>
to
<ul>
<li>item 1</li>
<li>item 2
<ul>
<li>subitem 1</li>
<li>subitem 2</li>
<li>subitem 3</li>
</ul>
</li>
<li>item 3</li>
</ul>
ul{
padding: 0;
}
#navigation {
float: left;
list-style: none;
font-family: Arial;
font-size: 20px;
position: absolute;
}
#navigation li {
list-style: none;
float:left;
padding-left: 28px;
position: relative;
}
#navigation ul li:hover > ul {
display: block;
}
#navigation ul ul {
position: absolute; left: auto; top: 100%;
list-style: none;
display: none;
z-index: 1000;
}
#navigation ul ul li {
float: none;
padding: 0;
}
<nav id="navigation">
<ul class="menu">
<li>home
</li>
<li>about
</li>
<li>products
<ul>
<li>Line 1
</li>
<li>Line 2
</li>
<li>Line 3
</li>
<li>Line 4
</li>
<li>Line 5
</li>
</ul>
</li>
<li>help
</li>
<li>join us
</li>
<li>contact
</li>
</ul>
</nav>
You have to hide the ul and not the li element. And for the positioning, you have to set position: relative on #navigation li.
#navigation {
float: left;
list-style: none;
font-family: Arial;
font-size: 20px;
position: absolute;
}
#navigation li {
position: relative;
list-style: none;
float:left;
padding-left: 28px;
}
#navigation ul ul {
display: none;
left: 0;
top: 100%;
width: 6em;
position: absolute;
float: none;
list-style: none;
}
#navigation ul ul li {
left: 0;
float: none;
z-index: 1000;
}
#navigation ul li:hover > ul {
display:block;
}
https://jsfiddle.net/wd9wj7oe/5/
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 have a drop down menu where I want some of the list items to be in one line.
See demo
You will notice that under Tab One, there are 9 rows. I want there to be three rows with three items in each row. How can this be done in CSS?
HTML:
<div id="wrapper">
<ul id="menu">
<li>Tab One
<ul style="width: 300%;">
<li>Column one</li>
<li>Column one</li>
<li>Column one</li>
<li>Column two</li>
<li>Column two</li>
<li>Column two</li>
<li>Column three</li>
<li>Column three</li>
<li>Column three</li>
</ul>
</li>
<li>Tab Two
<ul style="position: relative; left: -100%; width: 300%">
<li>Tab 2</li>
<li>Tab 2</li>
<li>Tab 2</li>
</ul>
</li>
<li>Tab Three
<ul style="position: relative; left: -200%; width: 300%">
<li>Tab 3</li>
<li>Tab 3</li>
<li>Tab 3</li>
</ul>
</li>
</ul>
</div>
CSS:
body {
font-family: arial;
margin: 0px;
padding-left: 40px;
padding-right: 40px;
}
#wrapper {
text-align: center;
height: auto;
margin: auto;
min-width: 500px;
}
#wrap {
display: inline;
}
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
#menu > li {
display: block;
position: relative;
float: left;
width: 33.3%;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #1e7c9a;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover {
background: #3b3b3b;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 14px;
}
li:hover a {
background: #3b3b3b;
}
li:hover li a:hover {
background-color: black;
opacity: .7;
}
Working example: http://jsfiddle.net/w7a3N/5/
Remove > from #menu > li { and set inner <li> to <li style="width: 33%;">
Not sure if the style="width:33%;" is absolutely necessary since it works in Firefox 20 without it, but just to be safe.
UPDATE
You asked for a version that only does multiple columns under the first tab. Here you go:
http://jsfiddle.net/w7a3N/6/
Gave First tab an id like so <ul id="tab1" and then added this to CSS:
#tab1 li{
display: block;
position: relative;
float: left;
width: 33%;
}