<ul id="login">
<li>User></li>
<li>Logout></li>
</ul>
I did make my menu and sub menu work ok. But the last item came from a Partial view doesnt show because this line
/* hide the second level menu */
.menu ul {
display: none;
I try putting using :not selector, but then show in a wrong format and first sub menu stop working.
.menu ul:not(#login)
On this sample, all four <LI> element should have same format and first one display the submenu.
Also try creating a different class for the second UL and ignore me.
body {
background: black;
}
.menu {
display: block;
}
.menu li {
display: inline-block;
position: relative;
z-index: 100;
}
.menu li a {
font-weight: 600;
text-decoration: none;
padding: 11px;
display: block;
color: #ffffff;
-webkit-transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
-o-transition: all 0.2s ease-in-out 0s;
-ms-transition: all 0.2s ease-in-out 0s;
transition: all 0.2s ease-in-out 0s;
}
.menu li a:hover, .menu li:hover > a {
color: #ffffff;
background: #9CA3DA;
}
/* hide the second level menu */
.menu ul {
display: none;
margin: 0;
padding: 0;
width: 150px;
position: absolute;
top: 43px;
left: 0px;
background: #ffffff;
}
/* display second level menu on hover */
.menu li:hover > ul {
display: block;
}
.menu ul li {
display: block;
float: none;
background: black;
margin: 0;
padding: 0;
}
.menu ul li a {
font-size: 12px;
font-weight: normal;
display: block;
color: #797979;
border-left: 3px solid #ffffff;
background: #ffffff;
}
.menu ul li a:hover, .menu ul li:hover > a {
background: #f0f0f0;
border-left: 3px solid #9CA3DA;
color: #797979;
}
<nav>
<ul class="menu">
<li>
<i class="icon-home"></i>HOME
<ul class="sub-menu">
<li>Sub-Menu 1</li>
<li>Sub-Menu 2</li>
<li>Sub-Menu 3</li>
</ul>
</li>
<li><i class="icon-user"></i>ABOUT</li>
<li>
<ul id="login">
<li>User</li>
<li>Logout</li>
</ul>
</li>
</ul>
</nav>
Can you explain why you didn't put Userand Logout at the same level of Home and About like that:
<nav>
<ul class="menu">
<li>
<i class="icon-home"></i>HOME
<ul class="sub-menu">
<li>Sub-Menu 1</li>
<li>Sub-Menu 2</li>
<li>Sub-Menu 3</li>
</ul>
</li>
<li>
<i class="icon-user"></i>ABOUT
</li>
<li>User</li>
<li>Logout</li>
</ul>
</nav>
It should work !
EDIT
With the following modification of css, your menu should work.
.menu ul.sub-menu li a { ... }
.menu ul.sub-menu li a:hover, .menu ul.sub-menu li:hover > a { ... }
#login {padding: 0; text-transform: uppercase;}
codepen
Here's the code:
<nav>
<ul class="menu">
<li>
<i class="icon-home"></i>HOME
<ul class="sub-menu">
<li>Sub-Menu 1</li>
<li>Sub-Menu 2</li>
<li>Sub-Menu 3</li>
</ul>
</li>
<li><i class="icon-user"></i>ABOUT</li>
<li id="user">USER</li>
<li id="logout">LOGOUT</li>
</ul>
</nav>
That should do it!
You've placed the ABOUT link in a list item by itself.
Here's the proper HTML:
<nav>
<ul class="menu">
<li>
<i class="icon-home"></i>HOME
<ul class="sub-menu">
<li>Sub-Menu 1</li>
<li>Sub-Menu 2</li>
<li>Sub-Menu 3</li>
</ul>
</li>
<li>
<i class="icon-user"></i>ABOUT
<ul id="login">
<li>User</li>
<li>Logout</li>
</ul>
</li>
</ul>
</nav>
Related
I wonder if there is a way to lower opacity (on hover) to all of the 'li's' except the one I'm actually hovering? Something similar to this picture:
.main-navigation {
margin: 0;
padding: 20px 0px 25px;
list-style: none;
background-color: #ffffff;
text-align: center;
display:block;
font-size:1.1em;
}
.main-navigation li.hvr a.lvl1:link,
.main-navigation li.hvr a.lvl1:visited
{
display: block;
padding: 5px 2px 5px 3px;
color: #000;
text-decoration: none;
text-align:center;
}
.main-navigation li.hvr a.lvl1.active {
background: #eeeeee;
color:#000000;
}
.main-navigation li.hvr a.lvl1:hover
{
background-color: #E6E6E6;
color:#666666;
}
.main-navigation li.hvr {
float: left;
position: relative;
width:191px;
margin:0;
font-family: 'Open Sans', sans-serif;
}
.main-navigation li.hvr:hover {
background-color: #E6E6E6;
}
.main-navigation ul {
display: none;
position: absolute;
top:100%;
left: 0;
z-index: 9999;
background-color: #777;
margin: 0;
padding: 0;
min-width:100%;
text-align:left;
}
.main-navigation li.hvr:hover ul { display: block; }
.main-navigation li.hvr ul li {
margin: 0;
padding: 0;
list-style: none;
}
.main-navigation li.hvr ul li a:link,
.main-navigation li.hvr ul li a:visited
{
display: block;
padding: 5px 20px;
color: #fff;
text-align: center;
}
.main-navigation li.hvr ul li a:hover,
.main-navigation li.hvr ul li a:active
{
display: block;
padding: 5px 20px;
color: #fff;
background-color:#cccccc;
}
<ul class="main-navigation clearfix">
<li class="hvr ">
<a class="lvl1 active" href="">Title 1</a>
<ul>
<li>Sub title 1</li>
<li>Sub title 2</li>
<li>Sub title 3</li>
</ul>
</li>
<li class="hvr ">
<a class="lvl1" href="">Title 2</a>
<ul>
<li>Sub title 1</li>
<li>Sub title 2</li>
<li>Sub title 3</li>
</ul>
</li>
<li class="hvr ">
<a class="lvl1" href="">Title 3</a>
<ul>
<li>Sub title 1</li>
<li>Sub title 2</li>
<li>Sub title 3</li>
</ul>
</li>
<li class="hvr ">
<a class="lvl1" href="">Title 4</a>
<ul>
<li>Sub title 1</li>
<li>Sub title 2</li>
<li>Sub title 3</li>
</ul>
</li>
</ul>
You lower the opacity of all alements except the hovered one with CSS.
The point is to lower the opacity of all <li> elements when the parent (ul) is hovered and to reset the opacity to 1 on the hovered li element like this :
ul:hover li { opacity:0.5; }
ul li:hover { opacity:1; }
Here is a simple demo :
li{
float:left;
width:33.33%;
line-height:50px;
background:grey;
list-style-type:none;
}
ul:hover li{
opacity:0.5;
}
ul li:hover{
opacity:1;
}
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
I'm trying to have the sub menu items disappear after a certain amount of time using CSS only. Sadly if I have more than one sub menu and hover over the next sub menu the other one has not yet disappeared. Any way to make the previous sub menu disappear when the next sub menu is show with CSS only?
It wouldn't be hard for me to write a JQuery script to achieve this but would nice if I could do it using css. Would there be any JS/JQuery plugins to recommend if this is not possible with CSS?
http://codepen.io/anon/pen/aBPBbj
nav > ul > li {
display: inline-block
}
nav > ul > li ul {
visibility: hidden;
position: absolute;
top: 105%;
left: 0;
transition: 0.2s 1s;
}
nav > ul > li:hover ul {
visibility: visible;
transition-delay: 0s;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
}
nav li {
width: 100px;
background: #eee;
margin: 2px;
position: relative;
padding: 10px;
}
nav a {
display: block;
}
body {
padding: 10px;
}
<nav>
<ul>
<li>
Dropdown
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</li>
<li>
Dropdown
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</li>
</ul>
</nav>
Try to remove transition: 0.2s 1s;
Just change the tarnsition time as shown below code.
nav > ul > li ul {
visibility: hidden;
position: absolute;
top: 105%;
left: 0;
transition: 0.2s;
}
Try this example of code:
<ul id="mainNav">
<li>item 1
<ul>
<li>sub item 1</li>
<li>sub item 2</li>
<li>sub item 3</li>
</ul>
</li>
<li>item 2
<ul>
<li>sub item 1</li>
<li>sub item 2</li>
<li>sub item 3</li>
<li>sub item 4</li>
</ul>
</li>
<li>item 3
<ul>
<li>sub item 1</li>
<li>sub item 2</li>
</ul>
</li>
ul#mainNav {
float:left;
width:auto;
margin:0; padding:0;
color:white;
list-style-type:none;
}
ul#mainNav > li {
float:left;
display:inline;
position:relative;
padding:5px;
border:1px white solid;
background-color:black;
}
ul#mainNav > li:hover {
background:white;
color:black;
border:1px black solid;
}
ul#mainNav > li:hover ul {
visibility: visible;
opacity: 1;
transition-delay: 0s, 0s;
}
ul#mainNav li ul {
position:absolute;
float:left;
width:100px;
height:0;
padding:10px;
margin:0;
visibility: hidden;
opacity: 0;
transition-property: opacity, visibility;
transition-duration: 1.4s, 0s;
transition-delay: 0s, 0s;
}
ul#mainNav ul li {
background-color:white;
border:1px black solid;
}
ul#mainNav ul li:hover {
background-color:black;
border:1px white solid;
color:white;
visibility: hidden;
opacity: 0;
transition-property: opacity, visibility;
transition-duration: 0s, 0s;
transition-delay: 0s, 0s;
}
Seeing as no one proposed a working CSS only solution apparently the only way to achieve this is through javascript/JQuery.
https://jsfiddle.net/jkanckr3/
<nav>
<ul>
<li>
Dropdown
<ul>
<li>One</li>
<li>Two</li>
<li>Three</a></li>
</ul>
</li>
<li>
Dropdown
<ul>
<li>One</li>
<li>Two</li>
<li>Three</a></li>
</ul>
</li>
</ul>
</nav>
var timeout;
$('nav > ul > li').on({
mouseenter: function () {
clearTimeout(timeout);
$('nav > ul > li > ul').hide();
$('ul', this).show();
},
mouseleave: function () {
var self = this;
timeout = setTimeout(function() {
$('ul', self).hide();
}, 500);
}
});
nav > ul > li {
display: inline-block
}
nav > ul > li ul {
display: none;
position: absolute;
top: 105%;
left: 0;
}
nav > ul > li:hover ul {
//visibility: visible;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
}
nav li {
width: 100px;
background: #eee;
margin: 2px;
position: relative;
padding: 10px;
}
nav a {
display: block;
}
body {
padding: 10px;
}
I want to dsiplay menu when hover but not working.
HTML code pour afficher:
<nav>
<ul class="menu">
<li>home</li>
<li class="current">other</a></li>
<li>
services
<ul class="drop">
<li>s1</li>
<li>s2</li>
</ul>
</li>
</ul>
</nav>
CSS code to display menu and drop:
nav .menu li:hover > a {
background: #e2782e;
transition: all 0.5s;
color: white;
font-weight:bold;
}
.drop{
display:none;
}
li :hover > .drop{
display:black;
}
Please check below code for your reference.
ul.drop{display:none;}
nav ul li a:hover{background:#ccc;}
nav ul li:hover ul.drop{display:block;}
<nav>
<ul class="menu">
<li>home</li>
<li>other</li>
<li>services
<ul class="drop">
<li>s1</li>
<li>s2</li>
</ul>
</li>
</ul>
</nav>
<nav>
<ul class="menu">
<li>home</li>
<li class="current">other</a></li>
<li>
services
<ul class="drop">
<li>s1</li>
<li>s2</li>
</ul>
</li>
</ul>
</ul>
</nav>
nav .menu li:hover .drop li a {
background: #e2782e;
transition: all 0.5s;
color: white;
font-weight:bold;
}
.drop{
display:none;
}
li :hover > .drop{
display:block;
}
Please try this code.
Several issues:
unnested </a> tag for "other" menu item.
extraneous </ul> tag at the end
black is not a valid value for the display property, use list-item instead.
Edit: see Nick De Jaeger's answer above for the corrected code. Using display: block also works, but list-item is more appropriate in this case (<li>).
Bart look here this is all css when I hover on drop all auther menu item hided
nav .menu {
height: 60px;
background: #8d8989;
border-radius: 5px;
padding: 0;
margin: 0;
text-align: center; /* center the li */
}
nav .menu li {
display: inline-block;
}
nav .menu li a{
font-family: arial, sans-serif;
color: #fff;
text-decoration: none;
text-transform: uppercase;
line-height: 60px;
font-weight:bold;
vertical-align: middle;
padding: 20px;
transition: all 0.5s;
}
nav .menu li:hover > a {
background: #e2782e;
transition: all 0.5s;
color: #FFF;
font-weight: bold;
}
.drop{
display: none;
}
li:hover > .drop{
display: list-item;
background-color:red;
}
html
<nav>
<ul class="menu">
<li>home</li>
<li>contact</li>
<li>
<?php echo $lang['MENU_OUR_PRODUCTS']; ?>
<ul class="drop">
<li><?php echo $lang['MENU_History']; ?></li>
<li><?php echo $lang['MENU_CONTACT_US']; ?></li>
<li><?php echo $lang['MENU_History']; ?></li>
<li><?php echo $lang['MENU_CONTACT_US']; ?></li>
</ul>
</li>
</ul>
</ul>
</nav>
see here jsfiddle
you have some problems in your code
first in your HTML you have a closing tag </a> on the li.current but you don't have any <a> there. so that closing tag is not required
also you have and extra closing tag </ul> , you have only 2 ul to close , ul.menu and ul.drop so you need only 2 </ul> not 3.
second in your CSS , you have a space between li and :hover , you need to write them together like li:hover .
also display:black doesn't exist, i guess you wanted to write display:block
Updated code HTML :
<ul class="menu">
<li>home</li>
<li class="current">other</li>
<li>
services
<ul class="drop">
<li>s1</li>
<li>s2</li>
</ul>
</li>
</ul>
CSS :
nav .menu li:hover > a {
background: #e2782e;
transition: all 0.5s;
color: white;
font-weight:bold;
}
.drop{
display:none;
}
li:hover > .drop{
display:block;
}
let me know if it helps.
NOTE : there are so many questions about this on stackoverflow, you should be able to find your answer very quickly , also you might want to check this CSS Dropdowns
nav .menu li:hover > a {
background: #e2782e;
transition: all 0.5s;
color: #FFF;
font-weight: bold;
}
.drop{
display: none;
}
li:hover > .drop{
display: block;
}
<nav>
<ul class="menu">
<li>home</li>
<li class="current">other</li>
<li>services
<ul class="drop">
<li>s1</li>
<li>s2</li>
</ul>
</li>
</ul>
</nav>
How do I make a div menu button drop down and add sub menus to it using only HTML & CSS.
HTML:
<div class="right_menu">Change Password
Sign Out
</div>
CSS:
.sign_out_button{
background-color: #2fa4e7;
padding-top: 16px;
padding-bottom: 16px;
padding-left:10px;
padding-right:10px;
color: #FFF;
float: left;
text-decoration: none;
}
.sign_out_button:hover{background-color:#1892d7;}
.sign_out_button a{color:#FFF;
text-decoration: none;}
Here is another choise without javascript and it works fine too
<ul>
<li>
Menu
<ul>
<li>Submenu</li>
<li>Submenu</li>
<li>Submenu</li>
</ul>
</li>
</ul>
This is your html, insert to your page. Now comes the CSS
ul {
width:200px;
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
ul li {width:200px;
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #fff;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
ul li:hover {
background: #555;
color: #fff;
}
ul li ul {
padding: 0;
position: absolute;
top: 48px;
left: 0;
width:200px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
ul li ul li {
background: #555;
display: block;
color: #fff;
text-shadow: 0 -1px 0 #000;
}
ul li ul li:hover { background: #666; }
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
And here you got a demo of that
https://jsfiddle.net/r50kbnq7/
I linked a jsfiddle below, have a look.
CSS:
#primary_nav_wrap
{
margin-top:15px
}
#primary_nav_wrap ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}
#primary_nav_wrap ul a
{
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}
#primary_nav_wrap ul li
{
position:relative;
float:left;
margin:0;
padding:0
}
#primary_nav_wrap ul li.current-menu-item
{
background:#ddd
}
#primary_nav_wrap ul li:hover
{
background:#f6f6f6
}
#primary_nav_wrap ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}
#primary_nav_wrap ul ul li
{
float:none;
width:200px
}
#primary_nav_wrap ul ul a
{
line-height:120%;
padding:10px 15px
}
#primary_nav_wrap ul ul ul
{
top:0;
left:100%
}
#primary_nav_wrap ul li:hover > ul
{
display:block
}
HTML:
<h1>Simple Pure CSS Drop Down Menu</h1>
<nav id="primary_nav_wrap">
<ul>
<li class="current-menu-item">Home</li>
<li>Menu 1
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4
<ul>
<li>Deep Menu 1
<ul>
<li>Sub Deep 1</li>
<li>Sub Deep 2</li>
<li>Sub Deep 3</li>
<li>Sub Deep 4</li>
</ul>
</li>
<li>Deep Menu 2</li>
</ul>
</li>
<li>Sub Menu 5</li>
</ul>
</li>
<li>Menu 2
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
</ul>
</li>
<li>Menu 3
<ul>
<li class="dir">Sub Menu 1</li>
<li class="dir">Sub Menu 2 THIS IS SO LONG IT MIGHT CAUSE AN ISSEUE BUT MAYBE NOT?
<ul>
<li>Category 1</li>
<li>Category 2</li>
<li>Category 3</li>
<li>Category 4</li>
<li>Category 5</li>
</ul>
</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
<li>Sub Menu 5</li>
</ul>
</li>
<li>Menu 4</li>
<li>Menu 5</li>
<li>Menu 6</li>
</ul>
</nav>
http://jsfiddle.net/p9mrdk1d/
This is Very simple. here it is a simple code.........
===============HTML=================
<ul id="menu">
<li><span>HerĹa 1</span></li>
<li><span>HerĹa 2</span></li>
<li><span>HerĹa 3</span>
<ul>
<li><span>Level 2-A-1</span>
<ul>
<li><span>Level 3-A-1</span>
<ul>
<li><span>Level 4-A-1</span>
<ul>
<li><span>Level 5-A-1</span></li>
</ul>
</li>
<li><span>Level 4-A-2</span></li>
</ul>
</li>
<li><span>Level 3-A-2</span></li>
<li><span>Level 3-A-3</span></li>
</ul>
</li>
<li><span>Level 2-A-2</span></li>
<li><span>Level 2-A-3</span></li>
<li><span>Level 2-A-4</span></li>
</ul>
</li>
</ul>
=============CSS================
* {
list-style:none;
margin:0;
padding:0;
font-size:1em;
cursor:pointer;
}
#menu{
margin:3px;
}
#menu > li{ /* Top Level */
float:left;
margin-right:3px;
}
#menu > li > span{
display:block;
background:#0ac;
padding:3px 10px;
}
#menu > li:hover > span{
color:#fff;
}
#menu > li > ul{ /* Second Level */
display:none;
background:#08a;
}
#menu > li:hover > ul{
display:block;
position:absolute;
}
#menu > li > ul > li > span{
display:block;
padding:3px 10px;
border-top:solid 3px #fff;
}
#menu > li > ul > li:hover > span{
color:#fff;
}
#menu > li > ul li > ul{ /* Third Level & beyond */
display:none;
background:#068;
}
#menu > li > ul li:hover > ul{
display:block;
position:absolute;
left:100%;
border-left:solid 3px #fff;
top:0;
width:auto;
}
#menu > li > ul > li ul > li{
display:block;
padding:3px 10px;
border-top:solid 3px #fff;
white-space:nowrap;
}
#menu > li > ul > li ul > li:hover > span{
color:#fff;
}
I created a fiddle with my own div menu with dropdown. You can add icons to it and change as you need it. You need to use jquery. I will add later another without jquery.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<div class="LEFT-MENU">
<ul>
<li>
MENU 1
<ul class="LEFT-SUBMENU">
<li>SUBMENU 1</li>
<li>SUBMENU 2</li>
<li>SUBMENU 3</li>
<li>SUBMENU 4</li>
</ul></li>
</ul></div>
https://jsfiddle.net/1tueu0tq/
Click there and watch the demo. If you like it just copy and paste to your site
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>