I'm working on this fairly simple dropdown and I can't work out why the dropdown dissapears when you hover past the first link?
http://haizel.co.uk/wedding/
You can view it above. CSS below:
nav {
display: flex;
justify-content: center;
align-items: center;
margin: 25px 0;
font-size: 18px; }
nav ul li ul li {
width: 150px;
padding: 0;
font-size: 14px; }
nav ul {
display: flex;
list-style: none;
margin: 0; }
nav li{
position: relative;
margin: 0;
padding: 0 20px; }
nav a{
text-decoration: none;
text-transform: uppercase;
color: #fff;
font-family: 'Montserrat', sans-serif; }
nav ul ul{
display: none;
position: absolute;
top: 100%;
left: 20px; }
nav ul li:hover > ul {
display: block; }
Thanks in advance.
The dropdown menu is dropping down behind the <section class="main-content"> content so give your header a higher z-index
header {
position: relative;
z-index: 2;
}
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 want the blue of the navbar to extend across the screen, while the About, Updates, and Who am I? to stay in the middle? I want the background to remain a background so that it will change if I resize anything. I am fine with a different centering method, if that works better.
.centered {
display: flex;
justify-content: center;
}
#navbar {
background: #0099CC;
color: #FFF;
height: 51px;
padding: 0;
margin: 0;
border-radius: 0px;
}
*{
padding:0;
margin:0;
}
#navbar ul, #navbar li {
margin: 0 auto;
padding: 0;
list-style: none
}
#navbar ul {
width: 100%;
}
#navbar li {
float: left;
display: inline;
position: relative;
}
#navbar a {
display: inline-block;
display:flex;
line-height: 51px;
padding: 0 14px;
text-decoration: none;
color: #FFFFFF;
font-size: 16px;
text-align: center;
}
#navbar li a:hover {
color: #0099CC;
background: #F2F2F2;
}
#navbar label {
display: none;
line-height: 51px;
text-align: center;
position: absolute;
left: 35px
}
<div class="centered">
<nav id='navbar'>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>Updates</a></li>
<li><a href='#'>Who am I?</a></li>
</ul>
</nav>
</div>
You can add 100% width to #navbar to extend across the screen and change display & width properties for #navbar ul, like this
#navbar {
width: 100%;
}
#navbar ul {
display: flex;
width: fit-content;
}
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 seem to be having a problem with my CSS in making the entire menu item clickable, not just the text.
As you can see from the highlighted screenshot, the menu does not extend to 100% height of the div. As a result, only the text of the menu is clickable, not the whole box around it. How do I make the entire box clickable?
(Code Below)
#header
{
background-color: black;
}
#header .menu
{
display: inline;
text-decoration: none;
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
height: 100%
position: relative;
text-transform:uppercase;
}
#header .menu ul{
display: inline-block;
}
#header .menu li {
display: inline-block;
padding: 20px;
width: auto;
color: white;
height: 100%;
position: relative;
}
#header .menu a{
display: block;
width: 100%
height: 100%;
text-decoration: none;
color: white;
font-family: Helvetica;
}
#header .menu ul li a{
display: block;
}
#header .menu li a{
position: relative;
}
Thanks.
Use this piece of CSS
#header .menu
{
display: inline;
text-decoration: none;
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
height: 100%
position: relative;
text-align: center;
text-transform:uppercase;
}
#header .menu li { display: inline; float:left; }
#header .menu li a
{
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #000;
font-family: Helvetica;
}
#header ul li a:hover
{
color: Yellow;
background-color: #000;
}
Here is a Demo
When I set the width of the sub menu to width:auto, the items with really long names gets squished together. Currently I have the width set to 175% which is not desirable as some menus can get quiet long. How can I make width:auto work for long menu items.
Link to demo site: http://previewyournewwebsite.info/otsl/
.nav.main_nav .sub-menu {
background-color: #2D556F;
display: none;
height: auto;
/* left: -5px; */
left: 0px;
margin: 0 9px 0 0;
position: absolute;
top: 54px;
width: 175%;
}
.nav.main_nav .sub-menu li {
margin: 30px 0px;
display: block;
}
.nav.main_nav .sub-menu li a {
background-image: url("./images/sub-nav-divider.png");
background-position: 0 bottom;
height: 50px;
line-height: 50px;
background-repeat: repeat-x;
font-family: Helvetica,Arial,sans-serif;
font-size: 15px;
margin-left: -31px;
padding: 0 0 0 44px;
width: 100%;
}
.nav.main_nav .sub-menu > li{
height: 50px;
line-height: 50px;
padding-left: 44px;
}
.nav.main_nav .sub-menu > li:last-child a{
background-image: none;
}
.nav.main_nav .sub-menu li {
display: block;
margin: 0;
}
Link to site: http://previewyournewwebsite.info/otsl/
Are you looking for this?
http://jsfiddle.net/coma/MNFXB/11/
nav ul, nav li {
list-style: none;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
nav a {
display: block;
text-decoration: none;
text-transform: uppercase;
padding: 1em;
color: #fff;
background-color: #2D556F;
white-space: nowrap;
}
nav > ul {
background-color: #2D556F;
}
nav > ul:after {
display: block;
content: "";
clear: both;
}
nav > ul > li {
float: left;
position: relative;
}
nav > ul > li > ul {
position: absolute;
top: 100%;
left: 0;
min-width: 100%;
display: none;
}
nav > ul > li:hover > ul {
display: block;
}
nav li:hover > a {
background-color: #92A132;
}
Or would you like something like this?
http://jsfiddle.net/coma/MNFXB/12/