Having a menu with li and ul tags
<div class="menu">
<ul class="hide-for-small">
<li>one
</li>
<li>two
<ul>
<li>1
</li>
<li>2
</li>
<li>3
</li>
<li>4
</li>
</ul>
</li>
<li>three
</li>
<li>four
</li>
</ul>
</div>
I want to divide this menu in four equal parts, to do that I added
.menu {
height:555px;
margin-top:40px;
width:980px;
position:absolute;
z-index:9999;
top:0
}
.menu ul {
display:inline;
list-style:none;
width:100%;
position:relative;
margin-top:40px
}
.menu li {
float:left
}
.menu li a {
font-family:Bariol, Arial;
font-size:20px;
text-transform:uppercase;
color:#000
}
.menu li a:hover {
opacity:.8
}
.menu li:nth-last-of-type(-n+3) {
float:right;
margin-left:38px
}
.menu li:nth-child(-n+3) {
margin-right:38px
}
.menu ul li:hover ul {
visibility:visible;
opacity:1;
transition-delay:0
}
.menu ul li ul {
visibility:hidden;
opacity:0;
transition:visibility 0 linear .5s, opacity .5s linear;
list-style:none;
float:left;
clear:both;
position:absolute;
margin:0;
width:auto;
z-index:999999
}
.menu ul li:hover ul {
visibility:visible;
opacity:1;
transition-delay:0
}
.menu ul li ul li {
float:left;
float:none !important;
position:relative;
display:block;
height:25px;
margin:0 !important
}
.menu ul li ul li a {
font-size:15px;
display:block;
margin:10px 0;
background-color: #fff
}
and chaged width from 100% to 25%
.menu ul {
display:inline;
list-style:none;
width:100%;
position:relative;
margin-top:40px
}
But I am getting undesired result.
How to change the css to split in 4 the menu?
Please take a look at jsfiddle
Table layout with table-layout: fixed; can split the 4 li equally.
display:table; table-layout: fixed; - for ul
display:table-cell; for li, and remove float for li.
JsFiddle
Remove float:right; from following class.
.menu li:nth-last-of-type(-n+3) {
margin-left:38px
}
jsFiddle
Related
How i make the child lists expand and collapse by click ?
.tree-list li > ul{
display: none;
}
See the Pen Pure CSS Fullscreen Overlay Menu .
You can use it by jquery/javascript or you can simply use css for hover.
for jquery just write onclick ul display:block along with this css.
<nav id="dropdown">
<ul>
<li>Menu
<ul>
<li> 1</li>
<li> 2</li>
<li> 3</li>
</ul>
</nav>
In CSS
#dropdown
{
margin-top:15px
}
#dropdown ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}
#dropdown 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
}
#dropdown ul li
{
position:relative;
float:left;
margin:0;
padding:0
}
#dropdown ul li:hover
{
background:#f6f6f6
}
#dropdown ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}
#dropdown ul ul li
{
float:none;
width:200px
}
#dropdown ul ul a
{
line-height:120%;
padding:10px 15px
}
#dropdown ul ul ul
{
top:0;
left:100%
}
#dropdown ul li:hover > ul
{
display:block
}
I got a navbar with several levels that i changed acording to this site:https://codepen.io/philhoyt/pen/ujHzd
I've looked around on the internet but the solutions they provide (using display:inline-block) did not seem to work out.
Sources i've tryed:
How to center a navigation bar with CSS or HTML?
how to center css navigation bar
Any help would be appriciated.
#primary_nav_wrap
{
margin:auto;
}
#primary_nav_wrap ul
{
list-style:none;
text-align:center;
position:relative;
float:left;
margin:auto;
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:Futura;
}
#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
}
<nav id="primary_nav_wrap">
<ul>
<li>Nieuws</li>
<li>Info ▼
<ul>
<li>Taf & Toetje</li>
<li>Papierwerk</li>
<li>Uniform</li>
<li>Technieken</li>
</ul>
</li>
<li>Algemeen</li>
<li>Foto's</li>
<li>Inschrijven</li>
<li>Contact</li>
<li>Permekiaan ▼
<ul>
<li class="dir">Kapoenen ▼
<ul>
<li>Info</li>
<li>Activiteiten</li>
</ul>
</li>
<li class="dir">
Kawellen ▼
<ul>
<li>Info</li>
<li>Activiteiten</li>
</ul>
</li>
<li class="dir">
Jong-Givers ▼
<ul>
<li>Info</li>
<li>Activiteiten</li>
</ul>
</li>
<li class="dir">
Givers ▼
<ul>
<li>Info</li>
<li>Activiteiten</li>
</ul>
</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
I made some changes to these two classes:
#primary_nav_wrap
{
margin:auto;
text-align:center;
}
#primary_nav_wrap ul
{
list-style:none;
text-align:center;
display: inline-block;
position:relative;
margin:auto;
padding:0;
}
The solution was to use display:inline-block and text-align:center;. But also deleting the float: left. Working Fiddle
Try to add :
position: absolute;
left: 50%;
transform: translateX(-50%);
at #primary_nav_wrap
You can use this code to center the whole nav.
#primary_nav_wrap ul {
list-style: none;
position: absolute;
left: 50%;
transform: translateX(-50%);
right: 0;
margin: 0;
padding: 0;
}
I removed the float from the ul and li's and added display: inline-block to the li tags, so I ended up with this:
#primary_nav_wrap
{
margin-top:15px
}
#primary_nav_wrap ul
{
list-style:none;
position:relative;
text-align: center;
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;
display: inline-block;
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
}
Add class to <ul> make it <ul class="extra"> and add css to that class .extra{left:33.33%}
You just need to make few changes in your css classes.
#primary_nav_wrap ul li
{
position:relative;
/*float:left;*/
margin:0;
padding:0;
display:inline-block;
}
#primary_nav_wrap ul
{
list-style:none;
position:relative;
/*float:left;*/
margin:0;
padding:0;
text-align:center
}
Please check updated fiddle
HTML Center navbar with flexbox
#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:Futura;
}
#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
}
/* flexbox */
#primary_nav_wrap {
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
width: 100%;
height: auto;
background-color: lightgrey;
}
#primary_nav_wrap ul {
list-style:none;
background-color: cornflowerblue;
//padding: 1rem;
//margin: 1rem;
-webkit-align-self: center;
align-self: center;
}
/* || flexbox */
<nav id="primary_nav_wrap">
<ul>
<li>Nieuws</li>
<li>Info ▼
<ul>
<li>Taf & Toetje</li>
<li>Papierwerk</li>
<li>Uniform</li>
<li>Technieken</li>
</ul>
</li>
<li>Algemeen</li>
<li>Foto's</li>
<li>Inschrijven</li>
<li>Contact</li>
<li>Permekiaan ▼
<ul>
<li class="dir">Kapoenen ▼
<ul>
<li>Info</li>
<li>Activiteiten</li>
</ul>
</li>
<li class="dir">
Kawellen ▼
<ul>
<li>Info</li>
<li>Activiteiten</li>
</ul>
</li>
<li class="dir">
Jong-Givers ▼
<ul>
<li>Info</li>
<li>Activiteiten</li>
</ul>
</li>
<li class="dir">
Givers ▼
<ul>
<li>Info</li>
<li>Activiteiten</li>
</ul>
</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
What happens if you add left and right auto margins to primary_nav_wrap? i.e. add this to CSS:
#primary_nav_wrap
{
margin-top:15px;
margin-right: auto;
margin-left: auto;
}
Do you guys have any idea how to remove the right border on my drop down menu? I tried putting right-border: none, right-border: hidden, and right-border: 0px but nothing!
HTML :
<section class="menu">
<ul>
<li><a class="active" href="#"> PORTFOLIO </a>
<ul>
<li> illustrations </li>
<li> portraits </li>
<li> environments </li>
<li> life drawings </li>
</ul>
</li>
<li> STORE
<ul>
<li> society6 </li>
<li> redbubble </li>
</ul>
</li>
<li> CONTACT </li>
<li> ABOUT </li>
</ul>
</section>
CSS :
.menu {
height:29px;
width:100%;
/*background:orange;*/
}
.menu ul {
width:auto;
list-style-type:none;
font-family:"calibri", "arial";
}
.menu ul li {
position:relative;
display:inline;
float:left;
width:auto;
border-right: 2px solid purple;
margin-left:10px;
line-height:12px;
}
.menu ul li a {
display:block;
padding:3px;
color:#854288;
text-decoration:none;
font-size:20px;
font-weight:strong;
padding-right:25px;
}
.menu ul li a:hover, .active {
color:#788d35
}
.menu ul li ul {
display:none;
}
.menu ul li:hover > ul {
display:block;
position:absolute;
top:23px;
float:left;
padding-left:20px;
text-align:left;
margin-left: -30px;
}
.menu ul li ul li {
position:relative;
min-width:135px;
max-width:1350px;
width:100%;
}
.menu ul li ul li a {
padding: 3px;
margin-left: 1px;
border-right: hidden; /* <---- DOES NOT WORK */
}
This removes border from the main menu (after the last item About) :
.menu ul li:last-child{ border:none; }
JSFiddle
If you also want to remove border from the nested lis, you should add border:none to .menu ul li ul li :
JSFiddle
try this
#right_border_less{
border:solid;
border-right:none;
}
I need to align this navigation menu centered horizontally on the page. I would also like to reduce the size of the box the text appears in.
JSFiddle: http://jsfiddle.net/6W2qm/
HTML
<nav>
<ul class="navigation">
<li>Home</li>
<li>Biography</li>
<li>Media
<ul>
<li>Pictures</li>
<li>Videos</li>
</ul>
</li>
<li>Tour</li>
<li>Contact</li>
</ul>
</nav>
CSS
nav {
height:100px;
list-style:none;
text-align:center;
width:1024px;
}
nav ul ul {
display:none;
padding:0;
position:absolute;
top:10%;
}
nav ul li:hover > ul {
display:block;
}
nav ul {
list-style:none;
margin:0;
padding:0;
position:relative;
}
nav ul:after {
clear:both;
content:"";
display:block;
}
nav ul li {
float:left;
width:100px;
}
nav ul li a {
display:block;
padding:25px 40px;
text-decoration:none;
width:0;
}
nav ul ul li {
float:none;
position:relative;
}
nav ul ul li a {
padding:15px 40px;
}
I can't tell about the rest of your page when you only provided a small amount of the code, but this looks OK now.
JSFiddle: http://jsfiddle.net/D9z3s/
I changed the following line to 50% instead of 10% and it doesn't overlap anymore:
nav ul ul {
padding: 0;
position: absolute;
top: 50%;
}
I am pretty new on css and I want to learn use css effectively but I have now couple of problems/questions, I want to make grey border under my menu but when I zoom in and out border behave so strangely? Sorry my code is not very clean. And how can I retouch my code for better standing?
HTML
<html>
<head>
<link href="Style.css" rel="stylesheet" type="text/css">
<style type="text/css">
span{
color:#d00000;
text-decoration:underline;
}
#home{
background-color:#0000CC;
}
span{
font-style:italic;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<ul>
<li><span>Home</span></li>
<li>link2</li>
<li>link3
<ul>
<li>sub</li>
<li>sub2</li>
</ul>
</li><!---End of DropDown Videos menu--->
<li>link4</li>
<li>link5</li>
</ul><!---End of nav elements--->
<br class="clearFloat">
</div><!---End of header--->
</div><!---End of wrapper--->
<div id="grey">
</body>
</html>
CSS
#wrapper{
float:center;
}
#grey{
border-bottom:250px solid #a0a0a0;
padding:0px;
margin-left:203px;
margin-right:387px;
}
#header{
margin:auto;
padding:0px;
clear:both;
}
#header ul{
margin:0px;
padding:0px;
line-height:30px;
}
#header li{
margin:0px;
padding:0px;
list-style: none;
float:left;
position:relative;
background-color:#000099;
border:1 solid #0000CC;
top:px;
right:-15%;
}
#header ul li a{
text-align:center;
font-family:fantasy;
text-decoration:none;
display:block;
height:30px;
width:150px;
color:black;
}
#header ul ul li a{
color:#0000cc;
}
#header ul ul li{
right:0%;
}
#header ul ul{
margin:0px;
padding:0px;
position:absolute;
opacity: 0;
visibility: hidden;
transition: all .1s ease-in;
}
#header ul li:hover ul {
visibility:visible;
opacity:1 ;
}
#header ul li:hover {
background-color:blue;
}
#header ul li:hover a {
color:black;
}
#header ul ul li:hover a {
color:#d00000;
}
.clearfloat{
clear:both;
margin:0px;
padding:0px;
}
Without completely reworking your code, just think of added a bottom border per 'li'...
Remove your id='grey' and add your border-bottom to your #header li {}. Refresh but note how your 'sub' menus then each have a bottom border now. They inherited it, so you then need to turn those off...hence add border-bottom: none to the #header ul ul li declaration.
Now...if we did a quick rework of your code...
HTML
<div id="wrapper">
<div id="header">
<div id="navwrapper">
<ul id="nav">
<li><span>Home</span></li>
<li>link2</li>
<li>link3
<ul class="sub">
<li>sub</li>
<li>sub2</li>
</ul>
</li>
<li>link4</li>
<li>link5</li>
</ul>
</div>
</div>
CSS
html, body { margin:10px;padding:0; }
#wrapper, #header, #navwrapper { margin: 0 auto 0 auto; }
#nav {
padding:0;
margin: 0 auto 0 auto;
line-height:30px;
height:30px;
list-style:none }
#nav li {
border-bottom: solid #a0a0a0 10px;
margin:0;
padding:0;
float:left;
background-color:#000099;
}
#nav a {
text-align:center;
font-family:fantasy;
text-decoration:none;
display:block;
height:30px;
width:150px;
color:black;
}
#nav li:hover { background-color:blue; }
#nav li:hover .sub {
visibility:visible;
opacity: 1;
}
#nav .sub a { color:#00c; }
#nav .sub {
margin:0;
padding:0;
position:absolute;
opacity: 0;
visibility: hidden;
transition: all .1s ease-in;
list-style: none;
}
#nav .sub li { clear:both; border-bottom: none; }
Using more naming conventions with your sub menus is safer than just drilling down through the css. You also need to note that any top-level CSS declaration is inherited by all the children within. Such that if you declare #nav li as being black but want all the 'sub' list elements to be blue, that needs to be stated explicitly...AFTER the initial declaration in the CSS document.
Hope this helped...