This seems to be a problem in IE only. Chrome and firefox seem to work fine.
I am using IE11
I noticed in the menu there is a little tiny tiny gray fuzziness on the last menu item. Removing the border-radius resolves it, but I would prefer to keep it.
The curve around item 1 seems fine, where as the curve around item 5 has a slight discoloration protruding from the curve.
Also I realize the overall structure is less than ideal, but this is how it is currently more or less set up. I would prefer not having to change the html
.navigation{
display:inline-block;
margin:0;
list-style-type:none;
}
.navigation > li >a{
border-right:1px solid white;
background-color: rgb(0,68,106);
color: #ffffff;
padding: 4px 6px 4px 6px;
display:inline-block;
border-top-left-radius:8px;
border-bottom-left-radius:8px;
}
.navigation ul{
display:inline-block;
padding-left:0px;
list-style-type:none;
}
.navigation ul li{
display:inline-block;
}
.navigation ul li a{
border-right:1px solid white;
background-color: rgb(0,68,106);
color: #ffffff;
padding: 4px 6px 4px 6px;
display:inline-block;
}
.navigation ul li:last-child a{
border-top-right-radius:8px;
border-bottom-right-radius:8px;
}
<ul class= "navigation">
<li>item 1
<ul>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
</li>
</ul>
This rule is causing the problem, and you don't seem to need it. You can probably just remove it.
.navigation ul li a{
border-right:1px solid white;
}
.navigation{
display:inline-block;
margin:0;
list-style-type:none;
}
.navigation > li >a{
border-right:1px solid white;
background-color: rgb(0,68,106);
color: #ffffff;
padding: 4px 6px 4px 6px;
display:inline-block;
border-top-left-radius:8px;
border-bottom-left-radius:8px;
}
.navigation ul{
display:inline-block;
padding-left:0px;
list-style-type:none;
}
.navigation ul li{
display:inline-block;
}
.navigation ul li a{
/* this is messing you up */
/* border-right:1px solid white; */
background-color: rgb(0,68,106);
color: #ffffff;
padding: 4px 6px 4px 6px;
display:inline-block;
}
.navigation ul li:last-child a{
border-top-right-radius:8px;
border-bottom-right-radius:8px;
}
<ul class= "navigation">
<li>item 1
<ul>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
</ul>
</li>
</ul>
Related
Under my view menu, I am attempting to create a new submenu within a submenu without any sucess. How can the existing CSS code be modified such that the submenu2 under the view menu behaves and looks like all my other sub menus?
Thanks.
<!DOCTYPE html>
<html>
<head>
<style>
#menu_container {
width: 100%;
background: rgb(250,252,254);
border: 1px solid rgb(128,128,128);
font-family: Arial;
font-size: 9pt;
}
ul#menu, ul.submenu{
margin: 0;
padding: 0;
list-style: none;
}
ul#menu li{
float: left;
}
/* hide the submenu */
li ul.submenu {
display: none;
}
ul#menu li a{
display: block;
text-decoration: none;
padding: 7px 14px;
float:none;
color: rgb(51,51,51);
}
/* show the submenu */
ul#menu li:hover ul.submenu{
display: block;
position: absolute;
float:left;
border: 1px solid rgb(128,128,128);
}
ul#menu li:hover li, ul#menu li:hover a {
float: none;
background: rgb(230,240,254);
color: #000;
}
ul#menu li:hover li a {
background: rgb(250,252,254);
color: rgb(51,51,51);
}
ul#menu li:hover li a:hover {
background: rgb(230,240,254);
color: #000;
}
</style>
</head>
<body>
<div id="menu_container">
<ul id="menu">
<li>File
<ul class="submenu">
<li>Close</li>
</ul>
</li>
<li>Edit
<ul class="submenu">
<li>Submenu 1</li>
<li>Submenu 2</li>
</ul>
</li>
<li>View
<ul class="submenu">
<li>Submenu 1</li>
<ul><li>Submenu 2</li></ul>
<li>Submenu 2</li>
</ul>
</li>
<li>Logoff</li>
</ul>
</div>
</body>
</html>
You need to make a few changes:
On Html place the "subsubmenu" inside the li and give it the classname submenu :
<li>
Submenu 1
<ul class="submenu">
<li>SubSubmenu 2</li>
</ul>
</li>
And on CSS this:
Show only direct children submenu for each li not all submenus with >
ul#menu li:hover > ul.submenu{
....
}
Make new selector for subsubmenu
ul.submenu li:hover > ul.submenu{
display: block;
position:absolute;
left:100%;
top:0;
border: 1px solid rgb(128,128,128);
}
The demo http://jsfiddle.net/mK7qS/7/
I cannot figure out what is wrong with my dropdown menu. When I over over the main level link, the drop down appear but at the left of my screen instead of underneath the main link.
I have been on this for a couple of hours and any help would be greatly appreciated.
Here is the html part :
<div class="nav">
<ul id="menu">
<li>Home</li>
<li>Apetiziers
<ul>
<li>Sub-Link 1</li>
<li>Sub-Link 2</li>
<li>Sub-Link 3</li>
<li>Sub-Link 4</li>
</ul>
</li>
<li>Entree
<ul>
<li>Sub-Link 1</li>
<li>Sub-Link 2</li>
<li>Sub-Link 3</li>
<li>Sub-Link 4</li>
</ul>
</li>
<li>Main Course
<ul>
<li>Sub-Link 1</li>
<li>Sub-Link 2</li>
<li>Sub-Link 3</li>
<li>Sub-Link 4</li>
</ul>
</li>
<li>Dessert
<ul>
<li>Sub-Link 1</li>
<li>Sub-Link 2</li>
<li>Sub-Link 3</li>
<li>Sub-Link 4</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</div>
And the .css :
ul#menu {
float: left;
margin: 0;
width: auto;
padding: 0px 40px 0px;
background: #333; color: #fff;
line-height: 100%;
}
ul#menu li {
display: inline;
}
/* top level link */
ul#menu a {
float: left;
padding: 10px 16px;
margin-right: 0px;
background: #789; color: #fff;
text-decoration: none;
border-right: 1px solid #e2e2e2;
}
/* main level link hover */
ul#menu a.current {
background: #f60; color: #fff;
}
ul#menu li:hover > a {
color: #fff; background: #ff4500;
text-decoration: underline;
}
/* dropdown */
ul#menu li:hover > ul {
display: block; /* shows the sub-menu (child ul of li) on hover */
}
/* sub level list */
ul#menu ul {
display: none; /* hides the sub-menu until you hover over it */
margin: 0;
padding: 0;
width: 140px;
position: absolute;
top: 35px;
left: 0;
background: #000;
border: solid 1px #ccc;
}
ul#menu ul li {
float: none;
margin: 0;
padding: 0;
}
ul#menu ul a {
font-weight: normal;
background: #9BB3BF; color: #036;
}
/* sub levels link hover */
ul#menu ul li a:hover {
color: #036; background: #DDDF99;
}
If you are free to change the CSS style, why not think of doing something like this. Why not try with this CSS style?
HTML
<ul class="nav">
<li>
Menu 1
<ul>
<li>Sub Menu Item</li>
<li>Sub Menu Item</li>
<li>Sub Menu Item</li>
</ul>
</li>
<li>
Menu 2
<ul>
<li>Sub Menu Item</li>
<li>Sub Menu Item</li>
<li>Sub Menu Item</li>
</ul>
</li>
<li>
Menu 3
<ul>
<li>Sub Menu Item</li>
<li>Sub Menu Item</li>
<li>Sub Menu Item</li>
</ul>
</li>
</ul>
CSS
* {font-family: "Segoe UI", Tahoma;}
ul.nav {border-bottom: 1px solid #999;}
ul.nav li a {display: block; text-decoration: none; color: #333; padding: 5px; border: 1px solid #fff;}
ul.nav > li:hover {border: 1px solid #666; border-bottom: 1px solid #fff;}
ul.nav li a:hover {background: #ccc; border: 1px solid #999;}
ul.nav > li {display: inline-block; position: relative; border: 1px solid #fff;}
ul.nav > li ul {display: none; position: absolute; left: -1px; width: 150px; border: 1px solid #666; border-top-color: #fff; margin-top: 1px;}
ul.nav > li:hover ul {display: block;}
ul.nav > li ul li {display: block;} /* Vertical Menu */
ul.nav > li ul li {display: inline-block;} /* Horizontal Menu */
Fiddle: http://jsfiddle.net/vMuxA/ (Vertical Menu) http://jsfiddle.net/vMuxA/1/ (Horizontal Menu)
If cannot want use : position:relative, then use : left:auto; instead : left:0;
http://codepen.io/anon/pen/KAGhL
But position relative will be usefull and will give ability to set z-index to keep menu on top of other element
It is probably jumping towards the closest relative container. So configure your list to act as relative container:
ul#menu > li {
position: relative;
}
Also there was unnecessary float in your anchor tags, your li are already set to display as inline there is no point in float them
ul#menu a {
display: inline-block;
padding: 10px 16px;
/* ... */
}
Here your fixed code
Try clearing your floats on the parent elements.
Made this menu this afternoon. Tab number 1 has a drop down that consists of two divs that should each be floated left so there are two divs next to each other, however, it does not work and the second lines up underneath the first.
This is the line which I thought would do the floating :
/*sub container div*/
.container ul li .drop div{
float:left;
}
Fiddle
HTML
<!-- start menu -->
<div id="top_menu">
<nav>
<div class="container">
<ul>
<li><img class="home" alt="" height="20" src="/images/trans.gif" width="20"> </li>
<li>number 1
<div class="drop">
<div>
category 1
<ul>
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
</ul>
category 2
<ul>
<li>test1</li>
</ul>
</div>
<div>
category 3
<ul>
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
</ul>
category 4
<ul>
<li>test1</li>
</ul>
category 5
<ul>
<li>test1</li>
</ul>
</div>
<div>
</div>
</li>
<li>number 2</li>
<li>number 3</li>
<li>number 4</li>
<li>number 5</li>
</ul>
</div>
</nav>
</div>
<!-- end menu -->
CSS
#top_menu{
background:#cccccc url('/images/top_menu_bg.png') repeat;
}
.container{
position:relative;
z-index:1000;
border-left:1px #b2b2b2 solid;
border-right:1px #b2b2b2 solid;
}
.container ul{
white-space:nowrap;
/*display:table;*/
}
.container ul, .container li{
padding:0;
margin:0;
list-style:none;
}
/*top level link*/
.container ul a{
display:block;
color:#666666;
text-decoration:none;
padding:0 25px;
line-height:40px;
border-right:1px #b2b2b2 solid;
}
/*sub container*/
.container ul li .drop{
position:absolute;
background:#fdfdfd;
-moz-border-radius:0 0 8px 8px;
-webkit-border-radius:0 0 8px 8px;
border-radius:0 0 8px 8px;
display:none;
border-left:1px #b2b2b2 solid;
border-right:1px #b2b2b2 solid;
border-bottom:1px #b2b2b2 solid;
}
/*sub container div*/
.container ul li .drop div{
float:left;
}
.container ul li .drop li{
display:block;
border:0;
}
.container > ul > li{
float:left;
display:block;
position:relative;
}
.container ul li:hover > .drop{
top:auto;
display:block;
}
/*sub level top link*/
.container ul li .drop a{
line-height:25px;
border:0;
padding:0 30px 0 10px;
color:#000000;
}
/*sub level top link hover*/
.container ul li .drop a:hover{
color:#00396d;
background:#c4dcec;
}
/*sub level link normal*/
.container ul li .drop li > a{
color:#666666;
}
/*sub level link hover*/
.container ul li .drop li:hover > a{
background:#c4dcec;
color:#00396d;
}
/*top level link hover*/
.container li:hover > a{
color: #000000;
}
/*home button*/
.container ul li img.home{
background:url('/images/top_menu_home.png') 0 0;
width:20px;
height:20px;
}
/*home button hover*/
.container ul li:hover > a img.home{
background:url('/images/top_menu_home.png') -20px 0;
}
Sorry for the late reply =) Still, if you want to stack several elements of variable width horizontally, I'd suggest using display:inline-block.
/*sub container div*/
.container ul li .drop div{
display:inline-block;
vertical-align:top;
}
The fiddle (works in fFF 8, Chrome 12, IE 9).
The drawback is spaces between elements, which can be successfully eliminated
.container ul li .drop{
position:absolute;
background:#fdfdfd;
-moz-border-radius:0 0 8px 8px;
-webkit-border-radius:0 0 8px 8px;
border-radius:0 0 8px 8px;
display:none;
border-left:1px #b2b2b2 solid;
border-right:1px #b2b2b2 solid;
border-bottom:1px #b2b2b2 solid;
width: 300px; //set width
}
/*sub container div*/
.container ul li .drop div{
float:left;
width:50%; //optional
}
I am trying to do a menu in CSS with a Unordered List UL, I have it almost working correctly.
I am having a little trouble, if you run the code below or look at it on the JSFiddle link here http://jsfiddle.net/hgBDV/1/ You will see there is a Horizontal menu, when you hove the 2nd to last item labeled "More" there is a Sub-menu.
That sub-menu is what I need help with, right now when you hover the "Menu" list item, the sub-menu becomes visible on the screen however you are unable to hover of the sub-menu.
Please help me correct this issue
<div id="nav-wrapper">
<ul>
<li>Link</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>More
<ul>
<li>Sub Link 1</li>
<li>Sub Link 2</li>
<li>Sub Link 3</li>
<li>Sub Link 4</li>
<li>Sub Link 5</li>
</ul>
</li>
<li>Link 7</li>
</ul>
</div>
css
<style type="text/css">
#nav-wrapper ul {
width: 700px;
float: right;
margin: 0;
list-style-type: none;
}
#nav-wrapper ul li {
vertical-align: middle;
display: inline;
margin: 0;
color: black;
list-style-type: none;
}
#nav-wrapper ul li a {
text-decoration: none;
white-space: nowrap;
line-height: 45px;
font-size: 13px;
color: #666;
padding: 5px 15px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
#nav-wrapper ul li a:hover {
color: #fff;
background-color: #4caef2;
}
#nav-wrapper ul li a:visited {
color: #666;
}
/* Hide Sub-menus */
#nav-wrapper ul ul,
#nav-wrapper ul li:hover ul ul,
#nav-wrapper ul ul li:hover ul ul{
display: none;
}
/* SHOW Sub-menus on HOVER */
#nav-wrapper ul li:hover ul,
#nav-wrapper ul ul li:hover ul,
#nav-wrapper ul ul ul li:hover ul{
display: block;
margin:0;
padding:0px 2px 2px 0px;
border-color:#AAAAAA;
border:1px;
border-style:solid;
}
</style>
http://jsfiddle.net/hgBDV/2/
You are having trouble because the line-height is 45px but your text-size is 13px. The sub-menu shows up when you hover over the 'more' link, but when you move your mouse outside of the bounds of the 'more' link, the sub-menu is no longer displayed. While you have set the margin to 0px, the line-height is allowing for a 20px gap. In my 'fix', i have set the line height to 0px. Google "css suckerfish" for an already invented wheel.
deleted the thing line-height
#nav-wrapper ul {
width: 700px;
float: right;
margin: 0;
list-style-type: none;
}
#nav-wrapper ul li {
vertical-align: middle;
display:inline;
margin: 0 0 0 0;
color: black;
list-style-type: none;
}
#nav-wrapper ul li a {
text-decoration: none;
white-space: nowrap;
font-size: 13px;
color: #666;
padding: 5px 15px 5px 15px;
margin: 5px 0px 0px 10px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
#nav-wrapper ul li a:hover {
color: #fff;
background-color: #4caef2;
}
#nav-wrapper ul li a:visited {
color: #666;
}
/* Hide Sub-menus */
#nav-wrapper ul ul {
display: none;
}
/* SHOW Sub-menus on HOVER */
#nav-wrapper ul li:hover ul{
display:block;
margin:3px 0 0 0; /* if you change top value here thing will screw up */
padding:0px 2px 2px 0px;
border-color:#AAAAAA;
border:1px;
border-style:solid;
}
alt text http://www.pwiser.com/error.pnghi i want to make unorder list based menu unable to figure it out i attached the image for better understanding please help below is my css and xhtml
#verticalSubmenu ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
text-transform:uppercase;
}
#verticalSubmenu li { margin: 0 0 3px 0; background:#dedede; border: 1px solid #f7f7f7; color:#666666; height:auto;
}
#verticalSubmenu li.parent { background:#6c6b6b; color:#fcfafa; height:auto;
}
#verticalSubmenu a
{
display: block;
padding: 4px 2px 2px 10px;
width: 138px;
}
#verticalSubmenu li a:link, #navlist a:visited{
color: #666666;
text-decoration: none;
}
#verticalSubmenu li.parent a:link, #navlist a:visited
{
color: #fcfafa;
}
#verticalSubmenu ul ul {
position:relative;
height:0;
top:10px;
left:0;
}
#verticalSubmenu ul ul li{
background:#f9f9f9;
border:1px solid #f9f9f9;
}
#verticalSubmenu ul ul a{
padding: 4px 2px 2px 20px;
height:auto;
}
<div id="verticalSubmenu">
<ul id="navlist">
<li class="parent">Item one</li>
<li>Item two</li>
<li>Item three</li>
<li>Item four</li>
<li>
Item five
<ul>
<li> Item six</li>
<li> Item six</li>
<li> Item six</li>
<li> Item six</li>
</ul>
</li>
<li>Item four</li>
</ul>
</div>
It looks like the above example may be a 3 levels menu - which isn't much harder than the 2 level menu you already have once you get it working.
My suggestion is build the whole thing so you have one massive expanded menu, rather than only putting in the li's and ul's appropriate to whatever section they are currently in, then do something like this:
ul ul {
display: none;
}
ul li.lit ul {
display: block;
}
Then give whatever menu item they happen to be in (on the li) the class of .lit and it will only show that menu as open. It's much easier than generating a custom menu for each and every page.
I think your...
#verticalSubmenu ul ul {
position:relative;
height:0;
top:10px;
left:0;
}
Is the likely culprit. position: relative; will remove it from the page, thus positioning the LI below underneath it. Replace that whole rule with this:
#verticalSubmenu ul ul {
display: block;
}
above question resolved solution posting if any one need menu like this
<div id="verticalSubmenu">
<ul id="navlist">
<li class="parent">Item one</li>
<li>Item two</li>
<li>Item three</li>
<li>Item four</li>
<li>
Item five
<ul>
<li> Third Level</li>
<li> Third Level</li>
</ul>
</li>
<li>Item six</li>
<li>Item seven</li>
<li>Item eight</li>
<li class="parent">Item one</li>
<li class="parent">Item one</li>
<li class="parent">Item one</li>
</ul>
</div>
#verticalSubmenu ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
text-transform:uppercase;
}
#verticalSubmenu li {
float:left;
margin: 0 0 3px 0;
color:#666666;
height:auto;
display:block;
}
#verticalSubmenu li a
{
display: block;
padding: 5px 2px 2px 10px;
width: 138px;
height:16px;
border: 1px solid #f7f7f7;
background:#dedede;
color:#6e6e6e;
text-decoration:none;
}
#verticalSubmenu li.parent a
{
background:#6c6b6b;
color:#fcfafa;
}
#verticalSubmenu ul ul{
margin-top:10px;
position:relative;
}
#verticalSubmenu ul ul li a{
display: block;
padding: 4px 2px 2px 20px;
width: 128px;
background:#f9f9f9;
}
i will make some improvement but basic structure is complete cheers :)