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.
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 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 */
}
I am new in coding css, tried suggested answers related to my problem but nothing works, any help will be appreciated; I want to place my menu at the center of the page while retaining the container background covered the entire available width...
here is my html code:
<div id="nav">
<li>Home</li>
<li>About
<ul>
<li>History</li>
<li>Mission</li>
<li>Board of Directors</li>
<li>Location</li>
</ul>
<li>Facilities & Services
<ul>
<li>Services >>
<ul>
<li>Internal Medicine</li>
<li>OB-Gyne</li>
<li>Pediatrics</li>
<li>Surgery</li>
<li>Dental Care</li>
<li>Rehabilitation Medicine</li>
<li>Otorhinolaryngology(ENT)</li>
</ul>
<li>Facilities >>
<ul>
<li>Laboratory-Tertiary Level</li>
<li>Intensive & Critical Care</li>
<li>Nursery & Neonatal Care</li>
<li>Pediatric Intensive Care</li>
<li>Pulmonary Care</li>
<li>Ear Care Center</li>
<li>Hemodialysis Unit</li>
<li>Cardiac Diagnostics</li>
<li>Radiology Diagnostics</li>
<li>OB-Gyne Diagnostics</li>
</ul>
</ul>
</li>
<li>Healthcare Plans
<ul>
<li>Accredited HMOs</li>
<li>Executive Checkup</li>
<li>Credit Cards</li>
</ul>
</li>
<li>Doctors
<ul>
<li>""</li>
</ul>
</li>
<li>Careers</li>
<li>Archive</li>
<li>FAQ</li>
<li>Contact Us</li>
</ul>
</li>
</ul>
</div>
and my css code:
#nav {
Z-INDEX: 10;
text-align:center;
width: 100%;
height: 20px;
background: green;
position: relative;
padding:3px;
font-size: 13px;
list-style-type:none;
list-style-position:outside;
display:inline-block;
font-weight: bold;
line-height:1.5em;
float: none;
}
#nav-wrapper {
text-align: center;
}
#nav ul{
Z-INDEX: 10;
text-align:center;
position:relative;
width: 1000px;
display:inline-block;
margin:0;
padding:0;
background: none;
list-style-type:none;
list-style-position:outside;
line-height: 1.7em;
font-size: 13px;
float: none;
}
#nav li li{
Z-INDEX: 10;
text-align:left;
display:inline-block;
margin:0;
padding:0;
font-weight: normal;
list-style-position:outside;
border-bottom: 0.1em solid white;
color: #fff;
}
#nav a:link, #nav a:visited{
display:block;
padding:0px 5px;
color:#fff;
text-decoration:none;
background: green;
}
#nav ul a:hover{
Z-INDEX: 999;
background: light-green;
color: yellow;
position: relative;
}
#nav li ul a:hover{
Z-INDEX: 999;
background: green;
color: yellow;
position: relative;
}
#nav li li a:hover{
Z-INDEX: 999;
background: light-green;
color: yellow;
font-weight: bold;
position: relative;
}
#nav li a:hover{
background: light-green;
color: yellow;
Z-INDEX: 999;
position: relative;
}
#nav a:active{
color: yellow;
font-weight: bold;
}
#nav li{
float:left;
position:relative;
}
#nav ul {
position:absolute;
width:14em;
top:1.3em;
display:none;
}
#nav li ul a{
width:14.65em;
float:left;
}
#nav ul ul{
top:auto;
}
#nav li ul ul {
left:14.65em;
margin:0px 0 0 10px;
}
#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;
}
You could wrap the #nav with another div.
<div id="wrap">
<div id="nav"></div>
</div>
Remove the width from #nav, and apply the following CSS:
#wrap {
background: green;
text-align: center;
}
jsFiddle here - it works.
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;
}
I've created a css menu and submenu using style sheet.
the code and style sheet is as follows
<style type="text/css">
*{
padding:0px;
margin:0px;
}
#navdiv
{
border: 1px solid black;
text-align:center;
background:#FF0000;
border-radius: 10px;
width: 50%;
margin: 10px;
}
nav ul ul
{
display:none;
width:auto;
}
nav ul li:hover >ul
{
display:block;
}
nav ul
{
background: #ff0000;
padding: 0px;
border-radius: 0px;
list-style: none;
position: relative;
display: inline-table;
font-size: 12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
text-transform:uppercase;
}
nav ul li
{
float:left;
background: #ff0000;
border: 0px solid black;
}
nav ul li:hover
{
background: #DDDDDD;
}
nav ul li a
{
display:block;
padding: 10px 25px;
text-decoration: none;
color:#FFFFFF;
}
nav ul li:hover a
{
color:#000000;
}
nav ul ul
{
background: #ff0000;
position: absolute; top: 100%;
}
nav ul ul li
{
float: none;
border: 1px solid #000000;
position: relative;
color:#FFFFFF;
}
nav ul ul li a
{
background-color: #FFFFFF;
color: #FFFFFF;
}
nav ul ul li a:hover
{
background: #000000;
color:#FFFFFF;
}
nav ul ul ul
{
position: absolute; left: 100%; top:0;
}
</style>
<div id="navdiv">
<nav>
<ul>
<li>Home</li>
<li>Tutorials
<ul>
<li>Photoshop</li>
<li>Illustrator</li>
<li>Web Design
<ul>
<li>HTML</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>
</nav>
</div>
I want to change the color of submenu (i.e Photoshop, illustrator, web design in my example)
I'm able to change the background color using
css
nav ul ul li a
{
background-color: #FFFFFF;
color: #FFFFFF;
}
But i'm not getting why the font color is not getting change?
Please help me with the problem
try to Add a:visited instead of just a to the CSS selector.
nav ul ul li a, nav ul ul li a:visited
Just add a:visited instead of anchor tag
eg:nav ul ul li a, nav ul ul li a:visited
The easiest way to get this is as below:
nav ul ul ul li,
nav ul ul li
{
background-color: #FFFFFF;
color: #FFFFFF;
}
Try this it will resolve your issue, please share I can help you with more options.