I have this menu as a ground to my web page. But I wonder how I could get that menu with a dropdown.I want the other tabs under each menu category to drop down under the slided underline.
.container {
width: 50%;
margin: 0 auto;
}
ul li {
display: inline;
text-align: center;
}
a {
display: inline-block;
width: 25%;
padding: .75rem 0;
margin: 0;
text-decoration: none;
color: #000;
}
.two:hover ~ hr {
margin-left: 25%;
}
.three:hover ~ hr {
margin-left: 50%;
}
.four:hover ~ hr {
margin-left: 75%;
}
hr {
height: .25rem;
width: 25%;
margin: 0;
background: #343434;
border: none;
transition: .3s ease;
}
You need to put subitems in your menu. Basically an ul inside your li. This ul is non display by default and when we hover on the parent li it will display the ul with a selector like this : ul li:hover ul{}
ul li:hover ul{
display:block;
}
See on jsfiddle
Of course you gonna have to stylize that example but that not the point.
Related
So first I would like to say I am extremely new to coding so please keep that in mind!
I was trying to create a dropdown nav bar and I'm having all sorts of issues. First, between the dropdown menu items there is white spaces which I don't understand at all. Second, the actual dropdown portion is not showing up at all when mousing over. I've been trying to fix this for an incredibly long time and I cannot figure out what the problem is.
The website with the issue is: (Dropdown is all the way at the bottom of the page)
https://ist2w.purdueglobal.edu/2204A/IT214-01/MeganAllen5/navigation.html
Here is the html code:
HTML CODE
And the css:
#drop_nav {
margin: 0px;
padding: 0px;
overflow: hidden;
}
#drop_nav ul {
list-style-type: none;
width: 100%;
display: flex;
margins: 0px;
padding: 0px;
}
#drop_nav li {
position: relative;
width: 100%
align-items: center;
}
#drop_nav a {
color: #ffffff;
background-color: #000000;
height: 64px;
font-family: Arial, Helvetica, sans-serif;
text-weight: 500;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
transition: width .4s, height .4s;
}
#drop_nav a:hover {
width: 80px;
height: 75px;
background-color: #dc143c;
}
#drop_nav li:hover .submenu > li {
display: block;
top: 0px;
}
.submenu {
}
.submenu li:hover {
display: block;
top: 0px;
}
#drop_nav li:hover .submenu > li {
display: block;
top: 0px;
}
.submenu li {
display: none;
position: absolute;
top: 0px;
}
.submenu {
display: flex;
flex-direction: vertical;
position: relative;
width: 100%;
}
.submenu li {
position: absolute;
}
.submenu li:hover {
display: flex;
}
.arrow {
margin-left: 8px;
color: #a9a9a9
font-size: 12px;
}
PLEASE HELP!!!!!
Thank you so much.
Here's an example: CodePen.
In this example I only illustrate how the hovering and opening of the menus works. I didn't use any other styling. Note that the <li>.....</li> encapsulates the menus completely.
This is all the styling that is needed to open and close the menus:
#drop_nav ul li ul {
display: none;
}
#drop_nav ul li:hover ul {
display: initial;
}
I have the code there
My question is, why aren't the buttons for different pages centered? This is more obvious when the site is minimized.
nav.stroke ul li a,
nav.fill ul li a {
position: relative;
}
nav.stroke ul li a:after,
nav.fill ul li a:after {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 0%;
content: '.';
color: transparent;
background: #aaa;
height: 1px;
}
nav.stroke ul li a:hover:after {
width: 100%;
}
nav.fill ul li a {
transition: all 2s;
}
nav.fill ul li a:after {
text-align: left;
content: '.';
margin: 0;
opacity: 0;
}
nav.fill ul li a:hover {
color: #fff;
z-index: 1;
}
nav.fill ul li a:hover:after {
z-index: -10;
animation: fill 1s forwards;
-webkit-animation: fill 1s forwards;
-moz-animation: fill 1s forwards;
opacity: 1;
}
h1,h3 {
text-align: center;
color: white;
}
li{
list-style-position: inside;
display: inline;
padding-left: 12px;
}
a{
padding: .2em .1em;
color:grey;
background-color: ;
}
}
.xy{
margin-top: 75px;
}
h1{
font-size: 45px;
}
h3{
font-size: 23px;
}
body{
background-color: #451255;
}
nav {
width: 70%;
margin: 0 auto;
background: #fff;
padding: 15px;
box-shadow: 0px 5px 0px #dedede;
position: center;
}
nav ul {
list-style: none;
text-align: center;
}
nav ul li {
display: inline-block;
}
nav ul li a {
display: block;
padding: 15px;
text-decoration: none;
color: #aaa;
font-weight: 800;
text-transform: uppercase;
margin: 0 10px;
}
nav ul li a,
nav ul li a:after,
nav ul li a:before {
transition: all .5s;
}
nav ul li a:hover {
color: #555;
}
#-webkit-keyframes fill {
0% {
width: 0%;
height: 1px;
}
50% {
width: 100%;
height: 1px;
}
100% {
width: 100%;
height: 100%;
background: #451255;
}
}
.btns,
.fill{
margin: auto;
position: center;
display: block;
}
So, I have that code, you can see on the link what it looks like. My problem is that it's not centered. And when I minimize it, the fact that it's not centered is more obvious. How could I fix that?
like #junkfoodjunkie already said, it's about basic CSS reset.
why? elements got initial CSS set, this is what's going on:
like you can see, your menu's items (blue part) are already centered but you've got initial -webkit-padding-start: 40px; (green part) and it's do the same as padding-left: 40px;, it takes not less than 40px from your menu so that's why it looks like the menu's items are not centered/stick to the right, so in order to fix it you need to overwrite the value of the <ul> element.
you're also set the <li> elements to padding-left: 12px; so the menu's items will not be centered perfectly. if you're not going to use some CSS reset then add .fill > ul {padding-left: 0;} to your CSS.
You're not resetting or eliminating default behavior. You have no margin or padding defined on the <ul>, and you have not reset the CSS to begin with, so there is a default padding and margin messing with you. Put margin: 0; padding: 0; on your <ul> and it should work.
Or, just do a full brutal reset: https://jsfiddle.net/efv8x1x2/1/
Added
* {
margin: 0;
padding: 0;
}
to the beginning of the stylesheet, and voila, centered.
This is a two part question. The first part is my problem when hovering over an li element that is supposed to reveal a nested ul element. It brings the rest of the li tags at the bottom of the nested ul element. I don't know what I'm doing wrong but it pushes the initial li elements downward. I wish someone can explain what I'm doing wrong. Here is the code
The second question I have is how do I create li elements that specificly have a hovering effect on them and not any nested li elements? I wanted to create a menu list that changes the color of the text when you hover over it, but I didn't want the nested li elements to also have the hover effect
HTML
<div id="container">
<ul class="list-inline">
<li>Fire
<ul>
<li>charmander</li>
<li>magmar</li>
<li>vulpix</li>
</ul>
</li>
<li>Grass
<ul>
<li>bulbasaur</li>
<li>bellsprout</li>
<li>oddish</li>
</ul>
</li>
<li>Electric
<ul>
<li>pichu</li>
<li>magneton</li>
<li>voltorb</li>
</ul>
</li>
<li>Water
<ul>
<li>squirtle</li>
<li>poliwag</li>
<li>krabby</li>
</ul>
</li>
</ul>
</div>
SCSS
$green: #33cc33;
$blue : #0099ff;
$yellow: #ffcc00;
$red: #ff3333;
#mixin secondUl($color) {
li {
color: white;
background: $color;
min-width: 100px;
border-bottom: 1px solid white;
}
a {
color: white;
font-weight: normal;
text-align: center;
display: block;
width:100% ;
padding: 5px 0;
}
} //secondUl
#container {
width: 600px;
margin: auto;
margin-top: 30px;
border-top: 1px solid black;
color: black;
font-family: arial,
sans-serif;
ul {
margin: 15px 0;
position: relative;
} //ul
} //container
.list-inline {
ul {
position: absolute;
padding: 0;
top: 0;
left: -25% ;
z-index: 2;
display: none;
li {
display: inherit;
min-width: 100px;
margin: 0;
} //li
} //ul
li:nth-of-type(1) ul {
#include secondUl($red);
}
li:nth-of-type(2) ul {
#include secondUl($green);
}
li:nth-of-type(3) ul {
#include secondUl($yellow);
}
li:nth-of-type(4) ul {
#include secondUl($blue);
}
li {
list-style: none;
display: inline-block;
margin: 0 10px;
&:hover ul {
display: block;
}
} //li
li:nth-child(1) a:hover {
color: $red;
}
li:nth-child(2) a:hover {
color: $green;
}
li:nth-child(3) a:hover {
color: $yellow;
}
li:nth-of-type(4) a:hover {
color: $blue;
}
&:first-child a {
text-decoration: none;
color: black;
text-transform: capitalization;
font-weight: 600;
-webkit-transition: color 1s;
transition: color 1s;
-moz-transition: color 1s;
}
}//list-inline
First you have used global css for ul under #container #container ul {position:relative;} this css will be apply on every child ul which is in #container, and its overriding .list-inline ul{position:absolute}, you need to set immediate child selector css #container > ul {position:relative;}.
For second ans. you need to do same thing, use immediate child selector css
http://codepen.io/anon/pen/LRZVRO
For problem 1 add vertical-align:top to your li
li {
list-style: none;
display: inline-block;
margin: 0 10px;
vertical-align: top;
&:hover ul {
display: block;
}
}
For Problem 2 use child instead of decendant selector. E.G:
> li:nth-child(1)>a:hover {
color: $red;
}
See: http://codepen.io/anon/pen/rrpVaV
It works well. you have to add width of li
.list-inline li {
min-width: 110px;
}
And
.list-inline li:hover ul {
display: table;
}
DEMO
https://codepen.io/Dhaarani/pen/vXpONj
I'm trying to create a site navigation bar that uses sub-menus.
Using whatever I can gather from the internet I've done my best and have got one working with one small issue.
When you hover the mouse over the sub-menu, the main menu text colour does not stay white like I'd like it to.
Can anyone get this to work?
.header nav.site_nav {
float: right;
}
.header ul {
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
.header ul a {
display: block;
font-weight: bold;
color: #2C395D;
font-size: 14px;
text-decoration: none;
padding: 8px 8px 8px 8px;
}
.header ul a:hover {
color: white;
}
.header ul li {
float: left;
position: relative;
margin: 0 2px 0 2px;
}
.header ul li:hover {
background: #2C395D;
}
.header ul ul {
display: none;
position: absolute;
text-align: right;
top: 100%;
right: 0;
}
.header ul ul li {
float: none;
width: 150px;
background: #BFC8E1;
margin: 0;
}
.header ul li:hover > ul {
display: block;
}
jsfiddle code
I wasn't able to do this easily without adding more information to your html. I added a class to all top level menu items, then added a small amount of css to make them white on hover.
Updated Fiddle
Add this class to your top level menu items in html:
<a class="topLevel" href="#">Courses ▾</a>
Add this to your CSS:
.header ul li:hover a.topLevel {
color: white;
}
i try to make my blog responsive but my navigator menu is behind the title, i want to make it in front of my title. you can look the print screen here
print-screen
and here's the nav code on media query;
.nav {
max-width:599px;
position: relative;
float:center;
padding-bottom:120px;
top:159px;
left:-60px;
min-height: 40px;
padding-top:0;
}
.nav ul {
/*width: 599px;*/
padding: 5px 0;
position: absolute;
/*top: -13px;
left: -95px;*/
border: solid 1px #2FB8C8;
background: #2FB8C8 url(../images/icon-menu.png) no-repeat 10px 11px;
}
.nav li {
display: none; /* hide all <li> items */
margin: 0;
opacity:0.8;
}
.nav .current {
display: block; /* show only current <li> item */
}
.nav a {
display: block;
padding: 5px 5px 5px 32px;
text-align: left;
width:599px;
}
.nav .current a {
background: none;
color: #666;
}
/* on nav hover */
.nav ul:hover {
opacity:1;
}
.nav ul:hover li {
display: block;
margin: 0 0 5px;
}
.nav ul:hover .current {
background: url(../images/icon-check.png) no-repeat 10px 7px;
}
thanks in advance for your help
You could set the z-index explicitly to bring those elements forward.
.nav {
z-index:2
max-width:599px;
position: relative;
float:center;
padding-bottom:120px;
top:159px;
left:-60px;
min-height: 40px;
padding-top:0;
}
.Title{
/*or what ever you gave it*/
z-index:1;
}
Check the following links for your guide. You also need to use jQuery.
http://tympanus.net/codrops/2013/04/19/responsive-multi-level-menu/
http://webdesignerwall.com/demo/responsive-menu/
http://www.hongkiat.com/blog/responsive-web-nav/