Is it possible to modify the following code to maintain the hover on for this combination of menu+submenu, using only CSS? The submenu should remain visible if either the main or submenu is hovered. Right now only the main menu hover is working. Thanks!
HTML + CSS below:
<div id="dropnav">
<ul>
<li id="main">One</li>
<li id="main">Two
<ul>
<li>Two A</li>
<li>Two B</li>
<li>Two C</li>
<li>Two D</li>
</ul>
</li>
<li id="main">Three</li>
<li id="main">Four</li>
<li id="main">Five</li>
</ul>
</div>
#dropnav {
height:50px;
width: 100%;
text-decoration: none;
margin-left:auto;
margin-right:auto;
margin-top: 10px;
}
#dropnav ul{
margin:0px;
padding:0px;
text-align: center;
}
#dropnav ul li{
display:inline;
float:left;
list-style:none;
margin-left:auto;
position:relative;
height:25px;
width: 20%;
font-size: 20px;
font-family: 'Cabin', Helvetica, Arial;
}
#dropnav ul li ul{
margin:0px;
padding:0px;
display:none;
position:absolute;
left:0px;
z-index: 99;
top:50px;
}
#dropnav ul li:hover > ul{
display:block;
width:500px;
left: -50%;
}
#dropnav ul li ul li:hover > a{
color:#FFFFFF;
text-decoration:none;
display:block;
width:500px;
left: -50%;
}
Try changing your submenu style to:
#dropnav ul li ul {
margin:0px;
padding:0px;
display:none;
position:relative;
left:0px;
z-index: 99;
top:0px;
padding-top: 50px;
}
Demo Fiddle
Related
I have a Functional Vertical Menu. On hover state it has a vertical line that changes from same Background color to a specific color, but what I want is to create a line that follows to the selected menu área.
Attached my Actual Code and the GIF example of what I'm trying to Achieve, someone can help me?
HTML
<div id="nav">
<ul>
<li>Example 1</li>
<li>Example 2</li>
</ul>
</div>
CSS
#nav ul{
margin:0;
padding:0;
list-style-type:none;
position:absolute; left:200px; top:200px;
}
#nav ul li{display: inline;}
#nav ul li a{
display:block;
background:#fff;
width:200px;
text-decoration:none;
padding:4px 7px ;
border-bottom:1px solid #eeeeee;
border-top:1px solid #cccccc;
border-left:5px solid #333333;
color:#333333;
}
#nav ul li a:hover{
border-left-color:#0099FF;
color:#0066FF;
background:#c4c4c4;
}
You could use after pseudoelement in your ul hidden and the with a simnple transition and jquery you can make it move playing with the top property.
like this:
$('.upli').hover(function () {
$(this).parent('ul').toggleClass('up');
});
$('.downli').hover(function () {
$(this).parent('ul').toggleClass('down');
});
#nav ul{
margin:0;
padding:0;
list-style-type:none;
position:absolute; left:200px; top:200px;}
#nav ul li{display: inline;}
#nav ul li a{
display:block;
background:#fff;
width:200px;
text-decoration:none;
padding:4px 7px ;
border-bottom:1px solid #eeeeee;
border-top:1px solid #cccccc;
border-left:5px solid #333333;
color:#333333;
}
#nav ul:after {
content:'';
width:5px;
height:28px;
display:block;
position:absolute;
opacity:0;
top:14px;
left:0;
background-color:#0099FF;
transition: top 0.5s ease;
}
#nav .up:after {
top:0px;
opacity:1;
}
#nav .down:after {
top:28px;
opacity:1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="nav">
<ul class="">
<li class="upli">Example 1</li>
<li class="downli">Example 2</li>
</ul>
</div>
How about this really nice and clean solution (also extendable to an infinite amount of <li> items ;)
$('li').hover(function() {
$(".verticalLine").css("top", $(this).position().top);
}, function() {
$(".verticalLine").css("top", "0px");
});
body {
margin: 0;
}
.nav {
position: relative;
}
.verticalLine {
background: coral;
height: 60px;
width: 5px;
position: absolute;
top: 0;
transition: top ease .5s;
left: 0;
}
ul {
margin: 0;
}
ul li {
list-style: none;
height: 60px;
line-height: 60px;
vertical-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav">
<div class="verticalLine"></div>
<ul>
<li>Something</li>
<li>Something else</li>
<li>Something more</li>
<li>Aaaand more</li>
</ul>
</div>
EDIT:
This change the hover part to this piece of code if you want to use the click() element:
$(".nav2Li").click(function() {
$(".verticalLine").css("top", $(this).position().top);
})
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;
}
This is the code of the menu which i want to add in the middle
<div id="menu">
<ul>
<li>Home</li>
<li>Baby Boy
<ul>
<li>Bodysuits</li>
<li>One Piece</li>
<li>Shoes</li>
</ul>
</li>
<li>Baby Girl
<ul>
<li>Bodysuits</li>
<li>One Piece</li>
<li>Shoes</li>
</ul>
</li>
<li>Accessories</li>
<li>Contact Us</li>
</ul>
</div>
And this is the CSS code
#menu ul{
list-style:none;
margin:0px;
padding:0px;}
#menu ul li{
background-color:#404a7f;
border:1px solid white;
border-radius:10px;
margin-right:15px;
font-family:Century Gothic;
font-size:20px;
font-weight:bold;
width:120px;
height:35px;
line-height:35px;
text-align:center;
float:left;
position:relative;}
#menu ul li a{
text-decoration:none;
color:white;
display:block;}
#menu ul li a:hover{
background-color:#191d33;
border-radius:10px;}
#menu ul ul{
position:absolute;
display:none;}
#menu ul li:hover ul{
display:block;}
So I want to make this menu appear in the middle of the page horizontally but I don't know how to do this and in a simple way. Can anybody help me please?
Add this to your CSS file:
#menu {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 100px;
height: 100px;
}
Change #menu ul ul position from absolute to relative.
#menu ul ul{
position:relative;
display:none;}
See the fiddle:
https://jsfiddle.net/2j5k37mw/
or if you want to center it all in one line, add this to your CSS file:
#menu {
bottom: 0;
display: table;
height: 100%;
left: 0;
margin: 0 auto;
position: absolute;
right: 0;
top: 0;
width: 50%;
}
I am trying to make a vertical menu, but everytime when i show the sub menu on hover, it expands the previous element, making a 'bigger box'. I have no idea how to style that.
Dont want to use some jquery plugin if there is an css solution. I have also bootstrap3, but there is no support for nested dropdowns, dropdowns inside dropdowns ... the nested ones did not open...
JSFiddle link: http://jsfiddle.net/WqW5j/
index.html
<div class="nav">
<ul class="main">
<li>1</li>
<li>2</li>
<li>
3
<ul class="sub">
<li>3-1</li>
<li>3-2
<ul class="sub">
<li>3-2-1</li>
<li>3-2-2
<ul class="sub">
<li>3-2-2-1</li>
<li>3-2-2-2</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
css
.main{
list-style: none;
padding:0px;
margin: 0px;
}
.main li{
background-color:#f1f1f1;
padding: 10px;
margin: 5px;
float:left;
clear:both;
}
.main li:hover{
background-color:#d8d8d8;
}
.main .sub{
display: none;
}
.sub > li > .sub{
display: none;
}
.main > li:hover > .sub:nth-of-type(1){
display: block;
position: relative;
left: 20px;
top:-30px;
list-style: none;
float:left;
width: 100px;
clear: both;
}
.sub > li:hover > .sub{
display: block;
position: relative;
left: 20px;
top:-30px;
list-style: none;
float:left;
width: 100px;
}
To get the nested menu work make all the li items position:relative and make the ul displayed on hover as position:absolute.
Check this fiddle
HTML:
<div class="nav">
<ul class="main">
<li>1
<ul class="sub">
<li>1-1
<ul class="sub">
<li>1-1-1</li>
<li>1-2-1</li>
</ul>
</li>
<li>1-2
<ul class="sub">
<li>1-2-1</li>
<li>1-2-2</li>
</ul>
</li>
</ul>
</li>
<li>2</li>
</ul>
</div>
CSS
.main{
list-style: none;
padding:0px;
margin: 0px;
}
.main li{
background-color:#f1f1f1;
padding: 10px;
margin: 5px;
float:left;
clear:both;
position:relative;
}
.main li:hover{
background-color:#d8d8d8;
}
.main .sub{
display: none;
list-style:none;
padding-left:0;
width:auto;
}
.main .sub li{
float:none;
}
.main > li:hover > .sub{
display:block;
position:absolute;
top:0;
left:100%;
}
.sub li:hover .sub{
display:block;
position:absolute;
top:0;
left:100%;
}
basically i'm trying to create a navigation bar and I'm trying to position two (and more) li elements next to each other, I've tried to figure it out but can't seem to do it???
css is below.... html is below css
don't even know whether i've laid it out correctly, if you know a tutorial or something to do the same thing let me know I've spent days figuring out how to set it up correctly......
CSS
li {
list-style-type:none;
list-style:none;
background:clear;
padding:0;
margin:0;
}
ul {
list-style-type:none;
list-style:none;
margin:0;
padding:0;
background-color:clear;
}
li.nav a {
text-align:center;
font-family:"Helvetica";
font-weight:lighter;
text-decoration:none;
display:inline;
background-color:green;
padding:10px;
margin:0;
color:#FF0;
float:none;
}
li.nav a:hover {
text-align:center;
font-family:"Helvetica";
font-weight:lighter;
text-decoration:none;
display:inline;
background-color:blue;
padding:10px;
margin:0;
color:#0FF;
}
li.sub a {
position:relative;
top:2px;
background:pink;
display:block;
margin:0;
padding:10px;
color:red;
width:100px;
}
li.sub a:hover {
position:relative;
top:2px;
background:pink;
display:block;
margin:0;
padding:10px;
color:red;
width:100px;
}
HTML
<li class="nav">Community
<ul>
<li class="sub">Third Age</li>
<li class="sub">Tide Timetables</li>
<li class="sub">Schools</li>
<li class="sub">Religion</li>
<li class="sub">Clubs+Societies</li>
<li class="sub">Courses</li>
<li class="sub">The Council</li>
<li class="sub">Culture</li>
</ul>
</li>
<!--END OF COMMUNITY SECTION-->
<!--START OF EVENTS NAVIGATION BUTTON AND SUBMENU-->
<li class="nav">Events
<ul>
<li class="sub">Festivals</li>
<li class="sub">Family</li>
<li class="sub">Music</li>
<li class="sub">Comedy</li>
<li class="sub">Theatre</li>
<li class="sub">Exhibitions</li>
<li class="sub">Film</li>
<li class="sub">Literature</li>
</ul>
</li>
<!--END OF EVENTS SECTION-->
Try to add this lines in your css.
li.nav{display:inline-block;position:absolute;}
li.nav:nth-child(2)
{margin-left:140px;}
OR
HTML
<div class="main-navigation">
<nav class="navigation">
<ul>
<li>1
<ul class="sub-menu"><li>1a</li><li>1b</li></ul>
</li>
<li>2
<ul class="sub-menu"><li>2a</li><li>2b</li></ul>
</li>
<li>3</li>
<li>4</li>
</ul>
</nav>
</div>
CSS
nav.navigation{
width: 75%;
height:50px;
}
nav ul ul.sub-menu{
display: none;
margin-left:-40px;
margin-top:-10px;
}
nav ul li:hover > ul.sub-menu{
display: block;
}
nav ul{
height:50px;
list-style:none;
padding: 3px 0 0 0;
position: relative;
text-transform: uppercase;
}
nav ul:after{
content:"";
clear:both;
display:block;
}
nav ul li{
float: left;
padding:10px 30px;
background:yellow;
margin-left:5px;
}
nav ul ul.sub-menu{
background-color: #fcfcfc;
padding: 0;
position: absolute;
z-index:100;
top: 100%;
}
nav ul ul.sub-menu li{
float: none;
margin-top: -3px;
height:30px;
background-color:green;
}
The DEMO is here
add float:left; to the li-items.
li
{
float:left;
}
DEMO
you can use display:inline-block level property to all li element.