I have been asked to look at this site http://www.edowa.org.au/ but can't find the problem.
The second level menu items are aligned correctly in IE10.0.5 and FF35.0.1 but not in Chrome (latest version). In Chrome the second level menu items are pushed to the right.
Here is the CSS
/* MAIN NAVIGATION - TABS
----------------------------------------- */
#nav {
clear:both;
width: 900px;
height: 29px;
margin: 0 auto;
padding:5px 20px 0 20px;
}
#nav ul {
width: 900px;
display: inline-table;
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
display: table-cell;
text-align: center;
margin: 0;
padding: 0;
}
*:first-child+html #nav li {
float: left;
}
*html #nav li {
float: left;
}
#nav li a {
border: 0;
display: block;
font-weight: bold;
font-size: 14px;
line-height: 29px;
color: #59523f;
text-decoration: none;
}
*:first-child+html #nav li a {
padding:0 33px;
}
#nav li a.current,
#nav li a:hover {
color: #FFFFFF;
background: url(../images/li-bg-hover.jpg) repeat-x;
}
/*_________second level menu__________*/
#nav li ul {
position: absolute;
z-index: 20;
width: 175px;
height: auto;
margin: 0;
padding: 0;
left: -999em;
}
#nav li ul li {
margin: 0;
padding: 0;
width: 175px;
min-height: 31px;
display:block;
}
#nav li:hover ul,
#nav li li:hover ul,
#nav li.sfhover ul,
#nav li li.sfhover ul {
left: auto;
}
*:first-child+html #nav li:hover,
*:first-child+html #nav li li:hover,
*:first-child+html #nav li.sfhover,
*:first-child+html #nav li li.sfhover {
left: auto;
position: static;
}
#nav li ul li a {
padding: 0 10px;
display: block;
width: 175px !important;
line-height: 31px;
height:auto;
font-weight: normal;
font-size: 12px;
text-align: left;
color:#d6d4af;
background: url(../images/li-li-bg.png) repeat-x;
}
#nav li ul li a:hover {
color: #FFFFFF;
background: url(../images/li-li-bg-hover.png) repeat-x;
}
Here is the html
<div id="nav">
<ul>
<li><a href="/" class="current" >Home</a></li>
<li><a href="/meet-the-edo/" class="link" >Who We Are</a></li>
<li><a href="/services/" class="link" >What We Do</a>
<ul>
<li><a href="/services/legal-advice-2/" >Legal Advice</a></li>
</ul>
</li>
<li><a href="/discover/" class="link" >Discover</a>
<ul>
<li><a href="/discover/publications/" >Publications</a></li>
<li><a href="/discover/factsheets/" >Factsheets</a></li>
<li><a href="/discover/newsletters/" >Newsletters</a></li>
<li><a href="/discover/archive/" >Archive</a></li>
<li><a href="/discover/e-bulletins/" >E-Bulletins</a></li>
<li><a href="/discover/community-legal-education/" >Community Legal Education</a></li>
</ul>
</li>
<li><a href="/participate/" class="link" >Participate</a>
<ul>
<li><a href="/participate/join/" >Join</a></li>
<li><a href="/participate/donate/" >Donate</a></li>
<li><a href="/participate/volunteer/" >Volunteer</a></li>
<li><a href="/participate/jobs/" >Jobs</a></li>
</ul>
</li>
<li><a href="/links/" class="link" >Links</a></li>
<li><a href="/contact/" class="link" >Contact</a></li>
Any advice much appreciated.
Try changing your li left: auto; to left: 0; and add position: relative; to #nav li. Like this:
#nav li {
list-style: none;
display: table-cell;
text-align: center;
margin: 0;
padding: 0;
position: relative; /*Added*/
}
#nav li:hover ul,
#nav li li:hover ul,
#nav li.sfhover ul,
#nav li li.sfhover ul {
left: 0; /*Added*/
}
I've created a fiddle here (added colors for testing purposes).
I think it is a little mess within absolute positioning and "auto" value.
Please, try changing the following:
#nav li {
list-style: none;
display: table-cell;
text-align: center;
margin: 0;
padding: 0;
position: relative; /* new line */
}
#nav li:hover ul,
#nav li li:hover ul,
#nav li.sfhover ul,
#nav li li.sfhover ul {
left: 0; /* changed value */
}
It should do it on all major browsers.
#nav{
float : right;
/* or float = left */
}
Related
I am using this CSS code for a horizontal menu:
* {
margin: 0 auto;
padding: 0;
}
a{
text-decoration: none;
}
#nav ul {
list-style-type: none;
height: 32px;
background:#F36F25;
width: auto;
}
#nav ul li {
float: left;
height: 32px;
position: relative;
}
#nav ul li a {
float:left;
line-height: 32px;
color:#fff;
width: 86px;
padding: 0 7px;
text-align: center;
}
#nav ul li:hover {
background:#FFFFFF;
}
#nav ul li a:hover {
color:#000;
}
#nav ul li:hover > ul {
display: block;
}
#nav ul li ul {
display: none;
position: absolute;
top: 32px;
left: 0;
width: 100px;
height: auto;
}
#nav ul li ul li, #nav ul li ul li a {
float: none;
display: block;
}
#nav ul li ul li ul {
top: 0;
left: 100px;
}
i am trying to get the parent link to stay with the same text color when hovering over a child item. How do i do this? I have also created a fiddle here:
http://jsfiddle.net/gfmxjtr5/1/
You could set to color of the links when the parent <li> is :hovered:
Updated Example
#nav ul li:hover > a {
color: #000;
}
* {
margin: 0 auto;
padding: 0;
}
a{
text-decoration: none;
}
#nav ul {
list-style-type: none;
height: 32px;
background:#F36F25;
width: auto;
}
#nav ul li {
float: left;
height: 32px;
position: relative;
}
#nav ul li a {
float:left;
line-height: 32px;
color:#fff;
width: 86px;
padding: 0 7px;
text-align: center;
}
#nav ul li:hover {
background:#FFFFFF;
}
#nav ul li:hover > a {
color:#000;
}
#nav ul li:hover > ul {
display: block;
}
#nav ul li ul {
display: none;
position: absolute;
top: 32px;
left: 0;
width: 100px;
height: auto;
}
#nav ul li ul li, #nav ul li ul li a {
float: none;
display: block;
}
#nav ul li ul li ul {
top: 0;
left: 100px;
}
<div id="nav">
<ul>
<li>Home</li>
<li>Account
<ul>
<li>Company Details</li>
<li>Contacts</li>
<li>My Price Tariffs</li>
</ul>
</li>
<li>Billing
<ul>
<li>Billing Info</li>
<li>Invoices</li>
</ul>
</li>
<li>Tickets
<ul>
<li>View Tickets</li>
<li>Open Ticket</li>
</ul>
</li>
<li>Logout</li>
</ul>
</div>
I have dropdown menu (css only)
JSFIDDLE:
>>> jsfiddle <<<
HTML:
<div class="menu">
<ul>
<li>Home</li>
<li>Tutorials
<ul>
<li>Photoshop</li>
<li>Illustrator</li>
<li>Web Design
<ul>
<li>HTML
<ul>
<li>HTML 4 and less
<ul>
<li>TEST 1</li>
<li>TEST 2</li>
<li>TEST 3</li>
</ul>
</li>
<li>HTML 5</li>
</ul>
</li>
<li>CSS</li>
</ul>
</li>
</ul>
</li>
<li>Articles
<ul>
<li>Web Design</li>
<li>User Experience</li>
</ul>
</li>
<li>Inspiration</li>
</ul>
</div>
CSS:
.menu {
margin: 100px auto;
text-align: center;
}
.menu ul ul {
display: none;
}
.menu ul li:hover > ul {
display: block;
white-space:nowrap;
}
.menu ul {
background: #efefef;
padding: 0;
list-style: none;
position: relative;
display: inline-table;
}
.menu ul:after {
content: "";
clear: both;
display: block;
}
.menu ul li {
float: left;
}
.menu ul li:hover {
background: blue;
}
.menu ul li:hover a {
color: #fff;
}
.menu ul li a {
display: block;
padding: 10px;
color: #757575;
text-decoration: none;
}
.menu ul ul {
background: green;
padding: 0;
position: absolute;
top: 100%;
}
.menu ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid yellow;
position: relative;
}
.menu ul ul li a {
padding: 10px;
color: #fff;
display: block;
}
.menu ul ul li a:hover {
background: red;
}
.menu ul ul ul {
position: absolute;
left: 100%;
top:0;
padding: 0;
}
.menu ul ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid pink;
position: relative;
}
.menu ul ul ul li a {
padding: 10px;
color: #fff;
display: block;
}
.menu ul ul ul li a:hover {
background: red;
}
.menu ul ul ul ul {
position: absolute;
left: 100%;
top:0;
}
As you see at last submenu, they are not as upper menus. They wrap text and shrink (minimal width).
Q:
How to make them equal (same width as parent) and no text wrap ?
How to simplify this menu (parent, children, ul > li etc.) so I don't need to make new style for each new sub-menu
Thank you in advance.
Try this - this works great on Chrome:
* { white-space: nowrap; box-sizing: border-box; }
.menu {
margin: 100px auto;
text-align: center;
}
/* ULs */
.menu ul {
padding: 0;
position: absolute;
display: none;
background: green;
top: 0;
position: absolute;
list-style: none;
}
.menu > ul {
background: #efefef;
position: relative;
display: inline-table;
}
.menu > ul > li > ul {
top: 100%;
}
.menu li:hover > ul {
display: block;
}
.menu ul ul ul {
left: 100%;
border-left: 1px solid white;
top: -1px;
}
/*LIs*/
.menu li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid yellow;
position: relative;
}
.menu > ul > li {
float: left !important;
border: none;
}
.menu ul li:hover {
background: blue;
}
/* As */
.menu a {
display: block;
padding: 10px;
color: #757575;
text-decoration: none;
}
.menu li:hover a {
color: #fff;
}
.menu ul ul a:hover {
background: red;
}
Also, consider this isn't a good practice (User-experience-wise) to have so many sub menus. You should attempt to re-design your UI to match the usage of your website in a way that won't make the user frustrated.
I have the menu using css. The second level menu pops out right one levwl below the actual menu item hover. In the below example, i want the second level appear in line to "Keyboard Entry" menu item. I have attached the html file.
CSS:
#navbar {
margin: 0;
padding: 0;
height: 1.8em;
background-color: #5e8ce9;
}
#navbar li {
list-style: none;
float: left;
}
#navbar li a
{
display: block;
padding: 4px 10px 4px 10px;
background-color: #5e8ce9;
color: #fff;
font-size: 0.85em;
text-decoration: none;
}
#navbar li ul {
display: none;
width: 10em; /* Width to help Opera out */
background-color: #69f;}
#navbar li:hover ul, #navbar li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0; }
#navbar li:hover li, #navbar li.hover li {
float: none; }
#navbar li:hover li a, #navbar li.hover li a {
background-color: #69f;
border-bottom: 1px solid #fff;
color: #000; }
#navbar li li a:hover {
background-color: #8db3ff; }
#navbar li:hover ul li:hover ul, #navbar li.hover ul li.hover ul
{
display: block;
position: absolute;
margin-left: 100%;
top:1;
}
#navbar li:hover ul ul, #nav li.sfhover ul ul {
left: -999em;
}
#navbar li:hover ul, #navbar li li:hover ul, #navbar li.sfhover ul, #navbar li li.sfhover ul {
left: auto;
}
MY HTML:
<ul id="navbar">
<li>File
<ul>
<li>Match</li>
<li>View</li>
<li>Exit</li>
</ul>
</li>
<li>Data
<ul>
<li>Import Carbon CSV Files</li>
<li>Rework Carbon Components</li>
<li>Keyboard Entry
<ul>
<li>Orifice Data Entry</li>
<li>Leaflets Data Entry</li>
<li>Rings Data Entry</li>
</ul>
</li>
<li>Specifications</li>
<li>Matched Components</li>
</ul>
</li>
<li>Reports
<ul>
<li>Audit Reports</li>
</ul>
</li>
<li>Admin
<ul>
<li>Security</li>
</ul>
</li>
</ul>
Demo: http://jsbin.com/ewolik/1/edit
Simple dropdown Menu:
http://jsbin.com/ewolik/2/edit
Position the first level of Li elements relative:
#navbar li {
list-style: none;
float: left;
position:relative;
}
Position the second level ul with absolutely with an top offset equal to the first level lis height:
#navbar li:hover ul, #navbar li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
top:1.8em;
}
Here's the site I'm working on: http://argumentinamerica.com/
The menu goes like this:
<div id="menu">
<ul id="menu">
<li><span></span>Home</li>
<li class='has-sub'><span></span>Units
<ul>
<li class='has-sub'>Unit 1</li>
<ul>
<li>Read About It</li>
<li>Write About It</li>
<li>Hear About It</li>
<li>Speak About It</li>
<li>Read About It</li>
<li>Write About It</li>
</ul>
<li class='has-sub'>Unit 2</li>
<li class='has-sub'>Unit 3</li>
<li class='has-sub'>Unit 4</li>
<li class='has-sub'>Unit 5</li>
</ul>
<li><span></span>Teacher Center</li>
<li><span></span>About</li>
<li><span></span>Give 1</li>
</ul>
</div>
And the css is like this:
#menu {
margin: 0; padding: 2px 0px 2px 0px;
list-style-type: none;
height: 2.4em;
}
#menu ul, #menu li, #menu span, #menu a {
margin: 0;
padding: 0;
position: relative;
}
#menu li {
float: left;
width: 20%;
}
#menu a {
display: block;
margin: 1px;
height: 2.4em;
font-size: 10px;
line-height: 2.4em;
text-decoration: none;
text-transform: uppercase;
text-align: center;
background: #ffcc66;
color: #996600;
}
#menu span {
position: absolute; top: 8px; left: 8px;
width: 8px; height: 8px;
background: #ff9933;
}
#menu a:hover {
background: #cc3300;
color: #ffcc66;
}
#menu ul{
list-style-type: none;
}
#menu .has-sub {
z-index: 1;
}
#menu .has-sub:hover > ul {
display: list-item;
}
#menu .has-sub ul {
display: none;
position: absolute;
left:0;
}
#menu .has-sub ul li {
*margin-bottom: -1px;
position: relative;
width: 100%;
height: 2.6em;
line-height: 2.4em;
}
#menu .has-sub ul li a {
background: #ff9944;
font-size: 11px;
color: ffcc66;
}
#menu .has-sub ul li:hover a {
background: #ff6633;
color: 993300;
}
#menu .has-sub {
z-index: 1;
}
#menu .has-sub:hover > ul {
display: list-item;
}
#menu .has-sub .has-sub ul {
display: none;
position: absolute;
left:0;
}
#menu .has-sub .has-sub ul {
display: none;
position: absolute;
left:0;
}
#menu .has-sub .has-sub ul li {
*margin-bottom: -1px;
position: relative;
width: 100%;
height: 2.6em;
line-height: 2.4em;
}
#menu .has-sub .has-sub ul li a {
background: #ff9944;
font-size: 11px;
color: ffcc66;
}
#menu .has-sub .has-sub:hover > ul {
display: block;
}
#menu .has-sub .has-sub ul li:hover a {
background: #ff6633;
color: 993300;
}
The third tier is under Units: Unit 1.
I looked at Displaying third tier submenus properly with css only menu and https://stackoverflow.com/questions/13775342/adding-third-tier-to-drop-down-menu and DropDown Menu won't to display on hover and a lot of other questions trying to figure out what's wrong, but I still can't get the third tier to display. I would really appreciate someone taking a look and telling me what I'm missing.
First, the CSS which causes the third tier to appear is not correct:
#menu .has-sub .has-sub:hover > ul {
display: block;
} In this code the '>' targets an ul which is a direct child of a .has-sub:hover element - in your HTML the 3rd tier ul is not a child of the li.has-sub element. You could change the > to a +, which means it targets an ul element directly following the li.has-sub element which for this code causes the third tier to appear. The next problem is that the third tier items appear directly underneath the second tier, so they need to be moved somewhere - see the example code.
http://codepen.io/nztim/pen/GpbqK
Now you need to get the menu to stay visible when you hover over the third tier, but I'll leave that to you, all the best :)
I have a problem with a vertical css menu with 3-level submenus.The last submenu isn't aligned as it should be and I don't know where's the problem.
Here's a demo http://jsfiddle.net/pPckk/1/
And if You can't open jsfiddle, here's the code:
<div id="global-nav">
<ul class='parent'>
<li class="smt">cat1</li>
<li class="c1">
<ul class='child child1'>
<li class="smt">cat1.1</li>
<li class="smt">cat1.2</li>
<li class="c1">
<ul class='child child2'>
<li class="smt">cat1.2.1</li>
<li class="c1">
<ul class='child child3'>
<li class="smt">cat1.2.1.1</li>
</ul>
</li>
</ul>
</li>
<li class="smt">cat1.3</li>
<li class="smt">cat1.4</li>
</ul>
</li>
<li class="smt">cat2</li>
<li class="c1">
<ul class='child child1'>
<li class="smt">cat2.1</li>
</ul>
</li>
</ul>
</div>
#nav, #nav ul {
line-height: 1.5em;
list-style-position: outside;
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
}
#nav a:link, #nav a:active, #nav a:visited {
background-color: #333333;
border: 1px solid #333333;
color: #FFFFFF;
display: block;
padding: 0 5px;
text-decoration: none;
}
#nav a:hover {
background-color: #FFFFFF;
color: #333333;
}
#nav li {
position: relative;
width: 100px;
}
#nav ul {
display: none;
left: 100px;
position: absolute;
width: 192px;
top:0;
}
#nav li ul a {
float: left;
width: 192px;
}
#nav ul ul {
top:0;
}
#nav li ul ul {
left: 192px;
top:25px;
margin: 0 0 0 13px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul {
display: none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul {
display: block;
}
Just add
#nav li ul ul ul {
left: 192px;
top:0px;
margin: 0 0 0 13px;
}
and you are done...
Below is what I have and it is working perfect... Yipee!!! I did it first time and worked!!!
<html>
<head>
<style>
#nav, #nav ul {
line-height: 1.5em;
list-style-position: outside;
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
}
#nav a:link, #nav a:active, #nav a:visited {
background-color: #333333;
border: 1px solid #333333;
color: #FFFFFF;
display: block;
padding: 0 5px;
text-decoration: none;
}
#nav a:hover {
background-color: #FFFFFF;
color: #333333;
}
#nav li {
position: relative;
width: 100px;
}
#nav ul {
display: none;
left: 100px;
position: absolute;
width: 192px;
top:0;
}
#nav li ul a {
float: left;
width: 192px;
}
#nav ul ul {
top:0;
}
#nav li ul ul {
left: 192px;
top:25px;
margin: 0 0 0 13px;
}
#nav li ul ul ul {
left: 192px;
top:0px;
margin: 0 0 0 13px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
display: none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul {
display: block;
}
</style>
</head>
<body>
<ul id="nav">
<li>cat1<ul class="jaccordion">
<li>cat1.1<ul class="jaccordion"></ul></li>
<li>cat1.2<ul class="jaccordion">
<li>cat1.2.1<ul class="jaccordion">
<li>cat1.2.1.1<ul class="jaccordion"></ul></li></ul></li></ul></li>
<li>cat1.3<ul class="jaccordion"></ul></li>
</ul></li>
<li>cat2<ul class="jaccordion">
<li>cat2.1<ul class="jaccordion"></ul></li></ul></li>
</ul>
</body>
</html>
The problem is the following rule:
#nav li ul ul {
left: 192px;
top:25px;
margin: 0 0 0 13px;
}
since it not only applies to the second, but also to the third level.
Add a rule for your third level ul to correct that.
I suggest using classes on the uls in such menus: <ul class="first-level">...
This allows more precise styling and shortens the selectors.