Vertical submenu postion is correct but links are on top of each other. And it won't hide when hovering in main menu. Hides when hovering outside menu. I don't know what to add/change in css.
Vertical submenu
nav {
padding-top: 183px;
margin-left: auto;
margin-right: auto;
}
ul {
padding: 0;
margin: 0;
}
nav ul {
list-style: none;
font-weight: bold;
font-size: 20px;
margin: 5px;
width: 200px;
}
nav ul ul {
display: none;
margin: 0px;
padding: 0px;
}
nav ul li {
float: left;
}
nav ul a {
display: block;
width: 145px;
text-align: center;
text-decoration: none;
color: #fff;
border: 1px solid #004c99;
border-radius: 8px;
margin-right: auto;
margin-left: auto;
padding-top: 5px;
padding-right: 9px;
padding-bottom: 5px;
padding-left: 9px;
}
nav ul a:active {
background: rgba(255,255,255,0.4);
color: #FFF;
}
nav ul li a:hover, ul a:focus {
text-decoration: none;
background-color: #6699cc;
color: #FFFFFF;
}
nav ul a:link, nav ul a:visited {
background: rgba(255,255,255,0.2);
color: #FFFFFF;
}
nav ul li a {
display: block;
margin-top: 0px;
}
nav ul ul li {
float: none;
position: relative;
}
nav ul ul li a {
color: #fff;
margin-top: -35px;
position: relative;
margin-left: 165px;
}
nav ul ul li a:hover {
background: #6699cc;
}
nav ul ul li a:active, ul ul li a:link , ul ul li a:visited{
background-color: #3370AD;
}
nav ul li:hover {
margin-top: 0px;
}
nav ul li:hover > ul{
display: block;
position: absolute;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
Thanks in advance!
change your nav ul li a {
display: block;
margin-top: 0px;} to ... margin-top:5px and see if that does the job. that will fix the spacing issue anyway
This happened to me when I nested the submenu incorrectly:
<ul id="main menu">
<li>
<a>Menu item</a>
<!-- DO NOT CLOSE THIS LI TAG YET! -->
<ul>
<li>Submenu item</li>
</ul>
</li> <!-- NOW YOU CAN CLOSE IT -->
</ul>
Related
I am trying to make a make a drop down menu with css, but the drop down does not keep open when I hover it. I have used days on this now searching for what is blocking it to keep open so I can access the submenu item. Can anyone help please?
A million thanks to the one who can find a solution to this endless problem.
Here is the html and css I am working on:
<nav id="topmenu" role="navigation"><div id="nav" class="menu-container">
<ul id="menu-main">
<li id="menu-item-1" class="current-menu-item menu-item-1">News</li>
<li id="menu-item-2" class="menu-item-2">Services</li>
<li id="menu-item-3" class="menu-item-3">About us
<ul class="sub-menu">
<li id="menu-item-4" class="menu-item-4">Contact</li>
</ul>
</li>
</ul></div></nav>
#topmenu {
padding: 5px 0 0 0;
height: 65px;
}
#topmenu ul {
margin:0 10px;
}
#topmenu ul li {
float: left;
position: relative;
font-family: 'Lato',sans-serif;
font-size: 13px;
font-weight: 400;
letter-spacing: 1px;
text-transform: uppercase;
margin: 0 30px 0 0;
color: #333;
}
#topmenu ul li {
font-family: 'Lato',sans-serif;
font-size: 13px;
font-weight: 400;
letter-spacing: 1px;
text-transform: uppercase;
margin: 0;
color: #333;
}
#topmenu ul ul {
display: none;
float: left;
position: absolute;
top: 2em;
left: -5px;
z-index: 99999;
padding: 5px 0 0 5px;
margin: 14px 0 0 0;
background: #fff;
border: 1px dashed #c1c1c1;
border-top: none;
}
#topmenu ul ul li{
position:relative;
text-indent:0;
}
#topmenu ul ul ul {
left: 100%;
top: -20px;
border: 1px dashed #c1c1c1;
}
#topmenu ul ul li,
#topmenu ul ul ul li {
min-width: 130px;
margin: 0;
padding: 0;
border: none;
background: #fff;
display: block;
float: none;
position: relative;
min-width: 150px;
clear: both;
}
#topmenu >li ul>li
{
list-style:none;
text-indent:0;
position:relative;
}
#topmenu ul ul a {
line-height: 1.5em;
padding: .5em .5em .5em 1em;
width: 10em;
height: auto;
}
#topmenu ul ul a:hover,
#topmenu ul ul:hover {
display: inline-block;
}
#topmenu ul ul a:after {
position: absolute;
right: 10px;
top: 50%;
margin-top: -6px;
display: inline-block;
font-style: normal;
font-weight: 400;
line-height: 1;
}
#topmenu ul li a {
text-decoration: none;
color: #fff;
display: block;
height: 30px;
line-height: 3.1em;
}
#topmenu ul li:hover > ul {
display: block;
}
#topmenu ul ul a:hover {
color: #fff;
}
#topmenu ul li:hover > a,
#topmenu ul ul :hover > a {
border-bottom: 1px solid #fff;
}
#topmenu li ul {
position: absolute;
display: none;
}
#topmenu li:hover ul {
display: block;
}
#topmenu li ul li {
float: none;
display: inline;
}
#topmenu ul li li a,
#topmenu ul li li li a {
color:#444444;
line-height:1.9em;
}
#topmenu ul li li a:hover,
#topmenu ul li li li a:hover {
color:#444444;
text-decoration:underline;
}
#topmenu ul ul:after {
display: table;
clear: both;
}
.post-in-category #topmenu ul li.current-menu-item a,
#topmenu ul li.current-menu-item a,
#topmenu ul li.current_page_item a {
border-bottom: 1px solid #fff;
}
#topmenu select {
display: none;
}
#topmenu div {
background-color: #0B3DB0;
height:38px;
width:100%;
}
In addition to
#topmenu li:hover ul {
display: block;
}
you could have a line for
#topmenu li ul:hover {
display: block;
}
( you could just combine the selectors and save a line)
Because you're :hovering the parent <li> and it's triggering the display:block on the child <ul> but once you :hover the <ul> it's back to display:none;. The absolutely positioning of the <ul> puts it out of the <li> :hover / hit area.
Another thing that might be helpful is when hovering the dropdown ul to set the z-index of the dropdown ul to 1.
#topmenu li:hover > ul
{ display: block; z-index:1; }
change from this:
#topmenu li:hover ul {
display: block;
}
to this:
#topmenu li:hover > ul {
display: block; position:relative; top:-7px;
}
See fiddle here
#topmenu {
padding: 5px 0 0 0;
height: 65px;
}
#topmenu ul {
margin:0 10px;
}
#topmenu ul li {
float: left;
position: relative;
font-family: 'Lato',sans-serif;
font-size: 13px;
font-weight: 400;
letter-spacing: 1px;
text-transform: uppercase;
margin: 0 30px 0 0;
color: #333;
}
#topmenu ul li {
font-family: 'Lato',sans-serif;
font-size: 13px;
font-weight: 400;
letter-spacing: 1px;
text-transform: uppercase;
margin: 0;
color: #333;
}
#topmenu ul ul {
display: none;
float: left;
position: absolute;
top: 2em;
left: -5px;
z-index: 99999;
padding: 5px 0 0 5px;
margin: 14px 0 0 0;
background: #fff;
border: 1px dashed #c1c1c1;
border-top: none;
}
#topmenu ul ul li{
position:relative;
text-indent:0;
}
#topmenu ul ul ul {
left: 100%;
top: -20px;
border: 1px dashed #c1c1c1;
}
#topmenu ul ul li,
#topmenu ul ul ul li {
min-width: 130px;
margin: 0;
padding: 0;
border: none;
background: #fff;
display: block;
float: none;
position: relative;
min-width: 150px;
clear: both;
}
#topmenu >li ul>li
{
list-style:none;
text-indent:0;
position:relative;
}
#topmenu ul ul a {
line-height: 1.5em;
padding: .5em .5em .5em 1em;
width: 10em;
height: auto;
}
#topmenu ul ul a:hover,
#topmenu ul ul:hover {
display: inline-block;
}
#topmenu ul ul a:after {
position: absolute;
right: 10px;
top: 50%;
margin-top: -6px;
display: inline-block;
font-style: normal;
font-weight: 400;
line-height: 1;
}
#topmenu ul li a {
text-decoration: none;
color: #fff;
display: block;
height: 30px;
line-height: 3.1em;
}
#topmenu ul li:hover > ul {
display: block;
}
#topmenu ul ul a:hover {
color: #fff;
}
#topmenu ul li:hover > a,
#topmenu ul ul :hover > a {
border-bottom: 1px solid #fff;
}
#topmenu li ul {
position: absolute;
display: none;
}
#topmenu li:hover > ul {
display: block; position:relative; top:-7px;
}
#topmenu li ul li {
float: none;
display: inline;
}
#topmenu ul li li a,
#topmenu ul li li li a {
color:#444444;
line-height:1.9em;
}
#topmenu ul li li a:hover,
#topmenu ul li li li a:hover {
color:#444444;
text-decoration:underline;
}
#topmenu ul ul:after {
display: table;
clear: both;
}
.post-in-category #topmenu ul li.current-menu-item a,
#topmenu ul li.current-menu-item a,
#topmenu ul li.current_page_item a {
border-bottom: 1px solid #fff;
}
#topmenu select {
display: none;
}
#topmenu div {
background-color: #0B3DB0;
height:38px;
width:100%;
}
<nav id="topmenu" role="navigation"><div id="nav" class="menu-container">
<ul id="menu-main">
<li id="menu-item-1" class="current-menu-item menu-item-1">News</li>
<li id="menu-item-2" class="menu-item-2">Services</li>
<li id="menu-item-3" class="menu-item-3">About us
<ul class="sub-menu">
<li id="menu-item-4" class="menu-item-4">Contact</li>
</ul>
</li>
</ul></div></nav>
Add Below CSS to your Style. See JSFiddle Here.
#topmenu #nav ul li ul{
display: none;
}
#topmenu #nav ul li:hover ul{
display: block;
}
It works for me. Hope this will help!
I'm trying to make my website fully responsive, and I'm stumbling upon the navigation bar; I cannot seem to make it responsive. My coding is as following:
<div class = "navbar" >
<nav>
<ul>
<li>Collectie
<ul>
<li>Zomercollectie</li>
<li>Wintercollectie</li>
<li>Kerstcollectie</li>
</ul>
</li>
<li>Over ons</li>
<li>Contact</li>
</ul>
</nav>
</div>
And the CSS as following:
.navbar
{
height: 50px;
width: 920px;
max-width:100%;
background-color:#2d2d2d;
margin-left:auto;
margin-right:auto;
}
/* NAVBAR CSS */
nav ul ul
{
display: none;
}
nav ul li:hover > ul
{
display: block;
}
nav ul {
background:#2d2d2d;
color:ffffff;
font-size:30px;
padding: 0 20px;
list-style: none;
position: relative;
display: inline-table;
margin-top: 0;
}
nav ul:after
{
content: "";
clear: both;
display: block;
}
nav ul li
{
float: left;
}
nav ul li:hover
{
background: #4b545f;
}
nav ul li:hover a
{
color: #fff;
}
nav ul li a {
display: block;
padding: 7px 93px;
color: #757575;
text-decoration: none;
}
nav ul ul
{
background: #5f6975;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li
{
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a
{
padding: 15px 40px;
color: #fff;
}
nav ul ul li a:hover
{
background: #4b545f;
}
/* END of NAVBAR CSS */
I would like to make it scale the whole thing, including fonts when they are too big, and without the buttons stacking vertically.
Any idea?
Allright, i've fixed it. It was in the height element. I shouldn't have used them at all.
I'm creating a drop down menu, the top level list item will display a username.
I have a bit of an issue because I want the dropdown menu to be the same width at the top level list item being hovered over.
However, if I set ul li ul li to width 100%, it takes 100% of the overall container, not of the ul above it. I think because ul ul's are position absolute?
Any ideas how I can make the drop down menu's the same width as the parent list item?
The page can be seen here.
and here's the HTML
<ul>
<li><span aria-hidden="true" data-icon="a"> A long name here
<ul>
<li>View Profile</li>
<li>Edit Profile</li>
<li>Settings</li>
<li>My Payments</li>
</ul>
</li>
<li> <span aria-hidden="true" data-icon="c"> Online</li>
<li> Log Out</li>
</ul>
CSS
.head-link ul ul {
display: none;
}
.head-link ul li:hover > ul {
display: block;
}
.head-link ul {
list-style: none;
position: relative;
display: inline-table;
}
.head-link ul li {
float: left;
border-top-left-radius: 0.5em;
border-top-right-radius: 0.5em;
height: 2em;
width: auto;
padding: 0.5em 0.98em;
}
.head-link ul li:hover {
background: #ffffff;
}
.head-link ul li:hover a {
color: #434343;
border-bottom: none;
}
.head-link ul li a {
display: block;
color: #ffffff;
text-decoration: none;
}
.head-link ul ul {
background: #ffffff;
border-radius: 0px;
padding: 0;
position: absolute;
top: 99%;
left: 0;
text-align: left;
border-bottom-left-radius: 0.5em;
border-bottom-right-radius: 0.5em;
padding-bottom: 0.8em;
padding-top: 0.5em;
box-shadow: 0px 0.3em 0.4em rgba(0,0,0,0.3);
}
.head-link ul ul li {
float: none;
position: relative;
padding: 0em;
}
.head-link ul ul li a {
padding: 0.5em 1.24em;
color: #434343;
border-bottom-left-radius: 0.5em;
border-bottom-right-radius: 0.5em;
}
.head-link ul ul li a:hover {
background: #ffffff;
text-decoration: underline;
}
.head-link ul ul ul {
position: absolute;
left: 100%;
top:0;
}
Here's how I made it look like this:
Just modify these rules:
.head-link ul li {
position: relative;
... /* Keep all current rules */
}
.head-link ul li ul {
width: 100%;
... /* Keep all current rules */
}
So I'm working on a drop menu and I'd like each menu item to have an auto width. i.e. the background to expand to the width of the menu item rather than having an overall fixed width for all the UL. I thought that giving the ul li an auto width would sort it but it seems not. What am I missing?
<ul id="nav">
<li><a class="last" href="#">MENU ▼</a>
<ul>
<li>Short</li>
<li>Very Long</li>
</ul>
</li>
#nav {
height: 1;
list-style-type: none;
padding-top: 1.25em;
margin-top: 0em;
}
#nav li {
float: right;
position: relative; padding: 0;
}
#nav li a {
display: block;
font-size: 14px;
padding: 0 1em;
margin-bottom: 1em;
color: #333;
text-decoration: none;
border-left: 1px solid #333;
}
#nav .last, #nav li ul li a {
border-left: none;
}
#nav li a:hover, #nav li a:focus {
color: #666;
}
#nav li ul {
opacity: 0;
position: absolute;
right: 0em;
list-style-type: none;
padding: 0; margin: 0;
}
#nav li:hover ul {
opacity: 1;
}
#nav li ul li {
float: none;
position: static;
width: auto;
height: 0;
line-height: 0;
background: none;
text-align: right;
margin-bottom: .75em;
}
#nav li:hover ul li {
height: 25px;
line-height: 2.5em;
}
#nav li ul li a {
background: #222;
}
#nav li ul li a:hover {
color: #666;
}
Your #nav li style is being applied to all child li elements, so you need to use the ">", which selects only the immediate child.
Here is updated CSS which fixes the problem. I also commented out some other CSS that was interfering:
#nav {
height: 1;
list-style-type: none;
padding-top: 1.25em;
margin-top: 0em;
}
#nav > li { /* Added ">" */
float: right;
position: relative;
padding: 0;
}
#nav li a {
display: inline-block; /* was block */
font-size: 14px;
padding: 0 1em;
margin-bottom: 1em;
color: #333;
text-decoration: none;
border-left: 1px solid #333;
}
#nav .last, #nav li ul li a {
border-left: none;
}
#nav li a:hover, #nav li a:focus {
color: #666;
}
#nav li ul {
opacity: 0;
/*position: absolute;
right: 0em; */
list-style-type: none;
padding: 0; margin: 0;
}
#nav li:hover ul {
opacity: 1;
}
#nav li ul li {
/*float: none;
position: static;
width: auto;*/
height: 0;
line-height: 0;
background: none;
text-align: right;
margin-bottom: .75em;
}
#nav li:hover ul li {
height: 25px;
line-height: 2.5em;
}
You are using display: block for your links. That causes them to fill the available space. That's why they are all the same width. And float: right is contributing to the general narrowness. Use inline-block instead of block and prevent the link wrapping by using white-space: nowrap:
Demo: http://jsfiddle.net/neJty/2/
I have a menu with each item a different font-size/height -- looks fine in everything but IE which cuts the items in half...
Here's the HTML:
<header>
<div class="inside">
<h1>Ballroom Rocks LOGO</h1>
<nav>
<ul>
<li>Home</li>
<li>The Show</li>
<li>Dancers</li>
<li>Creative Team</li>
<li>The Buzz</li>
<li>Corporate Events</li>
<li>Media</li>
<li>News</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
And the relevent CSS:
ul li {padding: 0; margin:0 0 2px 0; height: auto; line-height: auto; overflow: visible; display: block;vertical-align:top;}
ul li a{font-family: Impact; text-transform: uppercase; text-decoration: none; opacity: .25; color: white; margin:0; display: block; vertical-align: top; overflow: visible; line-height: auto;}
ul li a:hover, nav ul li a:hover, nav ul li a.active{color:#06c;opacity: 1;}
ul li a#nav-home{display: block; font-size:26px; height: 21px; line-height: 21px;}
ul li a#nav-theshow{display: block; font-size:27px; height: 21px; line-height: 21px; padding-top: 2px; }
ul li a#nav-dancers{display: block; font-size:35px; height: 26px; line-height: 26px; padding-top: 4px;}
ul li a#nav-cteam{display: block; font-size:26px; height: 23px; line-height: 23px;}
ul li a#nav-thebuzz{display: block; font-size:34px; height: 25px; padding-top: 3px;}
ul li a#nav-cevents{display: block; font-size:22px; height: 21px; }
ul li a#nav-media{display: block; font-size:46px; height: 30px; padding-top: 7px;}
ul li a#nav-news{display: block; font-size:34px; height: 24px; padding-top: 3px;}
ul li a#nav-blog{display: block; font-size:24px; height: 20px; padding-top: 1px;}
ul li a#nav-contact{display: block; font-size:28px; height: 23px; padding-top: 1px;}
And a link: http://www.mindsmack.com/clients/BallroomRocks/index.html
I've tried various versions and line-heights and padding... Any ideas what could be causing this?
(edit: problem was in IE7)
I cleaned up the css and got rid of the vertical-align and it works fine in ie7 now
header{position: absolute; left: 0; top: 0;}
header h1 a{display: block; width: 320px;background: url('../images/logo.jpg'); margin:0; text-indent: -9999px; padding: 0;}
ul{list-style-type: none; margin: 50px 0 0 70px; width: 250px;}
ul li {padding: 0; margin:0 0 2px 0; display: block;}
ul li a{font-family: Impact; text-transform: uppercase; text-decoration: none; opacity: .25; color: black; margin:0; display: block; line-height:.8em;}
ul li a:hover, nav ul li a:hover, nav ul li a.active{color:#06c;opacity: 1;}
ul li a#nav-home { font-size:26px; }
ul li a#nav-theshow { font-size:27px; }
ul li a#nav-dancers { font-size:35px; }
ul li a#nav-cteam { font-size:26px; }
ul li a#nav-thebuzz { font-size:34px; }
ul li a#nav-cevents { font-size:22px; }
ul li a#nav-media { font-size:46px; }
ul li a#nav-news { font-size:34px; }
ul li a#nav-blog { font-size:24px; }
ul li a#nav-contact { font-size:28px; }