How do I place the submenu links under each other. Right now they jump under the whole menu and is placed right next each other. And the links after goes under the submenu. I know its something with position but doesnt know which one and were.
CSS
#nav {
background-color: #8D8084;
}
#nav ul {
margin:0;
list-style-type: none;
padding: 12px;
}
#nav li {
display:inline;
}
#nav a {
}
#nav ul li a {
text-decoration:none;
color:#fff;
padding-right: 60px;
padding-top: 15px;
padding-bottom: 13px;
padding-left: 50px;
margin: -12px;
background:#8D8084;
font-family: Candara,"Trebuchet MS", Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
text-transform:uppercase;
}
#nav ul li.active a {
background-color:#A4999D;
color:#FFFFFF;
}
#nav a:hover {
background-color:#A4999D;
color:#FFF;
}
#nav ul ul {
display: none;
}
#nav ul li:hover > ul {
display: block;
}
You have to change so much in your style. Here is the sample i have created.
#nav {
background-color: #8D8084;
}
#nav ul {
margin:0;
list-style-type: none;
padding: 12px;
}
#nav li {
display:inline;
position:relative;
}
#nav ul ul li
{
display:block;
}
#nav ul li a {
text-decoration:none;
color:#fff;
padding-right: 60px;
padding-top: 15px;
padding-bottom: 13px;
padding-left: 50px;
margin: -12px;
background:#8D8084;
font-family: Candara,"Trebuchet MS", Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
text-transform:uppercase;
}
#nav ul li.active a {
background-color:#A4999D;
color:#FFFFFF;
}
#nav a:hover {
background-color:#A4999D;
color:#FFF;
}
#nav ul ul {
display: none;
position:absolute;
top:20px;
left:0;
}
#nav ul li:hover > ul {
display: block;
}
DEMO
EDIT
New updated jsfiddle Here based on OP comment.
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 using this accordion menu module in joomla 2.5 http://extensions.joomla.org/extensions/structure-a-navigation/menu-systems/accordion-menus/21961 , and the problem is that the submenu items have a bigger font than the menus in the starting level. I found in the template .css file where I can edit the size of the starting level menus, but not for the submenus. Here's a screenshot how it looks http://img7.imageshack.us/img7/1180/tikx.png
And here is the css code of this module:
.accordion-menu a{
text-decoration: none;
background: none;
font-family: Arial;
}
.accordion-menu a:hover,
.accordion-menu a:visited,
.accordion-menu a:active,
.accordion-menu a:focus{
background: none;
}
.accordion-menu a img {
vertical-align:middle;
border: 0 none;
height: auto;
max-width: 100%;
padding:0 5px 0 0;
}
.accordion-menu li{
cursor: pointer;
background:none !important;
}
.accordion-menu .opened{
border-bottom:none!important;
}
.accordion-menu li:last-child, .accordion-menu > li.last {
border-bottom: 1px solid #1a1a1a!important;
margin-bottom:-1px;
}
.accordion-menu > li > .item-wrapper{
height: 35px;
display:inline-block;
width:100%;
}
.accordion-menu > li > .item-wrapper a{
line-height: 35px;
font-size: 12px;
font-weight: bold;
}
.accordion-menu li .item-wrapper .menu-button{
width: 16px;
height: 16px;
margin: 9px 5px 0px 5px;
overflow: hidden;
}
.accordion-menu li .item-wrapper .menu-link{
width:81%;
}
.accordion-menu li .ul-wrapper{
display: none;
}
.accordion-menu li ul li .item-wrapper{
/* height: 30px; */
display:inline-block;
width:97%;
}
.accordion-menu li ul li .item-wrapper a{
line-height:35px;}
ul.accordion-menu li ul {
margin:0px;
padding:0px;
margin-bottom:-1px;
}
ul.accordion-menu li ul li .item-wrapper{
margin:0px;
padding-left:12px!important;
}
ul.accordion-menu li ul li li{
margin:0px;
padding-left:0px!important;
}
The line you want to change is this:
.accordion-menu li ul li .item-wrapper a {
line-height:35px;
font-size: 12px; /* Add this in */
}
Hope this helps
I am unable to get rid of a gap between my nav bar and my submenu dropdown menu. You can view the issue here.
My css is here:
nav#nav{
float: left;
font: 14px/16px 'MuseoSlab500Regular', arial, helvetica, sans-serif;
margin-right: auto;
z-index: 99999;
/*background-image: url(../images/2blkbg.png);*/
/*background-repeat: repeat-x;*/
padding-left: 30px;
/*background-position: left bottom;*/
background-color: #000;
height: 53px;
display: block;
position: relative;
margin-top: 15px;
margin-bottom: 15px;
}
#nav ul{
list-style: none;
margin: 0;
padding: 0;
}
#nav ul li{
float: left;
margin-right: 0;
margin-bottom: 0;
padding-top: 0;
padding-right: 49px;
padding-bottom: 0;
padding-left: 0;
}
#nav ul a,#nav li.current-menu-ancestor a{
display: block;
height:83px;
line-height: 53px;
border-top-width: 0px;
border-top-style: solid;
border-top-color: #fff;
}
#nav ul .current_page_item a, #nav ul .current-menu-item a, #nav ul > .current-menu-parent a{
color:#a0ce4e;
text-decoration:none;
border-color:#a0ce4e;
}
#nav ul li{
position: relative;
}
#nav ul ul{
display: none;
position: absolute;
top: 0px;
left: 0;
width: 170px;
background: #edebeb;
z-index: 100000;
border-top: 3px solid #a0ce4e;
z-index: 99999;
}
#nav ul li:hover ul{
display: block;
}
#nav ul li ul li{
display: block;
float: none;
margin: 0;
padding: 0;
background-image: url(../images/blkbg.png);
background-repeat: repeat-x;
}
#wrapper #nav ul li ul li a{
background: url(../images/subnav_sep.jpg) repeat-x bottom left;
border: 0;
height: 30px;
text-indent: 20px;
font: 13px/30px 'PTSansRegular', Arial, Helvetica, sans-serif;
color: #333333 !important;
}
#wrapper #nav ul li ul li a:hover,#wrapper #nav ul li ul li.current-menu-item a{
background-color:rgba(255,255,255,0.5);
}
#nav ul ul ul{
display:none !important;
}
#nav ul ul li:hover ul{
display:block !important;
top:-3px;left:170px;
}
#nav select{
max-width:100%;
display:none;
}
#nav > li > a,#nav li.current-menu-ancestor a {
height:83px;
line-height:83px;
}
#nav ul ul {
top:86px;
}
Set the top and that will remove the excess of gap:
#nav ul ul {
top:86px;
}
Good you posted the url, since problem is not in the css you included. The problem is in this class:
#nav ul ul {
top:86px;
}
This top-offset should be set to 53px, the same height as your menu bar (nav#nav):
#nav ul ul {
top:53px;
}
This css-class actually is not in your css-stylesheet, but in your page itself. It is included in the <head></head>.
I'm having problems trying to figure out why my drop down navigation is settling under where they are suppose to in IE 6 and IE 7. Any help you could give me would be life saving for me.
the css file for the drop down nav
#nav-bar { /*Container Div*/
width: 950px;
height: 45px;
background-image:url(images/nav-bar-background.jpg);
background-repeat: no-repeat;
margin: 7px 0 2px 0;
z-index:999;
position:relative;
padding:0;
}
/*First Level*/
#nav-bar ul {
padding: 10px;
text-align:center;
margin-top: 6px;
}
#nav-bar ul li {
font-family: Arial, Helvetica, sans-serif;
color: #585858;
font-size: 14px;
display: inline;
padding:0 9px 40px 9px;
text-align:center;
}
#nav-bar ul li a {
text-decoration: none;
color: #585858;
}
/*First Level HOVER*/
#nav-bar ul li a:hover {
background-image: url(nav.png);
background-repeat: repeat-x;
}
* html ul#nav-bar li a {
height:37px;
margin-top:-10px;
}
ul#nav-bar>li a:hover, ul#nav-bar>li:hover {
background-position:0px -20px;
height:37px;
text-decoration:none;
}
* html ul#nav-bar li a:hover, * html ul#nav-bar li:hover, * html ul#nav-bar li.hover {
background-position:0px -20px;
height:27px;
}
#nav-bar ul ul {
background-image:url(images/secondtierbg.gif);
display:none;
}
#nav-bar ul ul li {
width:100px;
}
#nav-bar ul ul li a {
line-height:26px;
}
#nav-bar ul li {
font-family: Arial, Helvetica, sans-serif;
color: #585858;
font-size: 14px;
display: inline;
padding: 10px 9px 20px 9px;
text-align:center;
}
#nav-bar ul li a {
text-decoration: none;
color: #585858;
}
#nav-bar li:hover ul, #nav-bar li.hover ul {
display:inline;
position:absolute;
left:0;
top:44px;
width:950px;
height:26px;
margin:0 auto;
padding: 0;
z-index:200;
}
* html #nav-bar li.hover ul {
height:37px;
}
/*
#nav-bar li:hover li {
list-style:none;
display:inline;
color:#fff;
margin:5px 0px 0 20px;
padding:0;
}
*/
#nav-bar li:hover li a, #nav-bar li.hover li a {
color:#fff;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
text-align:center;
margin-top: 10px;
padding: 5px;
text-decoration:none;
}
#nav-bar li:hover li a:hover {
background:none!important;
}
/* THIS IS FOR DROP DOWNS */
#nav-bar ul ul ul {
visibility: hidden;
background-image: none;
display: block;
margin: 0px;
padding: 0px;
list-style: none;
}
#nav-bar ul ul ul li {
display: block;
width:100px;
height: auto;
font-family: Arial, Helvetica, sans-serif;
color:#FFF;
font-size: 11px;
background-color:maroon;
border-style: solid;
border-color: white;
border-width: 1px 1px 0 1px;
padding: 5px 0;
float: none;
clear: both;
}
#nav-bar ul ul #firstrange li {
width:100px;
}
#nav-bar ul ul ul li:last-child {
border-bottom: 1px solid white;
/*background:transparent;*/
}
#nav-bar ul ul ul li a{
cursor:pointer;
line-height:14px;
}
#nav-bar ul ul li:hover ul {
visibility: visible;
left:0;
position:absolute;
margin-top:0;
top:31px;
z-index:220;
}
#nav-bar ul ul li:hover {
position:relative;
}
the link is:
http://www.paysonsecure.com/colonialwarsct/
notes/advice/question:
Think about how you can make this work in two levels.
I had difficulties trying to get the second level to show in IE(Something you might wanna work on too).
Consider having a vertical sub-menu. It's easier for the user to navigate.
Question. How much content is going to go in each year? If not much, maybe you can group years content.
I re-worked the css for the navigation I think its a good start - if you wish.
http://jsfiddle.net/EvRem/1/
Hope this made sense
I'm having a weird problem with my navigation in IE 6. Only the first and last links of the navigation bounce when hovered over.
Why would this be happening?
My CSS file:
#navigation {
width: 930px;
height: 30px;
background-color: #f1faff;
text-align:center;
}
#navigation ul {
margin: 0px;
padding: 0px;
list-style: none;
line-height: 30px;
}
#navigation ul li {
display: inline;
}
#navigation ul li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #0067b4;
display: inline;
text-decoration: none;
text-transform: uppercase;
padding: 7px 50px;
}
#navigation ul li a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #5e5e5e;
display: inline;
text-decoration: none;
text-transform: uppercase;
padding: 7px 50px;
}
#navigation ul li a.first {
padding-left: 8px;
margin: 0px;
overflow: hidden;
border: 0px;
}
#navigation ul li a.last {
padding-right: 8px;
margin: 0px;
overflow: hidden;
border: 0px;
}
The site where this is happening is available at http://www.paysonsecure.com/protekskiracing/
I would add this to your global-ie6.css
#navigation ul { display: inline-block; }
Thanks gutierrezalex!! I had the same problem and it works adding {display: inline-block;} at my styles..it works for any browser:
ul.menu li a{
text-decoration:none;
color:black;
display:block;
padding:0;
margin:0;
display:inline-block;
}
ul.menu li a:hover{
background-color:#5cc2ed;
color:#ffffff;
display:inline-block;
}