Guys for the life of me I can't work out why the dropdown on 'option two' is not displaying properly, the list elements all seem to be sitting on top of each other and only shows the last option when hovering over, any ideas?
http://jsfiddle.net/38pbvpx1/
body {
margin: 0;
}
header {
position: relative;
width: 80%;
height: 80px;
padding: 0;
margin: 0 auto;
background: #ff6;
max-width: 1200px;
}
/* nav and submenu */
nav {
position: absolute;
top: 0;
right: 0;
width: auto;
height: 80px;
padding: 0;
margin: 0;
}
nav ul {
padding: 0;
margin: 0;
}
nav li {
display: inline-block;
zoom: 1;
*display: inline;
_height: 80px;
list-style-type: none;
}
nav li a {
display: block;
height: 80px;
}
nav li a:hover {
background: #448f69;
}
/* submenu navigation
---------------------------------------- */
ul#menu, ul#menu ul.sub-menu {
padding:0;
margin: 0;
}
ul#menu li, ul#menu ul.sub-menu li {
list-style-type: none;
margin: 0;
padding: 0;
}
ul#menu li {
width: auto;
}
ul#menu li a, ul#menu li ul.sub-menu li a {
width: auto;
text-decoration: none;
color: #000;
padding: 0 15px;
display: block;
font-size: 16px;
}
ul#menu li {
position: relative;
}
ul#menu li ul.sub-menu {
display:none;
postion: absolute;
top: 80px;
left: 0;
width: auto;
}
ul#menu li:hover ul.sub-menu {
display:block;
}
ul#menu li:hover ul.sub-menu li {
position: absolute;
display:block;
width: 100%;
background-color: #red;
}
ul#menu li:hover ul.sub-menu li a:hover {
display:block;
width: auto;
color: #000;
background-color: green;
}
<body>
<header>
<nav>
<ul id="menu">
<li>Option One</li>
<li>Option Two
<ul class="sub-menu">
<li>Section A</li>
<li>Section B</li>
<li>Section C</li>
</ul><!-- /.sub-menu -->
</li>
<li>Option Three</li>
<li>Option Four</li>
</ul><!-- /#menu -->
</nav>
At a basic level it's because you have positioned all of the sbnmenu's li abolsutely so they are sitting on top of each other.
The positioning being used here is quite odd so I've updated it slightly.
JSfiddle
CSS
body {
margin: 0;
}
header {
position: relative;
width: 80%;
height: 80px;
padding: 0;
margin: 0 auto;
background: #ff6;
max-width: 1200px;
}
}
nav ul {
padding: 0;
margin: 0;
}
nav li {
display: inline-block;
zoom: 1;
*display: inline;
_height: 80px;
list-style-type: none;
position: relative;
vertical-align: top;
}
nav li a {
display: block;
height: 80px;
}
nav li a:hover {
background: #448f69;
}
/* submenu navigation
---------------------------------------- */
ul#menu, ul#menu ul.sub-menu {
padding:0;
margin: 0;
}
ul#menu li,
ul#menu ul.sub-menu li {
list-style-type: none;
margin: 0;
padding: 0;
}
ul#menu li {
width: auto;
}
ul#menu li a, ul#menu li ul.sub-menu li a {
width: auto;
text-decoration: none;
color: #000;
padding: 0 15px;
display: block;
font-size: 16px;
}
ul#menu li {
position: relative;
}
ul#menu li ul.sub-menu {
display:none;
postion: absolute;
top:100%;
left: 0;
width: auto;
}
ul#menu li:hover ul.sub-menu {
display:block;
}
ul#menu li:hover ul.sub-menu li {
//position: absolute;
display:block;
width: 100%;
background-color: #red;
}
ul#menu li:hover ul.sub-menu li a:hover {
display:block;
width: auto;
color: #000;
background-color: green;
}
Make the following changes:
ul#menu li:hover ul.sub-menu li {
position: relative;/*Change position from absolute to relative*/
display:block;
width: 100%;
background-color: #red;
}
ul#menu li:hover ul.sub-menu li {
position: relative;
display:block;
width: 100%;
/*top: 80px;Remove this*/
background-color: #red;
}
fiddle
Related
I'm trying to make my mobile menu load expanded (top level links only) on page load. I've got a second level of nested links I'd like to stay hidden. I'm sure this is a super simple fix but I've already spent an afternoon fiddling with my code that I think it's time to ask the professionals ;)
My code:
https://jsfiddle.net/ubxsksz2/
<nav id="nav" role="navigation">
<font size="+2">MENU</font>
<font size="+2">HIDE MENU</font>
<ul>
<li><b><font color="#CC9933">HOME:</font></b></li>
<li>
FIRST LEVEL <img src="ddlevelsfiles/arrow-down.gif">
<ul>
<li>SECOND LEVEL LINK</li>
</ul>
</li>
</ul>
</nav>
/* New Responsive Menu CSS */
#crumbs {
width: 97%;
overflow: hidden;
}
#nav {
/* container */
background: #333;
}
#nav > a {
display: none;
}
#nav a {
color: #FFF;
}
#nav li {
position: relative;
background: #CC9;
color: #000;
padding: 15px 15px;
padding-bottom: 15px;
border-bottom: 1px solid #333;
}
/* first level */
#nav > ul {
font: bold 14px Verdana;
}
#nav li ul li a {
color: black;
}
#nav > ul > li {
height: 100%;
float: left;
padding: 15px 10px;
background: #333;
}
/* second level */
#nav li ul {
display: none;
position: absolute;
top: 100%;
width: 100%;
}
#nav li:hover ul {
display: block;
}
#media only screen and ( max-width: 640px)
/* 640 */
{
#sticky-element {}
.nav-container {}
.f-nav {
z-index: 9999;
position: fixed;
left: 0;
top: 0;
width: 100%;
}
#nav {
position: relative;
}
#nav > a {}
#nav:not(:target) > a:first-of-type,
#nav:target > a:last-of-type {
display: block;
}
/* first level */
#nav > ul {
height: auto;
display: none;
position: absolute;
left: 0;
right: 0;
}
#nav:target > ul {
display: block;
}
#nav > ul > li {
width: 93%;
float: none;
}
/* second level */
#nav li ul {
position: static;
}
}
It actually took me a while to get this working...
Man, you are making some crazy navbar! +1
I hope this helps you!
Keep on coding!
/* New Responsive Menu CSS */
#crumbs {
width: 97%;
overflow: hidden;
}
#nav {
/* container */
background: #333;
}
#nav > a {
display: none;
}
#nav a {
color: #FFF;
}
#nav li {
position: relative;
background: #CC9;
color: #000;
padding: 15px 15px;
padding-bottom: 15px;
border-bottom: 1px solid #333;
}
/* first level */
#nav > ul {
font: bold 14px Verdana;
}
#nav li ul li a {
color: black;
}
#nav > ul > li {
height: 100%;
float: left;
padding: 15px 10px;
background: #333;
}
/* second level */
#nav li ul {
display: none;
position: absolute;
top: 100%;
width: 100%;
}
#nav li:hover ul {
display: block;
}
#media only screen and ( max-width: 640px)
/* 640 */
{
#sticky-element {}
.nav-container {}
.f-nav {
z-index: 9999;
position: fixed;
left: 0;
top: 0;
width: 100%;
}
#nav {
position: relative;
}
#nav > a {}
#nav:not(:target) > a:first-of-type,
#nav:target > a:last-of-type {
display: block;
}
/* first level */
#nav > ul {
height: auto;
display: none;
position: absolute;
left: 0;
right: 0;
}
#nav:target > ul {
display: block;
}
#nav > ul > li {
width: 93%;
float: none;
}
/* second level */
#nav li ul {
position: static;
}
}
<body onload="window.location.href+='#nav';">
<nav id="nav" role="navigation">
<font size="+2">MENU</font>
<font size="+2">HIDE MENU</font>
<ul>
<li><b><font color="#CC9933">HOME:</font></b></li>
<li>
FIRST LEVEL <img src="ddlevelsfiles/arrow-down.gif">
<ul>
<li>SECOND LEVEL LINK</li>
</ul>
</li>
</ul>
</nav>
</body>
I have a menu, for which I put at the end 3 images, measuring 30x30 px each. After the images being inserted, it appeared a space between the bottom line of the menu and only the text. For the image there is no space between the bottom of the menu and the images. What I would like now to do, would be to have the text having the exact size (I managed to fix this space by increasing font size, but this is not a solution for me) as now and get rid of that space. Again, the space is only below the text and not the images. *Check with full-screen the menu.
#nav {
background-color: #e26a63;
padding: 0;
margin: 0;
font-family: FONT;
font-size: 20px;
}
#wrap {
padding-left: 60px;
height: 100px;
width: 100%;
margin: 0 auto;
display: table-cell;
vertical-align: bottom;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
min-width: 245px;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
background-color: #cb5f59;
}
#nav ul li:after {
content: "";
font-size: 0;
display: block;
height: 5px;
}
#nav ul li:hover:after {
background: #9e4a45;
}
#nav ul ul li:hover:after {
background: transparent;
}
#nav ul li a, visited {
color: white;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #e26a63;
border-top: 0;
margin-top: 5px;
z-index: 100;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a:hover {
color: white;
}
#nav {
display: table;
width: 100%;
}
.alignright { float: right; }
<div id="nav">
<div id="wrap">
<ul>
<li>Home</li><li>
Study
<ul>
<li>Present Simple</li><li>
Possesives</li><li>
Articles</li><li>
Modal Verbs</li><li>
Prepositions</li><li>
Plural of nouns</li><li>
Countability</li>
</ul>
</li><li>
Games
<ul>
<li>Riddles</li><li>
Flip card game</li><li>
Spot the mistake</li><li>
Multiple choice</li>
</ul>
</li><li>
Shop</li><li>
Contact</li><li>
About Us</li>
<li style="float:right"><a><img src="gmail.png" height="30px" width="30px"></a></li> <li style="float:right"><a><img src="twitter.png" height="30px" width="30px"></a></li><li style="float:right"><a><img src="facebook.png" height="30px" width="30px"></a></li>
</ul>
</div>
</div>
The simplest would be to set the same height to your texts as you have on your images
#nav ul li a, visited {
color: white;
display: block;
padding: 15px;
height: 30px; /* added */
text-decoration: none;
}
Stack snippet
#nav {
background-color: #e26a63;
padding: 0;
margin: 0;
font-family: FONT;
font-size: 20px;
}
#wrap {
padding-left: 60px;
height: 100px;
width: 100%;
margin: 0 auto;
display: table-cell;
vertical-align: bottom;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
min-width: 245px;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
background-color: #cb5f59;
}
#nav ul li:after {
content: "";
font-size: 0;
display: block;
height: 5px;
}
#nav ul li:hover:after {
background: #9e4a45;
}
#nav ul ul li:hover:after {
background: transparent;
}
#nav ul li a, visited {
color: white;
display: block;
padding: 15px;
height: 30px; /* added */
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #e26a63;
border-top: 0;
margin-top: 5px;
z-index: 100;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a:hover {
color: white;
}
#nav {
display: table;
width: 100%;
}
.alignright { float: right; }
<div id="nav">
<div id="wrap">
<ul>
<li>Home</li><li>
Study
<ul>
<li>Present Simple</li><li>
Possesives</li><li>
Articles</li><li>
Modal Verbs</li><li>
Prepositions</li><li>
Plural of nouns</li><li>
Countability</li>
</ul>
</li><li>
Games
<ul>
<li>Riddles</li><li>
Flip card game</li><li>
Spot the mistake</li><li>
Multiple choice</li>
</ul>
</li><li>
Shop</li><li>
Contact</li><li>
About Us</li>
<li style="float:right"><a><img src="gmail.png" height="30px" width="30px"></a></li> <li style="float:right"><a><img src="twitter.png" height="30px" width="30px"></a></li><li style="float:right"><a><img src="facebook.png" height="30px" width="30px"></a></li>
</ul>
</div>
</div>
I am trying to make horizontal menu navigation. I have several links in navigation, and I would like to have equal horizontal space between them.
How to make links in horizontal menu with equal space between them?
HTML:
<div id="header">
<div class="secondary-navigation">
<div itemscope itemtype="http://schema.org/SiteNavigationElement">
<nav id="navigation">
<ul id="menu-main" class="menu">
<li class="menu-item">Link</li>
<li class="menu-item">Link</li>
<li class="menu-item">Link</li>
<li class="menu-item">Link</li>
<li class="menu-item">Link</li>
<li class="menu-item">Link</li>
<li class="menu-item">Link</li>
<li class="menu-item">Link</li>
</ul>
Menu
</nav>
</div>
</div>
</div>
CSS:
#header {
position: relative;
float: left;
padding: 0 0 0 0;
clear: both;
}
/*-----------------------------------------------
/* Header navigation
/*---------------------------------------------*/
.secondary-navigation {
display: block;
width: 100%;
float: left;
}
.secondary-navigation a {
vertical-align: top;
color: #F1F1F1;
font-weight: bold;
margin-top: 8px;
margin-bottom: 4px;
line-height:18px;
font-size: 15px;
border-bottom: 2px solid #333888;
}
.secondary-navigation a:hover, .secondary-navigation .sfHover {
color: #F1F1F1;
border-bottom: 2px solid #F1F1F1;
}
.secondary-navigation li li a { line-height: 1 }
.secondary-navigation a .sub {
font-size: 12px;
font-weight: normal;
color: #CFCFCF;
text-transform: none;
}
.menu-item-has-children > a:after {
content: "▼";
font-size: 10px;
color: #F1F1F1;
position: absolute;
right: 12px;
top: 22px;
}
.footer-navigation .menu-item-has-children > a:after { display: none }
.sub-menu .menu-item-has-children>a:after {
right: 0;
top: 17px;
}
.menu .current-menu-item > a { background: #fff }
.menu .current-menu-item > a:after {
content: "";
position: absolute;
width: 100%;
height: 1px;
background: #fff;
bottom: 0px;
left: 0;
z-index: 1;
}
#navigation {
margin: 0 auto;
font-size: 13px;
width: 100%;
float: left;
}
#navigation ul {
margin: 0 auto;
list-style: none; /*Added*/}
#navigation .menu { float: left; }
#navigation ul li {
float: left;
position: relative;
margin-left: 0;
}
#navigation > ul li:first-child a { }
#navigation > ul li:last-child a { border-right: 0 }
#navigation ul .header-search { float: right }
#navigation > ul > li:last-child { border-right: none }
#navigation ul li a, #navigation ul li a:link, #navigation ul li a:visited { display: block }
#navigation > ul > .current a {
background: transparent;
color: #555 !important;
}
#navigation li:hover ul, #navigation li li:hover ul, #navigation li li li:hover ul, #navigation li li li li:hover ul {
opacity: 1;
left: -228px;
top: 0;
}
#navigation ul ul {
position: absolute;
width: 226px;
z-index: 400;
font-size: 12px;
color: #333888;
border: 1px solid #F1F1F1;
background: #FFFFFF;
padding: 0;
}
#navigation ul ul li {
margin-left: 0;
padding: 0 10%;
width: 80%;
color: #333;
}
#navigation ul ul li:hover { background: #F1F1F1 }
#navigation ul ul a, #navigation ul ul a:link, #navigation ul ul a:visited {
padding: 12px 0;
position: relative;
border-left: 0;
background: transparent;
border-right: 0;
text-transform: none;
line-height: 1.4;
margin-right: 0;
min-height: 100%;
}
#navigation ul ul li:last-child a { border-bottom: none }
#navigation ul ul {
opacity: 0;
left: -999em;
}
#navigation ul li:hover ul {
left: -1px;
opacity: 1;
top: 81px;
}
#navigation ul ul li:hover ul {
top: -1px;
left: -228px;
padding-top: 0;
}
#navigation ul ul ul:after { border-color: transparent }
I tried something like this, but it does not work for me.
You can use justify-content: space-between or justify-content: space-around flexbox property
ul {
display: flex;
justify-content: space-between;
border: 1px solid black;
list-style-type: none;
padding: 10px;
margin: 0;
}
<ul>
<li>Random Link</li>
<li>Random Link</li>
<li>Random Link</li>
<li>Random Link</li>
</ul>
I'm having troubles with my horizontal menu-bar list items overlapping.
So the ul ul li of the nav div elements overlap, what can I do to stop that?
The jsfiddle
CSS:
body, html{
padding: 0px;
margin: 0px;
}
.nav {
font-family: 'PT Sans', sans-serif;
width: 100%;
color: #F5F5F5;
background: #1565c0;
display: flex;
height: 40px;
padding: 0;
margin: 0;
border: 0;
}
.nav ul, .nav ul li, .nav{
list-style: none;
margin: 0;
padding: 0;
border-bottom: 3px solid #0d47a1;
}
.nav ul li{
background: #1565c0;
width:auto;
position: relative;
transition: background 250ms ease-in;
line-height: 40px;
display:block;
}
.nav ul li:hover{
background: #0d47a1;
}
.nav ul ul{
overflow:visible;
position: absolute;
visibility: hidden;
top: 100%;
width: 0%;
}
.nav ul ul li{
border:none;
display:block;
position: absolute;
left:0;
margin:0px;
}
.nav ul li:hover>ul{
visibility: visible;
}
.nav a{
text-decoration: none;
color: inherit;
margin: 0px 20px;
}
.nav ul ul li:last-child{
border-bottom: 3px solid #0d47a1;
}
<div class="nav">
<ul>
<li><a>Hi there</a><ul><li><a>Here is the awesomeness</a></li>
<li><a>Awesome</a></li>
</ul>
</div>
fiddle Here are some modification in your code:
.nav ul ul li {
border: medium none;
display: block;
/*left: 0;*/
margin: 0;
/*position: absolute;*/
}
.nav ul ul {
overflow: visible;
position: absolute;
top: 100%;
visibility: hidden;
/*width: 0;*/
}
you can add below css not to wrap your text in 2 lines:
.nav ul ul {
white-space: nowrap;
}
Try like this Demo
CSS:
.nav ul li > ul {
position: relative;
display:none;
}
.nav ul ul li {
border:none;
display:block;
position: relative;
left:0;
margin:0px;
}
.nav ul li:hover>ul {
display:block;
}
body, html {
padding: 0px;
margin: 0px;
}
.nav {
font-family:'PT Sans', sans-serif;
width: 100%;
color: #F5F5F5;
background: #1565c0;
display: flex;
height: 40px;
padding: 0;
margin: 0;
border: 0;
}
.nav ul, .nav ul li, .nav {
list-style: none;
margin: 0;
padding: 0;
border-bottom: 3px solid #0d47a1;
}
.nav ul li {
background: #1565c0;
width:auto;
position: relative;
transition: background 250ms ease-in;
line-height: 40px;
display:block;
}
.nav ul li:hover {
background: #0d47a1;
}
.nav ul li > ul {
position: relative;
display:none;
}
.nav ul ul li {
border:none;
display:block;
position: relative;
left:0;
margin:0px;
}
.nav ul li:hover>ul {
display:block;
}
.nav a {
text-decoration: none;
color: inherit;
margin: 0px 20px;
}
.nav ul ul li:last-child {
border-bottom: 3px solid #0d47a1;
}
<div class="nav">
<ul>
<li><a>Hi there</a>
<ul>
<li><a>Here is the awesomeness</a>
</li>
<li><a>Awesome</a>
</li>
</ul>
</li>
</ul>
</div>
I have a submenu that shows I can not, I've given a lot of thought and I can not find the problem. I have problems with z-index property, submenu not shown me over the rest of the content. Regards thanks.
http://jsfiddle.net/9nXvT/
HTML
<html>
<body>
<div class="container">
<nav>
<ul class="site-nav">
<li>
AUCTIONS
<ul>
<li>Auction 1</li>
<li>Auction 2</li>
<li>Auction 3</li>
<li>Auction 4</li>
</ul>
</li>
<li>USERS</li>
<li>FAQ's</li>
<li>CONTACT US</li>
<li>SITE MAP</li>
</ul>
</nav>
</div>
<div class="content"></div>
</body>
</html>
CSS
.site-nav {
border-bottom: 1px solid blue;
list-style: none;
*zoom: 1;
position:relative;
z-index: 9999;
}
.site-nav:before,
.site-nav:after {
content: " ";
display: table;
}
.site-nav:after {
clear: both;
}
.site-nav ul {
list-style: none;
width: 9em;
}
.site-nav a {
color: green;
font-family: 'GothamBook';
font-size: 0.75em;
}
.site-nav li {
position: relative;
}
.site-nav > li {
float: left;
}
.site-nav > li > a {
background: white;
display: block;
padding: 12px 45px;
text-decoration: none;
}
.site-nav > li > a:hover {
background: blue;
color:red;
text-decoration: none;
}
.site-nav > li > a.last{
margin-right: 0px;
}
a.activo{
background: blue;
color: red;
text-decoration: none;
}
.site-nav li ul {
position: absolute;
display: none;
top: 36px;
width: auto;
z-index: 9999;
}
.site-nav > li.hover > ul {
display: block;
}
.site-nav li li.hover ul {
left: 100%;
top: 0;
display:block;
z-index:9999;
}
.site-nav li li a {
background: white;
font-family: 'GothamBook';
font-size: 0.8em;
display: block;
padding: 10px 0px 10px 40px;
position: relative;
width: 140px;
z-index:100;
text-align: left;
margin: 0px;
}
.site-nav li li a:hover{
background: blue;
color: purple;
}
.content{
height: 300px;
background: gray;
}
Change li.hover to li:hover and it should work.
http://jsfiddle.net/9nXvT/4/
try this one...replace .hover to :hover
.site-nav > li:hover > ul {
display: block;
}
.site-nav li li:hover ul {
left: 100%;
top: 0;
display:block;
z-index:9999;
}
http://jsfiddle.net/9nXvT/
Try this
Fiddle DEM0 http://jsfiddle.net/9nXvT/5/
CSS
.site-nav > li:hover > ul {
display: block;
}
.site-nav li li:hover ul {
left: 100%;
top: 0;
display:block;
z-index:9999;
}
Just replace these two..It will work..
.site-nav > li:hover > ul {
display: block;
}
.site-nav li li:hover ul {
left: 100%;
top: 0;
display:block;
z-index:9999;
}