The first menu item has a dropdown submenu that is supposed to display on li:hover. For some reason though, hovering on the margins between ANY of the li's is causing the submenu to display and I can't figure out why. It works in Chrome and IE in compatibility mode, but not IE8.
Here's the line of CSS that displays the submenu:
.menu li:hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
}
To me, that reads that whenever you hover an li, style any of it's children ul's with the following style. Why would this be getting triggered on margins between li's that don't have nested ul's?
Here's the entire CSS for the menu just in case:
.menu {
font-weight: normal;
font-size: 1.1em;
margin-top: 5px;
padding: 5px 0 0 0;
font-family: OswaldLight;
display: table;
margin: 0 auto;
}
.menu li {
list-style: none;
float: left;
margin-right: 10px;
}
.menu li a {
display: block;
text-decoration: none;
padding:5px;
color:#navbar-text;
background:#navbar;
text-decoration:none;
}
.menu li ul {
display: none;
background-color: #navbar;
}
.menu li ul li {
margin: 0;
}
.menu li a:hover {
color: #navbar-text-highlight;
background-color: #navbar-highlight;
}
.menu li:hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
}
.menu li:hover li {
float: none;
}
.menu li:hover li a {
background-color: #navbar;
color: #navbar-text;
}
.menu li li a:hover {
color: #navbar-text-highlight;
background-color: #navbar-highlight;
}
For anyone wondering, the problem was the "display:table" in the .menu class. The .menu class was assigned to the parent UL and IE8 didn't know what to do with it. I removed that line, added a parent around the parent and gave that "display:table" instead and it seemed to solve the problem. The reason I'm using "display:table" is to clear my floats but allow me to easily center the contained floats using "margin: 0 auto", which seems to be the nicest solution I've found for centering a container of floats.
It probably ha something to do with the width that ul with the sub menu, I will have to look into it further but most likely it's a width issue in IE
Update: well it seems you fixed it
Related
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 :)
Working on a menu bar that has counter active css classes. I need the menu bar centered and the drop downs to be under the proper list item. I can get one or the other but not both to work at the same time. The menu bar changes sizes, so putting a static margin left on it will not work. This is what the menu bar should look like but it's not centered.
And this is what happens when i remove the float: left from #mainmenu ul li{}. It's now centered, but the items that belong under the user name are all shifted left.
Why does this happen? and how do i get around it?
html:
<div id="mainmenu">
<?php
if(Yii::app()->user->name)
$display_name = Yii::app()->user->name;
if(strlen($display_name) > 11){
$display_name = substr($display_name,0,9);
$display_name =$display_name.'...';
}
?>
<?php $this->widget('zii.widgets.CMenu',array(
'items'=>array(
array('label'=>'Home', 'url'=>array('/site/index')),
array('label'=>'My Tickets', 'url'=>array('/ticket/mytickets'), 'visible'=>!Yii::app()->user->isGuest),
array('label'=>'About', 'url'=>array('/site/page', 'view'=>'about')),
array('label'=>'Contact', 'url'=>array('/site/contact')),
array('label'=>'Schools', 'url'=>array('/school'), 'visible'=>Yii::app()->user->id == 'admin'),
array('label'=>'Teams', 'url'=>array('/team'), 'visible'=>Yii::app()->user->id == 'admin'),
array('label'=>'Login', 'url'=>array('/site/login'), 'visible'=>Yii::app()->user->isGuest),
array('label'=>'Games', 'url'=>array('/game'), 'visible'=>Yii::app()->user->id == 'admin'),
array('label'=>'Users', 'url'=>array('/user'), 'visible'=>Yii::app()->user->id == 'admin'),
array('label'=>'Tickets', 'url'=>array('/ticket'), 'visible'=>Yii::app()->user->id == 'admin'),
array('label'=>'Team Placement', 'url'=>array('/tournamentresults'), 'visible'=>Yii::app()->user->id == 'admin'),
array('label'=>$display_name, 'url'=>array('#'), 'visible'=>!Yii::app()->user->isGuest,
'items' => array(
array('label'=>'Edit User', 'url'=>array('/company/index')),
array('label'=>'Log-out', 'url'=>array('/site/logout'))
),
),
),
)); ?>
</div><!-- mainmenu -->
Generated HTML code:
<div id="mainmenu">
<ul id="yw0">
<li class="active">Home</li>
<li>My Tickets</li>
<li>About</li>
<li>Contact</li>
<li>SirRahal
<ul>
<li>Edit User</li>
<li>Log-out</li>
</ul>
</li>
</ul>
</div>
CSS code:
#mainmenu
{
height:33px;
margin: auto;
text-align:center;
}
#mainmenu ul li
{
display: inline;
float: left;
margin: auto;
}
#mainmenu ul li a
{
color: #fbf3e1;
font-size:14px;
padding-top:5px;
padding-bottom:5px;
width:217px;
background: #33332c;
}
#mainmenu ul li ul {
display: none;
position: absolute;
margin-left: -20px;
}
#mainmenu ul li:hover > ul {
display: block;
}
#mainmenu ul li a:hover, #mainmenu ul li.active a
{
color: #f5921e;
border-bottom: solid 5px #f5921e;
text-decoration:none;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
The biggest key, in my opinion, to building a CSS dropdown/flyout menu is using absolute positioned elements inside relative positioned elements and where to use them. What's even more important is to understand how these two positioning schemes relate to one another. Once you do, you can build all sorts of dropdown/flyout menus.
You will want to set position: relative to all of your menu li whether they contain a submenu or not. Doing so will not affect their position unless you start using top, right, bottom, left CSS properties.
.menu li {
position: relative;
}
Now you will want to set the position of all ul that are a child of an li in your menu to position: absolute. We also don't want them to show right away so hide them with display: none.
.menu li > ul {
display: none;
position: absolute;
}
Applying position relative to the containing element of an absolute positioned element helps contain the absolute positioned element. Not only that but the absolute positioned element will base it's positioning off of the relative positioned parent element, which is what we want. Setting top: 0 and left: 0 will cause a ul that is a child of an li to start in the same upper left hand location as it's parent elements upper left hand corner.
The two rules I have provided so far are the fundamental building blocks of a dropdown/flyout menu in CSS.
From this point forward it will all depend on your design goals as to what else you need to add to your CSS.
I'm going to (mostly) use generic code the rest of the way in the hopes that yourself and others can build off of the basic principles to obtain your own specific results. That said I will base the rest of the code off of what you have supplied. Some superficial styling like borders will be ignored, you can add that later.
HTML
Here is the HTML I'm going to use. Add in anchor elements as needed.
<ul class="menu">
<li>One</li>
<li>Two
<ul>
<li>Sub Two A</li>
<li>Sub Two B</li>
</ul>
</li>
<li>Three</li>
</ul>
Your top level menu is inline so let's use float: left to do that.
They're also fixed width. You're doing this through your anchor tags <a> which is fine, I'm going to use the li.
Your text is centered.
.menu li {
float: left;
position: relative;
text-align: center;
width: 100px;
}
**SEE EDIT BELOW FOR VARIABLE LI ANSWER**
Since you are using fixed width navigation elements you can center your navigation with margin: 0 auto. Using auto for margin left and right to center an element requires a width to be set! Just add up the full width of your top level li and you'll have your width you'll need to center the navigation. Don't forget to include any padding, margin, border etc. in the width calculation.
My example uses three li at 100px width.
.menu {
width: 300px; /* width of the 3 li */
margin: 0 auto; /* centers ul when width is specified */
}
Now we will position the submenu ul.
For top you need to push the submenu ul down the height of the containing li. I'm going to assume 25px is the height of the li.
For left you want it to start at the same edge as the containing li so use 0.
.menu li > ul {
display: none;
left: 0;
position: absolute;
top: 25px;
}
Now let's display the submenu ul when the parent li is hovered.
.menu li:hover > ul {
display: block;
}
CSS
The final CSS.
.menu {
width: 300px; /* width of the 3 li */
margin: 0 auto; /* centers ul when width is specified */
}
.menu li {
float: left;
line-height: 25px; /* assumed height of li */
position: relative;
text-align: center;
width: 100px;
}
.menu li > ul {
display: none;
left: 0;
position: absolute;
top: 25px;
}
.menu li:hover > ul {
display: block;
}
Here is a jsFiddle with some basic styling that wraps it all together.
There you go! A primer to CSS dropdown/flyout menus. As usual your needs will require some modifications or additions to what I have supplied. If you understand the fundamentals you'll go a long way in developing more in-depth and robust solutions.
**EDIT**
Just noticed you have variable number of li in your navigation. Make the changes where appropriate. It is a combination of relative positioning with percentage positions.
.menu {
float: left;
position: relative;
left: 50%;
}
.menu li {
float: left;
line-height: 25px; /* assumed height of li */
position: relative;
right: 50%;
text-align: center;
width: 100px;
}
/* undo the right positioning for submenu li so it aligns properly */
.menu li > ul li {
right: auto;
}
Here is an updated jsFiddle.
Replace your CSS like this, using your LI elements for styling rather than your A elements:
body {
width:100%;
}
#mainmenu {
display: block;
width:100%;
}
#mainmenu ul {
width:100%;
}
#mainmenu ul li {
display: inline-block;
position:relative;
margin: auto;
width:19%;
background: #33332c;
padding-top:5px;
padding-bottom:5px;
}
#mainmenu ul li a {
color: #fbf3e1;
font-size:14px;
}
#mainmenu ul li ul {
display: none;
position: absolute;
}
#mainmenu ul li:hover > ul {
display: block;
width:auto;
position:absolute;
top:30px;
left:0;
background: #33332c;
padding:10px;
}
#mainmenu ul li:hover > ul li {
display: block;
width:150px;
height:auto;
}
#mainmenu ul li a:hover, #mainmenu ul li.active a {
color: #f5921e;
border-bottom: solid 5px #f5921e;
text-decoration:none;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
You may need some additional adjustments, but there you have the basics
See fiddle here
I'm brand new to this coding stuff so please go easy on me ;)
I'm trying to make the top nav on this website stretch to fit the width of what I understand to be the "container" of the website which is 900px wide. I can't for the life of me remove what appears to be padding or margins to the left and right of the nav. See code below.
Site screenshot here: http://img560.imageshack.us/img560/9479/237c.png
Right now I'm just cleverly making adjustments to padding to make the nav somewhat centered on the page, but ultimately it would look much better if it met up with the edge of the containter like everything else.
Thx for any help.
/* Navigation
--------------------------------------------------------------------------------*/
#topnav {
clear: both;
margin: 0 0;
overflow: hidden;
}
#topnav ul {
list-style: none;
float: left;
text-align: center;
}
#topnav ul li {
list-style: none;
float: left;
background: url(nav-sep.png) right 0px no-repeat;
padding: 15px 0px 12px 0px;
display: inline block;
}
#topnav ul > li:last-child,
#topnav ul > span:last-child li {
background: none;
padding-right: 0;
}
#topnav a {
float: left;
display: block;
color: #545454;
font-family: Blair, sans-serif;
font-weight: 500;
padding: 6px 0 6px;
border: 0;
border-top: 3px solid transparent;
outline: 0;
margin: 0 16.6px;
list-style-type: none;
font-size: .75em;
text-transform: uppercase;
}
#topnav ul > li:last-child a,
#topnav ul > span:last-child li a {
margin-right: 0;
}
#topnav li#active a,
#topnav a:hover {
color: #666666;
border: 0;
border-top: 3px solid #8cc640;
}
Try with
margin-left:auto;
margin-right:auto;
See also:
Cross browser method to fit a child div to its parent's width
Hope this helped. Cheers.
I would say to add a main container div that will enclose all your existing html, and then define a css for it with margin-left/right as auto :
<head>
.......
<style>
#mainContainer {
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<html>
<body>
<div id="mainContainer">
............................
............................
............................
</div>
</body>
</html>
Hi if you are new on this you need to know that for default all element tags like ul, p or body has for default some values on properties like margin and padding. What you need is first work on reset those values in CSS to avoid issues and make more easier your cutomization. In your case the ul has some properties:
ul {
display: block;
list-style-type: disc;
margin-before: 1em;
margin-after: 1em;
margin-start: 0;
margin-end: 0;
padding-start: 40px;
}
You can use this simple global reset with * as the global selector :
* {
margin:0;
padding:0;
}
Or search for some complex resets like this one.
Then with values on 0 you can customize in a better way your elements:
#topnav ul {
list-style: none;
float: left;
text-align: center;
width:100%;
}
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.