I've got a menu with multiple child elements, the problem I'm having is that the child menu is displaying as the width of its parent, not its child element.
Here's my code:
#navbar ul {
float: none;
margin: 0;
padding: 0
}
#navbar ul li {
margin: 0;
padding: 0;
display: inline-block
}
#navbar ul li > a,
#navbar ul li > span {
color: #004665;
padding: 10px 0 10px 35px;
margin: 0;
display: block;
font-family: 'roboto-condensed', sans-serif;
font-weight: 700;
font-size: 24px;
text-transform: uppercase;
line-height: 72px
}
#navbar ul li.active > a,
#navbar ul li > a:hover,
#navbar ul li > a:focus {
color: #6fbfe6;
background: none
}
#navbar ul li > ul {
position: absolute;
background: #f0f5f7;
padding: 30px 0 20px;
border-top: solid 2px #b1b1b1;
display: none
}
#navbar ul li > ul li {
display: block;
margin: 0;
padding: 0;
white-space: nowrap
}
#navbar ul li > ul li > a {
font-size: 20px;
line-height: normal;
margin: 0;
padding: 0 30px 10px;
white-space: nowrap
}
#navbar ul li > ul li > ul {
left: 100%;
right: 0;
z-index: 1000;
top: -32px;
width: 100%
}
#navbar ul li > ul li > ul li.parent:hover > ul {
display: block
}
<ul>
<li class="item-120 parent">
Academics
<ul class="nav-child">
<li class="item-204 parent">IB Programmes
<li class="item-205 parent">
VCE
<ul class="nav-child">
<li class="item-215">VCE Overview</li>
<li class="item-216">Outcomes and SACs</li>
<li class="item-217">Assessment and Scoring</li>
<li class="item-218">Subjects We Offer</li>
<li class="item-219">Who is the VCE for?</li>
</ul>
</li>
<li class="item-205 parent">Student Wellbeing
<li class="item-207 parent">Resource Library
</ul>
</li>
</ul>
Fiddle here: https://jsfiddle.net/fw16jw1y/
Remove width: 100% and right: 0 from the following code:
#navbar ul li > ul li > ul {
left: 100%;
right: 0; /* REMOVE */
z-index: 1000;
top: -32px;
width: 100% /* REMOVE */
}
You are containing the ul element by defining width.
Working Fiddle
Try something like this,
nav > ul > li > ul > li > a {
max-width: 150px;
text-overflow: ellipsis;
overflow: hidden;
}
You can reffer this post,
Child element auto width (larger than parent) ,
Allow absolutely positioned element to be wider than parent absolutely positioned element
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'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 */
}
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.
Fiddle here: http://jsfiddle.net/csaltyj/3A78u/
I want the sub-sub nav menu to align with the top of its parent (hence top: 0) but it aligns with the parent's parent for some reason. I'm not sure what's going on.. any ideas?
HTML:
<div id="nav">
<ul>
<li><a>Item One</a></li>
<li><a>Item Two</a>
<ul>
<li><a>Item two has babies</a></li>
<li><a>Baby #2</a>
<ul>
<li><a>Sub-babies</a></li>
<li><a>This is fun</a></li>
<li><a>Last Item</a></li>
</ul>
</li>
<li><a>SubSub</a>
<ul>
<li><a>Another Item</a></li>
<li><a>Another!</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
CSS:
#nav {
height: 40px;
}
#nav ul {
list-style: none;
font-family: Arial, sans-serif;
font-size: 0.8em;
}
/* When mousing over any LI, reveal its UL if any */
#nav > ul li:hover > ul {
display: block;
}
/* For all links */
#nav a {
text-decoration: none;
color: #000;
}
/* Main nav styling */
#nav > ul > li > a {
padding: 1em;
}
#nav a:hover {
color: red;
}
#nav > ul > li {
float: left;
border: 1px solid #999;
}
/* Subnav styling */
#nav > ul ul {
display: none;
position: absolute;
font-size: 1em;
background: #eee;
padding: 0.5em;
border: 1px solid #999;
}
/* Subsubnav styling */
#nav > ul ul ul {
left: 50px;
top: 0;
width: 150px;
position: absolute;
}
#content {
}
You need to add position: relative to the "level 2" li elements:
#nav > ul ul li {
position: relative
}
Here's a version where the babies are all lined up: http://jsfiddle.net/3A78u/2/
If you'd like to use >, it would be #nav > ul > li > ul > li.
The 'top' property is relative to the first non-statically positioned parent. In this is case it's the UL element (which is absolutely positioned). You need to add 'position:relative;' to the list-items to get elements inside to align relatively to it.