I am working on a school project and am building a nice looking multi level dropdown menu for my page. I have not been able to get the display of the sub-menu to change on hover when targeting the parent li element. I think it might be an inheritance issue but am unsure.
I am still pretty new to this so I could have royally botched the classes/ids and levels of inheritance I am using in the css.
So far I have also tried different combinations of inheritance and using the classes and ids in different elements, I have tried using >, I have tried different display modes, I have tried using visibility instead of display, I have tried different position.
If there is a better way to set this up to make this work? Am I missing something obvious, as usual?
Here is a snippit
/*====================================MAIN=================================*/
body {
background-color: #d5d3d5;
font-family: 'Gill Sans', 'Gill Sans MT', 'Calibri', 'Trebuchet MS', sans-serif;
margin: 0px;
padding: 0px;
}
.flex_body {
background:linear-gradient(90deg, rgba(255,255,255,.0), rgba(255,255,255,1) 20%);
display: flex;
margin: 0px;
padding: 0px;
height: 800px;
}
.page_body {
background:linear-gradient(90deg, rgba(255,255,255,.0), rgba(255,255,255,1) 15%);
margin: 0px 0px 0px 30px;
padding: 0px 0px 0px 20px;
height: 800px;
overflow: hidden;
}
/*=============================MAIN=NAVIGATION=================================*/
#header {
background-color: #ffffff;
box-shadow: inset 0px -15px 18px -6px rgba(121, 104, 124, 0.678);
text-align: right;
}
#navBar {
list-style-type: none;
display: inline-flex;
padding: 80px 0px 0px 0px
}
#navBar li {
font-size: 18px;
padding: 10px 0px 0px 0px;
margin: 0px 0px -10px 0px;
}
#navBar li:not(:last-child){
border-right: 1px solid #8f85a1dc;
}
#headNAV ul li a {
position: relative;
padding: 10px 40px 20px 40px;
text-decoration: none;
color: #353138;
}
#navBar li a:hover{
background-color: #50328ddc;
color: white;
text-decoration: underline;
}
#headNAV ul li input{
margin: 5px 35px 10px 35px;
}
/*======================news-dropdown============================*/
#news-dropdown {
display: none;
position: absolute;
padding: 5px;
margin: 21px 0px 0px 0px;
width: 140px;
background-color: #ffffff;
}
#navBar #news-dropdown li {
padding: 10px 0px 10px 0px;
margin: 0px 5px 0px -35px;
border: none;
text-align: left;
list-style: none;
}
#navBar #news-dropdown li:not(:last-child){
border-bottom: 1px solid #aea7bb8c;
}
#navBar #news-dropdown ul li a{
padding: 0px;
margin: 0px 25px;
}
#navBar li:hover #news-dropdown {
display: block;
}
#news-dropdown li:hover a{
background-color: #ffffff;
color: #50328d;
text-decoration: underline;
}
/*======================myPage-Nav============================*/
#myPage_button:hover > #myPage{
color: white;
}
#myPage_button {
text-decoration: underline;
}
#myPage {
color: #50328ddc;
font-size: 22px;
font-weight: bold;
text-decoration: underline;
}
#dropdown-btn {
padding: 0px 0px 0px 15px;
}
#myPage-menu {
display: none;
position: absolute;
padding: 0px;
margin: 17px 0px 0px 0px;
width: 182px;
background-color: #ffffff;
}
#navBar li:hover #myPage-menu {
display: block;
}
#navBar #myPage-menu li {
padding: 10px;
margin: 0px 5px 0px -30px;
border: none;
text-align: left;
list-style: none;
}
.fa-angle-right {
float: right;
}
#navBar #myPage-menu li:not(:last-child){
border-bottom: 1px solid #aea7bb8c;
}
#navBar #myPage-menu ul li a{
padding: 10px 40px 10px 20px;
margin: 0px -15px;
}
#myPage-menu li:hover a{
background-color: #ffffff;
color: #50328d;
text-decoration: underline;
font-weight: bold;
}
.sub-dropdown {
display: none;
position: absolute;
margin-top: -42px;
margin-left: 140px;
background-color: #ffffff;
}
#navBar #myPage-menu ul li:hover .sub-dropdown{
display: block;
}
<body>
<header id="header">
<nav id="headNAV">
<ul id="navBar">
<li><a href= "#" >Mission</a></li>
<li></span>
<div id="news-dropdown">
<ul>
<li>Politcs</li>
<li>Science</li>
<li>Community</li>
</ul>
</div>
</li>
<li><a href= "#" >Events</a></li>
<li><a href= "#" >Forums</a></li>
<li><a id= 'myPage_button' href= "#" >My<span id='myPage'>Page</span><span id = "dropdown-btn" class="fas fa-caret-down"></span></a>
<div id="myPage-menu">
<ul>
<li>Main Feed</li>
<li class="hover-menu">Projects<i class="fa fa-angle-right"></i></li>
<div class="sub-dropdown">
<ul>
<li>Politcal</li>
<li>Research</li>
<li>Creative</li>
<li>Collaborations</li>
</ul>
</div>
<li>Messages<i class="fa fa-angle-right"></i></li>
<div class="sub-dropdown">
<ul>
<li>Collaborations</li>
<li>Community</li>
<li>Private</li>
</ul>
</div>
<li>Profile</li>
</ul>
</div>
</li>
<li><input type="text" name="search" placeholder="Search..."></li>
<li><a id="header_login" href= "#" >Login/SignUp</a></li>
</ul>
</nav>
</header>
</body>
Might be a little much at this point but take a look at this menu it helps with the problem you are having the hover effect on takes over on desktop but you can still use the click functionality. Hope this helps and good luck
https://jsfiddle.net/fLvk091e/1/
<nav>
<ul>
<li>mission</li>
<li class="dropdown-container">
<button class="dropdown-btn">news +</button>
<ul class="dropdown">
<li>latest news</li>
<li>politcs</li>
<li>science</li>
<li>community</li>
</ul>
</li>
<li>events</li>
<li>forums</li>
<li class="dropdown-container">
<button class="dropdown-btn">myPage +</button>
<ul class="dropdown">
<li>see myPage</li>
<li>politcal</li>
<li>research</li>
<li>creative</li>
<li>collaborations</li>
</ul>
</li>
<li><input type="text" name="search" placeholder="Search..." /></li>
<li>login</li>
</ul>
</nav>
Related
I am facing a problem whereby my drop down menu will not stay open when I hover my cursor over it. It sometimes stay open for a while and disappears. I have been trying to find solutions but I can't really tell what is the problem. Can anyone help me? I am new to CSS and HTML...
.arrow {
background-image: url(arrow.png);
background-repeat: no-repeat;
background-position: 100px;
}
.menu-area ul {
text-transform: uppercase;
list-style: none;
width: 145px;
margin-left: 10px;
padding: 0px;
position: absolute;
display: block;
box-shadow: 10px 10px 5px rgba(96, 96, 96, 0.8);
}
.menu-area ul ul {
margin-left: 1px;
position: absolute;
display: none;
left: 100%;
top: 0px;
}
.menu-area ul li {
border-bottom: 1px solid white;
background: MediumVioletRed;
position: relative;
display: block;
margin-bottom: 0px;
}
.menu-area ul li a {
font-family: verdana;
font-size: 12px;
font-weight: bold;
text-align: left;
color: white;
text-decoration: none;
padding: 10px 20px;
display: block;
}
.menu-area ul li:hover {
background-color: hotpink;
}
.menu-area ul li:hover>ul {
display: block;
}
<div class="menu-area">
<ul>
<li>Home</li>
<li><a class="arrow" href="#">Soalan</a>
<ul>
<li>Add</li>
<li>Update</li>
<li>Delete</li>
<li>List</li>
<li><a class="arrow" href="#">Topic</a>
<ul>
<li>Add</li>
<li>Update</li>
<li>Delete</li>
<li>List</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Youre adding margin-left: 1px; on .menu-area ul ul which makes a 1px gap between the main ul and your submenu ul. If you hit that gap (which is pretty hard as its only 1px but still possible) the submenu closes.
Remove the margin so the ul's "touch" each other without gap for a safe transition between menu and submenu (You can add the same spacing as padding so you keep the 1px gap). Apart from this 1px gap everything runs smoothly.
In general i would recommend adding https://github.com/kamens/jQuery-menu-aim tho so the menu doesnt close when trying to reach for the last submenu item (where you most likely move out of the main-ul which makes the menu close instantly).
The hover style is not applied because of that 1px gap to the child elements. You could remove that margin and set a transparent border on the child ul
.arrow {
background-image: url(arrow.png);
background-repeat: no-repeat;
background-position: 100px;
}
.menu-area ul {
text-transform: uppercase;
list-style: none;
width: 145px;
margin-left: 10px;
padding: 0px;
position: absolute;
display: block;
box-shadow: 10px 10px 5px rgba(96, 96, 96, 0.8);
}
.menu-area ul ul {
margin-left: 0;
border-left: 1px solid transparent;
position: absolute;
display: none;
left: 100%;
top: 0px;
}
.menu-area ul li {
border-bottom: 1px solid white;
background: MediumVioletRed;
position: relative;
display: block;
margin-bottom: 0px;
}
.menu-area ul li a {
font-family: verdana;
font-size: 12px;
font-weight: bold;
text-align: left;
color: white;
text-decoration: none;
padding: 10px 20px;
display: block;
}
.menu-area ul li:hover {
background-color: hotpink;
}
.menu-area ul li:hover>ul,
.menu-area ul li>ul:hover {
display: block;
}
<div class="menu-area">
<ul>
<li>Home</li>
<li><a class="arrow" href="#">Soalan</a>
<ul>
<li>Add</li>
<li>Update</li>
<li>Delete</li>
<li>List</li>
<li><a class="arrow" href="#">Topic</a>
<ul>
<li>Add</li>
<li>Update</li>
<li>Delete</li>
<li>List</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
I have a website with a nav bar defined using a few divs and an unordered list.
<!--Nav Bar-->
<div class="nav-blur"></div>
<div class="nav">
<img class="logo" src="img/rectangle.png">
<ul class="links">
<li class="link text">Home</li>
<li class="link divider"> | </li>
<li class="link text">About Us</li>
<li class="link divider"> | </li>
<li class="link text">Contact Us</li>
<li class="link divider"> | </li>
<li class="link button">Get Started</li>
</ul>
</div>
Currently, the last link in the nav bar is a button, different from the others which are plain text.
Nav Bar Example Image
Here is my CSS to style such:
.nav-blur {
width: 100%;
height: 45px;
position: fixed;
top: 0px;
-webkit-filter: blur(10px);
filter: blur(10px);
background-color: rgba(0, 0, 0, 0.6);
}
.nav {
width: 100%;
height: 45px;
background-color: rgba(0, 0, 0, 0.7);
position: fixed;
top: 0px;
}
.nav .logo {
padding-left: 20px;
padding-top: 1px;
height: 95%;
width: auto;
}
.nav .links {
list-style-type: none;
margin: 0;
padding: 11px;
padding-right: 30px;
float: right;
}
.nav .divider {
color: whitesmoke;
}
.nav .links .link {
display: inline;
}
.nav .links .link a {
color: whitesmoke;
text-decoration: none;
font-style: normal;
}
.nav .links .link a:hover {
color: grey;
text-decoration: none;
font-style: normal;
}
.nav .links .button {
background-color: rgba(103, 155, 193, 1);
border-radius: 5px;
box-shadow: 2px 2px 1px rgba(0, 0, 0, 1);
}
.nav .links .button:hover {
background-color: rgba(103, 155, 193, 0.5);
border-radius: 5px;
box-shadow: 2px 2px 1px rgba(0, 0, 0, 1);
}
.nav .links .button a {
padding-right: 7px;
padding-left: 7px;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
}
My current problem is that although I can adjust the padding both right and left of the text inside the button I cannot adjust the padding vertically. I have tried to add the spacing I need with both padding and margins neither of which have any effect.
.nav .links .button a {
padding-right: 7px;
padding-left: 7px;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
}
.nav .links .button a {
padding-right: 7px;
padding-left: 7px;
margine-top: 5px;
margine-bottom: 5px;
text-align: center;
}
I have also tried incasing the text inside a spereate div which managed ro royally mess up my nav bar.
What CSS would I need to add inorder to give some verticle padding to my text inside the button?
Vertical padding is ignored by inline elements...which is the default display type of anchor links.
Set the links (and the li) to display:inline-block.
.nav .links .link a {
color: whitesmoke;
text-decoration: none;
font-style: normal;
display:inline-block;
}
.nav .links {
list-style-type: none;
margin: 0;
padding: 11px;
padding-right: 30px;
float: right;
background: #000;
}
.nav .divider {
color: whitesmoke;
}
.nav .links .link {
display: inline-block;
}
.nav .links .link a {
color: whitesmoke;
text-decoration: none;
font-style: normal;
display: inline-block;
}
.nav .links .link a:hover {
color: grey;
text-decoration: none;
font-style: normal;
}
.nav .links .button {
background-color: rgba(103, 155, 193, 1);
border-radius: 5px;
box-shadow: 2px 2px 1px rgba(0, 0, 0, 1);
}
.nav .links .button:hover {
background-color: rgba(103, 155, 193, 0.5);
border-radius: 5px;
box-shadow: 2px 2px 1px rgba(0, 0, 0, 1);
}
.nav .links .button a {
padding: 7px;
text-align: center;
}
<div class="nav">
<ul class="links">
<li class="link text">Home
</li>
<li class="link divider"> | </li>
<li class="link text">About Us
</li>
<li class="link divider"> | </li>
<li class="link text">Contact Us
</li>
<li class="link divider"> | </li>
<li class="link button">Get Started
</li>
</ul>
</div>
I try to create a horizontal navigation, but there are some problems:
The first element is displaced
Is there a better way to place the Text centered below the icon. Now I did that just with a . And how should I use the optional arrow-down-icon - here I used the span-tag. I think the html-markup for that is not the best.
And the second-level ul (=subelements) isn't shown correctly and doesn't enclose the subelements.
JSFiddle: http://jsfiddle.net/pqubgt2d/
nav {
background-color: #f2f2f2;
padding: .3em 0;
border-radius: 7px;
}
nav ul {
list-style: none;
height: 2.5em;
padding: .25em;
color: #555;
margin: 0;
}
nav ul li {
font-family: "Source Sans Pro";
font-size: .5em;
margin: .5em 0;
display: inline-block;
width: 4em;
text-align: center;
}
nav ul li i {
font-size: 3em !important;
}
nav ul li ul {
font-size: 3em;
background-color: #f2f2f2;
}
.button-arrow-down {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #B4B4B4;
margin: 0 auto;
position: relative;
bottom: -7px;
}
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<nav>
<ul>
<li><i class="fa fa-file-o"></i><br>New</li>
<li>
<i class="fa fa-floppy-o"></i><br>
Save<br>
<span class="button-arrow-down"></span>
<ul>
<li>Subelement 1</li>
<li>Subelement 2</li>
<li>Subelement 3</li>
</ul>
</li>
</ul>
</nav>
nav {
background-color: #f2f2f2;
padding: .3em 0;
border-radius: 7px;
height: 2.5em;
}
nav > ul {
list-style: none;
padding: .25em;
color: #555;
margin: 0;
}
nav > ul > li {
font-family:"Source Sans Pro";
font-size: .5em;
margin: .8em;
text-align: center;
float:left;
width:4em;
}
nav > ul > li i {
font-size: 2.8em !important;
}
nav > ul > li>ul {
font-size: 3em;
background-color: #f2f2f2;
}
.button-arrow-down {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #B4B4B4;
margin: 0 auto;
position: relative;
bottom: -7px;
}
.drop {
float:left;
display:none;
}
li:hover > .drop {
display:block;
}
.drop {
list-style-type:none;
font-family:"Source Sans Pro";
font-size: 20px;
}
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<nav>
<ul>
<li class="item"><i class="fa fa-file-o"></i>New</li>
<li class="item"><i class="fa fa-floppy-o"></i>Save<span class="button-arrow-down"></span>
<ul class="drop">
<li>Subelement 1</li>
<li>Subelement 2</li>
<li>Subelement 3</li>
</ul>
</li>
</ul>
</nav>
Try this. This looks more like you want it. If it helps +1.
Edit. I have updated the answer due to your comment.
All, I've searched around and I have a feeling it's something simple. When hovering over any of my navigation items it displays all levels of my navigation bar. I have tried a couple of different ways to select but here is my CSS code.
div#topnav {
margin: -1px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 100%;
height: 21px;
background-color: #666;
border-bottom: 1px solid black;
}
div#topnav ul {
margin: 0;
padding: 0px;
background: #666;
text-align: left;
width: auto;
font-size: 10px;
font-weight: bold;
}
div#topnav li {
position: relative;
list-style: none;
margin: 0px;
padding: 3px 8px 2px 8px;
float: right;
border-left: 1px solid silver;
}
div#topnav li:hover {
background-color: #0038A8;
}
div#topnav li li.submenu:hover {
background-color: #0038A8;
}
div#topnav li a {
display: block;
padding: 0;
text-decoration: none;
width: auto;
color: white;
}
div#topnav li a:hover {
text-decoration: none;
}
div#topnav>ul a {
width: auto;
}
ul.level2 {
position: absolute;
width: 175px;
display: none;
border-top: 1px solid black;
}
div#topnav ul ul li {
float: left;
width: 158px;
border-bottom: 1px solid gray;
}
div#topnav ul.level2 {
top: 19px;
left: -1px;
margin-top: 2px;
font-weight: normal;
}
div#topnav ul.level3 {
top: -1px;
left: 174px;
border: 1px solid #000;
font-weight: normal;
}
ul.level1:hover > li ul.level2 {
display: block;
}
<div id="topnav" class="menu">
<ul class="level1">
<li>Item 1</li>
</ul>
<ul class="level1">
<li>Help
<ul class="level2">
<li>Email us</li>
<li>Call Us</li>
<li>Online Support</li>
<li>Forums</li>
</ul>
</li>
<li>Shopping
<ul class="level2">
<li>Shoes</li>
<li>Shirts</li>
<li>Pants</li>
</ul>
</li>
<li>Home</li>
</ul>
</div>
I have also put the CSS as a direct descendant but still had the same problem (Below is what I used).
ul.level1:hover > li ul.level2
Here a working fiddle : http://jsfiddle.net/7w68q1f4/
ul.level1 li:hover > ul.level2 {
display:block;}
I have a navigation bar, which works perfect in Chrome & Mozilla, but does not work properly in IE.
When you hover the mopue on about us tab, the drop down should come, but its coming inline. and also the background position is not correct.
Pls Help
Code :
CSS :
#nav {
width : auto;
height : 25px;
margin : 10px auto;
padding : 5px;
}
#nav ul {
margin : 17px auto;
padding : 0px;
text-align: center;
}
#nav ul li {
display: inline-block;
list-style: none;
}
#nav ul li a {
text-decoration :none;
color: #175587;
font-size: 15px;
width : auto;
padding: 5px 1px 5px 1px;
height: 35px;
box-shadow: 3px 3px 8px gray;
background: url(../images/listback.png);
}
#nav ul li a:hover, #nav ul li a.current {
background: url(../images/hoverback.png);
color: white;
}
#nav li ul {
display: none;
position: absolute;
}
#nav li:hover ul {
display: block;
z-index: 10;
margin: 0px 0px 0px 0px;
background: url(../images/down2.png) no-repeat;
background-position: 13% 5%;
padding: 65px 0px 0px 0px;
}
#nav li ul li {
float: none;
display: block;
}
#nav li ul li a {
width: 155px;
height: auto;
margin: 0px 0px 0px 0px ;
padding: 5px 0px 5px 5px;
float: left;
background : rgba(29, 71, 113, 0.8);
font-size: 15px;
text-align: left;
text-decoration: none;
font-weight: bold;
color: white;
text-transform: uppercase;
outline: none;
box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
display: block;
}
HTML :-
<div id="nav">
<ul>
<li>Home
</li>
<li>About Us
<ul>
<li>Group Profile
</li>
<li>Management Profile
</li>
<li>Milestones
</li>
<li>Vision & Missions
</li>
</ul>
</li>
<li>AGP
</li>
<li>Products
</li>
<li>Infrastructure
</li>
<li>Support
</li>
<li>Culture
</li>
<li>Certification
</li>
<li>Contact Us
</li>
</ul>
</div>
Please Help.
I added float:left and clear both to #nav li ul li (shown below)
#nav li ul li {
float:none;
display:block;
float:left;
clear:both;
}
Here's a demo working in IE -> http://jsfiddle.net/5kWJz/