I have a dropdown menu on my site's top navigation bar. I'd like the items in this menu to expand horizontally to fit their contents. For some reason they won't expand to be wider than their parent.
I've recreated the issue in CodePen here: http://codepen.io/YM_Industries/pen/GgJBQv
In my actual website I don't have control over this section of the DOM, so I'm a little constrained there.
Here's the code for my recreation in case CodePen is unavailable:
HTML:
<ul class="nav">
<li>
Home
</li>
<li>
v Test1 v
<ul class="submenu">
<li>
Submenu 1
</li>
<li>
Long text wraps and is ugly :/
</li>
</ul>
</li>
<li>
Test2
</li>
</ul>
CSS:
* {
font-family: sans-serif;
}
ul.nav,
ul.nav li,
ul.nav ul {
display: block;
padding: 0;
}
ul.nav li {
position: relative;
}
/* Style each link */
ul.nav li > a {
display: block;
padding: 10px 15px;
line-height: 20px;
height: 20px;
background: rgba(254, 197, 46, 1);
border: none;
}
/* Bring back the first level links */
ul.nav > li {
float: left;
margin-right: 1px;
}
/* Selected/Hover effect */
ul.nav li > a:hover {
color: #004d85;
background: rgb(255, 213, 102);
}
/* Display dropdown in the correct location */
ul.nav li ul.submenu {
position: absolute;
top: 40px !important;
left: 0px !important;
display: none;
}
ul.nav li:hover ul.submenu {
display: block;
}
/* Set font+colour for site links */
ul.nav li a,
ul.nav li a:link,
ul.nav li a:visited {
color: black;
font-size: medium;
text-decoration: none;
}
ul.nav li a:hover,
ul.nav li a:active {
color: blue;
}
If I explicitly set a width on my submenu items (400px for example) they will expand correctly, but for some reason the content isn't making them get wider. I'd really rather not have to hardcode the width.
Thanks,
YM
The solution is rather easy. You just have to add
ul.submenu a {
white-space: nowrap;
}
which prevents the text from wrapping and therefore doesn't stick to the parent container size.
You can check it out here http://codepen.io/anon/pen/QwbYvG
just fixed your pen - upgrade your css classes:
ul.nav li ul.submenu
{
position: absolute;
top: 40px !important;
left: 0px !important;
width:auto;
display: none;
background: rgb(254, 197, 4);
}
ul.nav li ul.submenu > li
{
display:inline-block;
white-space: nowrap;
}
AND IT USES CSS 2 :)
Related
I have a nav that holds a ul with several ils. The problem is that im unable to get rid of the ul's first and last child's divider.
here's a demo: http://jsfiddle.net/Rvs3C/1/
i've added this code to my CSS file but seems like it makes no difference:
nav ul a li:first-child{
content: none;
}
nav ul a li:last-child{
content: none;
}
You markup is wrong. The corret way is <a> tag being the children of tag <li>.
The way you made the correct selector would:
nav ul a:first-child li{
content: none;
}
nav ul a:last-child li{
content: none;
}
But remembering, this is not the right way to do.
The correct is change you html to:
<ul class="showing">
<li>home</li>
...
As mentioned elsewhere your HTML structure is off, li must me a direct child of ul, no other element as a child is valid. With this said, you also need to change your selectors per the below.
Updated Fiddle
HTML
<nav>
<ul class="showing">
<li>home
</li>
<li>about me
</li>
<li>content
</li>
<li>browse
</li>
<li>rate
</li>
<li class="nav_arr"><img src="http://www.irvinewelsh.net/images/arrow-left.png" />
</li>
</ul>
</nav>
CSS
nav {
margin-right: 150px;
}
nav ul {
background-color: #494A4C;
overflow: hidden;
text-align: right;
}
nav li img {
margin-left: 20px;
vertical-align: top;
}
nav ul li a {
color: white;
text-decoration: none;
font-family:arial;
font-size: 14px;
padding: 0px;
font-weight: bold;
}
nav ul li:first-child:before {
content: none;
}
nav ul li:last-child:before {
content: none;
}
nav li:before {
content:"|";
padding: 5px;
font-weight: bold;
color:lightblue;
font-size: 20px;
}
nav ul li {
display: inline-block;
}
I'm having a design issue with my css vertical menu.
It's working but it does not have the effect i would like to have when I do a mouse hover on a category
Below, you will see a simple vertical menu which appears when you hover your mouse over the main category
However I would like to have a small effect :
When the mouse is hover a category, i would like to add a background color (black).
It's working but I would like that the height and the width of the background to stick exactly to the same height and width of the text. Currently, I dont know why; the height of the background is more than the height of my text.
Here is some pictures of how it's right now and how i would like to be be.
How it 's now:
How I would like it to be:
Here is my code Html code
<div id="menu">
<ul id="MenuDeroulant">
<li style="margin-left:-10px;">Main categorie
<ul>
<li><a href="" >Subcat 1</a></li>
<li><a href="" >Subcat 2</a></li>
</ul>
</li>
</ul>
Here is my css code:
#MenuDeroulant
{
margin: 0;
padding: 0
}
#MenuDeroulant li
{
float: left;
list-style: none;
}
#MenuDeroulant li a
{
display: block;
padding: 0px 0px;
text-decoration: none;
color: #000;
white-space: nowrap;
text-align:center;
}
#MenuDeroulant li a:hover
{
background: #000;
color: #FFF;
}
#MenuDeroulant li ul
{ visibility: hidden;
padding: 0px 0px;
}
#MenuDeroulant li ul li
{
float: none;
display: inline;
}
#MenuDeroulant li ul li a
{
width: auto;
padding: 0px 0px;
}
#MenuDeroulant li ul li a:hover
{
background: #0000;
padding: 0px 0px;
}
Thanks in advance for your help and I wish you a very nice day,
Anselme
Use width:100% to all your <li> or li a elements and a fixed width to your <ul>. This will solve your issue.
With that CSS your nested ul is permanently hidden. You'll need something like
#MenuDeroulant li:hover ul {
visibility:visible;
}
to show the nested menu items then maybe display: inline on the #MenuDeroulant li ul li a
You can add a class to your menu hyperlinks giving them a margin-bottom:3px and it should bump up the links in the container.
I have this css code here
.navigation{
width:100%;
background-color:#7a7a7a;
font-size:18px;
}
.navigation ul {
list-style-type: none;
margin: 0;
}
.navigation li {
float: left;
}
.navigation ul a {
color: #ffffff;
display: block;
padding: 0 65px 0 0;
text-decoration: none;
}
What I am trying to do is center my class navigation. I tried using text-align:center; and vertical-align:middle; but neither of them worked.
and here is the HTML Code
<div class="navigation">
<ul>
<li>home</li>
<li>about</li>
<li>tutors</li>
<li>students</li>
<li>contact us</li>
</ul>
</div><!--navigation-->
When I say its not working, I mean the text is aligned to the left.
Change the rule on your <a> element from:
.navigation ul a {
color: #000;
display: block;
padding: 0 65px 0 0;
text-decoration: none;
}
to
.navigation ul a {
color: #000;
display: block;
padding: 0 65px 0 0;
text-decoration: none;
width:100%;
text-align:center;
}
Just add two new rules (width:100%; and text-align:center;). You need to make the anchor expand to take up the full width of the list item and then text-align center it.
jsFiddle example
You have to make the UL inside the div behave like a block. Try adding
.navigation ul {
display: inline-block;
}
I try to avoid floating elements unless the design really needs it. Because you have floated the <li> they are out of normal flow.
If you add .navigation { text-align:center; } and change .navigation li { float: left; } to .navigation li { display: inline-block; } then entire navigation will be centred.
One caveat to this approach is that display: inline-block; is not supported in IE6 and needs a workaround to make it work in IE7.
I'm trying to make a CSS drop down menu but the problem is that child list items overlap parent list items as you can see in the picture.
I found the source of the problem to be the padding: 10px 5px; in line 12 - When removed, the problem is solved. But I need the padding for the look. I read Inline elements and padding which addresses a similar issue but even the solution provided in the article - using float: left; instead of display: inline; - does not solve my problem.
Why does this happen and what is the solution?
HTML Code
<ul id="navigation_2">
<li>Home</li>
<li>About
<ul>
<li>Who We Are</li>
<li>Our Goal</li>
</ul>
</li>
</ul>
CSS Code
ul#navigation_2
{
margin: 0;
padding: 0;
list-style: none;
font-family: "Century Gothic","HelveticaNeueLT Pro 45 Lt",sans-serif;
}
ul#navigation_2 li
{
float: left;
position: relative;
padding: 10px 5px;
font-size: 114%;
text-align: center;
width: 100px;
}
ul#navigation_2 li a
{
text-decoration: none;
}
ul#navigation_2 li a:link, a:visited, a:active
{
color: black;
}
ul#navigation_2 li:hover
{
background-color: red;
}
ul#navigation_2 li ul
{
margin: 0;
padding: 0;
list-style: none;
display: none;
}
ul#navigation_2 li ul li
{
display: block;
width: 150px;
text-align: left;
}
ul#navigation_2 li:hover ul
{
display: block;
position: absolute;
background-color: #CBD966;
}
Here, I have a working example:
http://jsfiddle.net/hzCZY/2/
Never underestimate the power of inline-block! Basically your list was colliding with the text 'About' as opposed to the red box around the text 'About'. I formatted the actual a tag to be the red block instead, an inline-block, which then collided correctly with the ul below it.
If you need any more explanation I'd be more than happy to help.
When you mouseover a navigation item, the colour of the link changes to white and background of that link goes black. The hover state does a display:block on a hidden nested . When I move the mouse over to the nested (i.e. the sub menu), the hover state on the top-level nav returns back to the way it was. How do I make it persist whilst my mouse is over the sub-menu?
In other words, when I hover the link 'What we do', the font color changes to #fff and background to #111 and the ul.sub-menu appears with the same black background and white text. This all appears whilst my mouse hovers over 'What we do', but as soon as it moves to the sub-menu, the background on 'What we do' returns to its original color and font color changes back to black. Meanwhile my sub-menu remains open in the correct format. How do I get the 'state' to persist when I move the mouse hover away?
Here is a jsfiddle for it: http://jsfiddle.net/U77re/
nav ul#menu-top-nav { position: absolute; top: 35px; left: 113px; padding: 16px 30px 17px 20px; width: 797px; background: #F0F1F4;}
nav ul#menu-top-nav li { position: relative; float: left; margin: 0 40px 0 0; }
nav ul#menu-top-nav li a:hover { color: #fff; background: #111; }
nav ul#menu-top-nav li#menu-item-1186 { margin-right: 0; }
nav ul#menu-top-nav ul.sub-menu { display: none; }
nav ul#menu-top-nav ul.sub-menu li a { margin: 0; }
nav ul#menu-top-nav li:hover ul.sub-menu { display: block; position: absolute; left:0; top: 30px; width: 250px; padding: 20px;
z-index: 1; background: #111; }
nav ul#menu-top-nav ul.sub-menu p { margin: 0 0 25px 0; color: #fff; line-height: 1.4; font-weight: bold; }
nav ul#menu-top-nav ul.sub-menu li { width: 250px; margin: 0 0 20px 20px; color: #fff; list-style-position: inside; list-style-type: disc; }
nav ul#menu-top-nav ul.sub-menu li a { color: #fff; }
<nav role="navigation">
<ul class="menu" id="menu-top-nav">
<li id="menu-item-1596">What we do
<ul class="sub-menu">
<p>Explore what we do and the people behind it</p>
<li id="menu-item-1600">About IFSW</li>
<li id="menu-item-1604">Partners</li>
<li id="menu-item-1601">Contact</li>
</ul>
</li>
</ul>
</nav>
Switch your hover event from the a anchor element to the li element, like so:
nav ul#menu-top-nav li:hover a { color: #fff; background: #111; }