Problem: Why when i go with the mouse over "About" the sub-menu appears but if i try to go into any of it items it disappears?
Part of my style.css:
#menu {
padding: 0 45px 0 45px;
position: relative;
background: #209D9D url(images/img02.gif) repeat-x top left;
margin: 0 0 0 0;
height: 60px;
line-height: 60px;
width: 890px;
border-top: solid 1px #5AD7D7;
text-shadow: 0 1px 1px #007D7D;
}
#menu a {
text-decoration: none;
color: #ffffff;
font-size: 1.25em;
letter-spacing: -1px;
}
#menu a:hover{
color: #136F6F;
}
#menu ul {
list-style: none;
text-align: center;
}
#menu ul li {
padding: 0 20px 0 20px;
display: inline;
position: relative;
list-style: none;
}
#menu ul li.first {
padding-left: 0;
}
#menu ul li:hover ul{
visibility:visible;
}
#menu ul ul{
position: absolute;
top: 35px;
visibility: hidden;
}
#menu ul ul li{
position: relative;
float: left;
margin: 0;
padding:0;
}
#menu ul ul li a{
display: block;
text-decoration:none;
text-align: center;
height: 55px;
line-height: 55px;
width: 200px;
background-color: #209D9D;
color: white;
}
#wrapper {
position: relative;
width: 980px;
margin: 75px auto 0 auto;
background: #FFFFFF;
}
Part of my index.html:
<div id="wrapper">
<div id="menu">
<ul>
<li class="first current_page_item">Homepage</li>
<li>Blog</li>
<li>Papers</li>
<li>Projects</li>
<li>About
<ul>
<li>Me</li>
<li>Curriculum Vitae</li>
<li>Contact Me</li>
</ul>
</li>
<!-- <li class="last">Contact</li> -->
</ul>
<br class="clearfix" />
</div>
There is a gap between your menu and submenu, when your cursor goes over this gap, the submenu disappears, try changing "top: 35px;" in "#menu ul ul" to "top: 20px;"
Change padding of #menu ul li to padding: 20px;
Play around the values.
Live demo
EDIT
Instead of changing the li's padding, I had added below css:
#menu ul li a {
padding:20px 0;
}
#menu ul ul li a {
padding: 0;
}
Demo Here
Try it.
Related
I have a drop-down menu inside a nav. Its parent has a max-width of 500px.
I want the drop-down to open on entire page.
I tried using 100vw but that way the dropdown is not aligned properly.
Additionally I cant move my navbar outside the max width container.
Check the code here - https://codepen.io/chiragjain94/pen/Vwwbwop?editors=1100
<div class="max">
<nav>
<ul>
<li>Home</li>
<li>Tutorials
<ul>
<li>Photoshop </li>
<li>Illustrator </li>
</ul>
</li>
<li>User Experience</li>
</ul>
</nav>
Css
.max{
max-width:500px;
margin: 0 auto;
}
nav {
text-align:center;
width: 100%;
background: #bebebe;
padding: 0;
margin: 0;
height: 60px;
position:relative;
}
nav ul {
background: #bebebe;
list-style:none;
padding:0 20px;
margin: 0;
height: 60px;
}
nav ul li {
display: inline-block;
}
nav ul li a {
color:#333333;
display:block;
padding:0px 40px;
text-decoration:none;
float: left;
height: 60px;
line-height: 60px;
}
nav ul li:hover {
background: #333333;
}
nav ul li:hover > a{
color:#FFFFFF;
}
nav ul li:hover > ul {
display:block;
}
nav ul ul {
background: red;
padding:0;
text-align: center;
display:none;
width: 100vw;
position: absolute;
top: 60px;
left:-0px;
right:0px;
}
Dropdown menu is taking 100vw width but how can I get it to left 0 of entire page??
Remove position: relative from nav.
If the parent's position is set to relative, a child element with position: absolute assumes an absolute position relative to its parent.
.max{
max-width:500px;
margin: 0 auto;
}
nav {
text-align:center;
width: 100%;
background: #bebebe;
padding: 0;
margin: 0;
height: 60px;
}
nav ul {
background: #bebebe;
list-style:none;
padding:0 20px;
margin: 0;
height: 60px;
}
nav ul li {
display: inline-block;
}
nav ul li a {
color:#333333;
display:block;
padding:0px 40px;
text-decoration:none;
float: left;
height: 60px;
line-height: 60px;
}
nav ul li:hover {
background: #333333;
}
nav ul li:hover > a{
color:#FFFFFF;
}
nav ul li:hover > ul {
display:block;
}
nav ul ul {
background: red;
padding:0;
text-align: center;
display:none;
width: 100vw;
position: absolute;
top: 60px;
left:-0px;
right:0px;
}
<div class="max">
<nav>
<ul>
<li>Home</li>
<li>Tutorials
<ul>
<li>Photoshop </li>
<li>Illustrator </li>
</ul>
</li>
<li>User Experience</li>
</ul>
</nav>
Plz change "nav" class styles or remove the position..
css
nav {
position: static;
}
I've made this navigation with CSS and now I'm trying to make it responsive using media queries, but I can't get the submenus to show properly. In responsive mode, I'd like to display the full menu with all links neatly underneath each other in one box. Would really appreciate some help!
https://jsfiddle.net/4L8ghza0/1/
HTML:
<header>
<div class="nav">
<ul>
<li>Start</li>
<li>Submenu1 <span class="arrow">▼</span>
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
</ul>
</li>
<li>Service</li>
<li>Events</li>
<li>Submenu2 <span class="arrow">▼</span>
<ul>
<li>link4</li>
<li>link5</li>
<li>link6</li>
</ul>
</li>
</ul>
</div>
</header>
CSS:
header {
top: 0px;
background-color: #EFE7D2;
position: fixed !important;
width: 100%;
height: 125px;
z-index: 10;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.12), 0 2px 10px 0 rgba(0,0,0,0.12);
}
.nav {
float: right;
padding: 40px 80px 0 0;
}
ul {
list-style-type: none;
}
ul li {
font-family: Arial, sans-serif;
font-size: 95%;
text-transform: uppercase;
display: inline-block;
position: relative;
float: left;
margin: 5px;
}
ul li a {
padding: 8px 10px;
display: block;
text-decoration: none;
color: #000000;
}
ul li:hover{
background: #CCB18E;
}
.nav .arrow {
font-size: 70%;
line-height: 0%;
}
ul li ul {
display: none;
position: absolute;
width: 210%;
padding: 0;
}
ul li ul li {
display: block;
text-decoration: none;
background: #CCB18E;
padding: 0px 10px;
margin: 0;
width: 100%;
}
ul li ul li:hover {
display: block;
background: #DAC7AD;
text-decoration: none;
padding: 0px 10px;
margin: 0;
width: 100%;
}
ul li:hover ul{
display:block;
visibility:visible;
}
ul ul li:hover li{
display:block;
}
.current {
background:#CCB18E;
color: #000000;
}
#menu-icon {
display: hidden;
width: 40px;
height: 40px;
background: url(https://cdn0.iconfinder.com/data/icons/social-messaging-productivity-4/128/menu-2-512.png) center;
}
a:hover#menu-icon {
border-radius: 4px 4px 0 0;
}
#media screen and (max-width: 1080px){
#menu-icon {
display: inline-block;
}
ul li ul li a {
display: block;
}
ul, ul:active {
display: none;
z-index: 1000;
position: absolute;
padding: 10px;
background: #EFE7D2;
right: 100px;
top: 60px;
width: 25%;
border: 1px #5F7B65 solid;
}
.nav:hover ul {
display: block;
}
ul li:hover ul li ul li {
display: none;
}
}
#JD26 I find it easier using flex-box. You can set .nav {display: flex; flex-direction:column;} in your media query. This should get you started. Or with block display: .nav {display: block}.
Working on a website (inherited someone else's code) and I'm trying to make a dropdown menu. The dropdown appears correctly when I hover over the item, but as soon as I mouse down to the dropdown list items, they disappear. Can someone help me figure out what's wrong here?
#nav {
position:fixed;
top: -1em;
background: #000;
font-family: 'Abel', sans-serif;
font-size: 1.25em;
letter-spacing: 0.05em;
width:100%;
text-align:right;
padding: 1.25em;
z-index: 3;
}
#nav li {
list-style-type: none;
display: inline-block;
margin: 0em 0.25em;
color: #90918F;
}
#nav li a {
text-decoration: none;
display: inline-block;
padding: 0em 0.5em;
margin: 0;
color: #90918F;
}
#nav li a:hover {
text-decoration: none;
color: #90918F;
}
#nav li a.active {
text-decoration: none;
color: #90918F;
}
#nav li.space {
padding: 2em;
}
ul {
padding: 0.05em;
}
#nav ul {
z-index: 3;
margin-top: 0;
background: #000;
display: none;
position: absolute;
top: 72px;
right: 450px;
}
#nav ul li {
display: block;
padding: 0.75em;
text-align: left;
}
#nav li:hover > ul {
display: block;
}
#nav li > ul:hover {
position: absolute !important;
}
#nav ul li:after {
position: absolute;
left: 5%;
top: -20px;
width: 0;
height: 0;
content: '';
}
<ul id="nav">
<div id="logo">
<img src="images/logo.png" class="logo">
</div>
<li>ABOUT
<ul class="dropdown">
<li>Values</li>
<li>Our Team</li>
</ul>
</li>
<li>SERVICES</li>
<li>CLIENTS</li>
<li>STUDENTS</li>
<li>CONTACT</li>
</ul>
The dropdown menu is not aligning properly. The dropdown options are to the right for some reason instead of aligned ('students', 'programs', 'trainings').
Here is the css code for the menu:
<style type="text/css">
#drop-nav {
width: 1000px;
}
ul {
margin: 0px;
padding: 0px;
list-style-type: none;
list-style-image: none;
list-style-position: outside;
overflow: visible;
position: static;
}
ul li {
border: 1px solid #000000;
display: block;
position: relative;
float: left;
right: -4px;
background-color: white;
}
li ul {
display: none;
background-color: #3333ff;
}
ul li a {
padding: 10px 18px 5px 90px;
background: #3333ff none repeat scroll 0% 50%;
text-decoration: none;
white-space: nowrap;
color: #ffffff;
overflow: visible;
text-align: center;
display: block;
}
ul li a:hover {
background: #3366ff none repeat scroll 0% 50%;
overflow: visible;
}
li:hover ul {
display: block;
position: absolute;
overflow: visible;
}
li:hover li {
float: none;
background-color: #3366ff;
}
li:hover a {
background: #2346b1 none repeat scroll 0% 50%;
}
li:hover li a:hover {
background: #40a3f6 none repeat scroll 0% 50%;
}
#drop-nav li ul li {
border-top: 0px none;
overflow: visible;
visibility: visible;
font-family: Arial,Helvetica,sans-serif;
text-align: justify;
clear: none;
display: table-row;
width: 140px;
}
</style>
Here is the html:
<ul id="drop-nav">
<li>Home
</li>
<li>About
<ul>
<li>Students</li>
<li>Programs</li>
<li>Trainings</li>
</ul>
</li>
<li>Services Offered
</li>
<li>Our Products</li>
<li>Contact
</li>
</ul>
This is because ou are using padding-left at 90px. You can change it to this:
ul li ul li a {
text-align: left;
padding: 10px 18px 5px 0px;
width: 100%;
display: table-cell;
}
fiddle
It's not clear what you are referring to but the text is affected as you have too much left padding on the anchor links compared the other sides.
ul li a {
padding: 10px 18px 5px 90px; /* 90px!!! */
Try something less
JSfiddle Demo
Someone asked me to improve his CSS to prevent the navigation menu from changing position when the browser gets smaller, but I can't figure out why it won't work. See the jsFiddle: http://jsfiddle.net/gtvTY/10/
The HTML:
<div id="menu">
<ul>
<li>HOME</li>
<li>VIRAGE</li>
<li>RAPIDE</li>
<li>DBS</li>
<li>DB9</li>
<li>CYGNET</li>
</ul>
</div>
This is the original menu:
ul.menu {
position:absolute;
left:18%;
right:18%;
background: #333;
float: left;
list-style: none;
margin: 0;
padding: 0;
width: 64%;
z-index: 3;
}
ul.menu li {
float: left;
margin: 0;
padding: 0;
}
ul.menu a {
background: #333;
color: #ccc;
display: block;
float: left;
margin: 0;
padding: 8px 12px;
text-decoration: none;
}
ul.menu a:hover {
background: #666;
color: #fff;
padding-bottom: 8px;
}
I have redesigned it a bit to this. But it doesn't work at all...
#menu ul {
position: absolute;
list-style: none;
padding: 0;
margin: 0;
}
#menu li
{
float: left;
margin: 0 0.15em;
}
#menu li a
{
background-color: #333;
height: 2em;
line-height: 2em;
float: left;
width: 9em;
display: block;
color: #fff;
text-decoration: none;
text-align: center;
}
#menu ul a:hover {
background: #666;
color: #fff;
padding-bottom: 2px;
}
Why doesn't this menu stay centered at all times?
Maybe it is something like this you are looking for - jsFiddle in comment
You need to put the menu in a wrapping container. Give it a width and set the margin: 0 auto;
See fiddle here: http://jsfiddle.net/AndrewHenderson/gtvTY/7/
HTML:
<div class="container">
<div id="menu">
<ul>
<li>HOME</li>
<li>VIRAGE</li>
<li>RAPIDE</li>
<li>DBS</li>
<li>DB9</li>
<li>CYGNET</li>
</ul>
</div>
</div>
CSS:
.container{
margin: 0 auto;
width: 800px;
}
Is that what you want? jsfiddle
Menu canter aligned in the bowoser.
Menu Items will not go in the second row.
if this is so the solution is
You have to use position:relative; instead of position:absolute;
<div class="center">
<div id="menu">
<ul>
<li>HOME</li>
<li>VIRAGE</li>
<li>RAPIDE</li>
<li>DBS</li>
<li>DB9</li>
<li>CYGNET</li>
</ul>
</div>
and define a width to your menu css
.center
{
width:auto;
}
#menu
{
width:900px;
margin:0 auto;
position:relative;
}
#menu ul {
list-style: none;
padding: 0;
margin: 0;
}
#menu li {
float: left;
margin: 0 0.15em;
}
#menu li a {
background-color: #333;
height: 2em;
line-height: 2em;
float: left;
width: 9em;
display: block;
color: #fff;
text-decoration: none;
text-align: center;
}
#menu ul a:hover {
background: #666;
color: #fff;
padding-bottom: 2px;
}