First posted working code gets awarded the answer...
Here's a simple web-page with a CSS drop-down menu
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Center menu test</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<link type="text/css" rel="stylesheet" href="css_menu.css">
</head>
<body>
<div class="menu">
<ul><li>Home</li></ul>
<ul>
<li>Menu with items
<ul>
<li>one</li>
<li>two</li>
</ul>
</li>
</ul>
</div>
<div style="clear:both;"></div>
</body>
</html>
and here is the corresponding CSS :
.menu {margin-left:auto; margin-right: auto; padding:0; margin:8px; color: #000000; width:100%; border:1px; clear:both;}
/*Color navigation bar normal mode*/
.menu a,
.menu a:visited {font-family:Arial, Helvetica, sans-serif;font-style:normal;font-weight:bold;font-size:12px;color: #000000;background-color: #FFFFFF;text-decoration: none;}
.menu ul {list-style-type:none;padding:0; margin:0;}
.menu ul li {float:left; position:relative; z-index:auto !important /*Non-IE6*/; z-index:1000 /*IE6*/; margin-right: 4px; border:solid 1px #004080; }
.menu ul li a {color: #000000;background: #FFFFFF;float:none !important /*Non-IE6*/; float:left /*IE-6*/; display:block; height:30px; line-height:30px; padding:0 10px 0 10px; text-decoration:none; }
.menu ul li ul {display:none; border:none;color: #000000; background: #FFFFFF;}
.menu ul li:hover a {background-color:#d7f1ff; text-decoration:none; color:#000000;}
.menu ul li:hover ul {display:block; position:absolute; z-index:999; top:29px; margin-top:1px; left:0;}
.menu ul li:hover ul li a {display:block; width:12em; height:auto; line-height:1.3em; margin-left:-1px; padding:5px 10px 5px 10px; border-left:solid 1px #004080; border-bottom: solid 1px #004080; background-color:#FFFFFF; color:#000000;}
.menu ul li:hover ul li a:hover {background-color:#d7f1ff; text-decoration:none;color:#000000;}
.menu table {position:absolute; top:0; left:0; border-collapse:collapse;color: #000000;background: #FFFFFF;}
.menu ul li a:hover {background-color:#d7f1ff; text-decoration:none;color:#000000;}
.menu ul li a:hover ul {display:block; width:12em; position:absolute; z-index:999; top:29px; left:0; }
.menu ul li a:hover ul li a {display:block; width:12em; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-left:solid 1px #004080; border-bottom: solid 1px #004080; background-color:#FFFFFF; color:#000000;}
.menu ul li a:hover ul li a:hover {background-color:#d7f1ff; text-decoration:none;color:#000000;}
Why isn't the menu centered on the page?
Its width is 100%, so it is centered, but not centred visibly (how can you center something that takes up 100% of the width?).
It may be easier to understand by looking at this fiddle.
Thirtydot also points out that margin: 8px is clobbering your previous setting of margin-left and margin-right.
Update
Here it is, working.
I would recommend changing your markup - having each in a separate ul is confusing.
Set margin:auto to center an element.
IE is a bit picky with centering elements, so do some tests. If it doesn't work in IE, set text-align:center to center the element's contents. Beware though, text-align is inherited as it cascades.
Try this.
body{
text-align:center;
}
.menu{
margin: 0 auto;
text-align:left;
width:750px; /*change width as needed*/
}
use display:inline for li & margin:auto and text-align:center for Ul
.header {
background: none repeat scroll 0 0 #231F20;
clear: both;
height: 20px;
}
.header ul {
clear: both;
height: 20px;
margin: auto;
text-align: center;
}
.header ul li {
display: inline;
list-style-type: none;
padding: 0 20px;
}
Here header is the div containing the menu ul & li
Related
I have a menu and a submenu. The submenu is only displayed when hovering over it.
QUESTION 1: I want it to be displayed permanently.
QUESTION 2: I would like it to be displayed horizontally (and not vertically as it is now).
To see what I mean, go to http://appartement-met-zeezicht.be and hover on "English". What is displayed under "English" should be displayed permanently, pereferably in a horizontal (and not vertical) way.
Thanks a lot!!
/SUBMENU/
topmenu ul li ul{ position:absolute;width:150px; z-index:999999; padding-left:0; margin-left:-10px; margin-top:24px; display:none;}
topmenu ul li ul li{ float:none; margin:0; padding:10px 0px; text-align:center; background:#302f2f url(images/pattern.png) repeat; display:block; border-bottom: 1px solid #333; height:auto;}
topmenu ul > li ul li:hover{ background:#2bb975 url(images/pattern.png) repeat;}
topmenu ul li ul li a{ font-size:14px; font-weight:normal; padding:4px;}
topmenu ul li ul li ul{left: 100%; margin-top:-27px; float:none; margin-left:0px;}
.tinynav, .tinynav1{ display:none;}
EDIT: it seems that some Javascript is overwriting the CSS, you can try to add this to style.css:
#topmenu ul li ul, #topmenu li:hover > ul {
display: block !important;
}
For the second question: in your style.css find the parts below /MENU/ and /SUBMENU/. Delete the next lines below those comments and paste this code instead:
/*MENU*/
#menu_wrap{width:100%; float:left; background:#302f2f url(images/menu_wrap.png) repeat;}
.is-sticky{ width:1000px!important;}
#topmenu{text-align:center;}
.menu-header{margin:auto; padding:0; display:block;}
#topmenu ul{ margin:0; padding:0;}
#topmenu ul li{list-style-type:none; display:inline-block; margin-top:0px;padding:25px 15px;}
#topmenu li a{ font-size:18px; color:#fff;}
#topmenu ul > li:hover{ background:url(images/transblack.png) repeat;}
#menu-icon{display:none;}
/*SUBMENU*/
#topmenu ul li ul{ position:absolute;width:auto; z-index:999999; padding-left:0; margin-left:-10px; margin-top:24px; display:none;}
#topmenu ul li ul li{ float:left; margin:0; padding:10px 0px; text-align:center; background:#302f2f url(images/pattern.png) repeat; display:block; border-bottom: 1px solid #333; height:auto;}
#topmenu ul > li ul li:hover{ background:#2bb975 url(images/pattern.png) repeat;}
#topmenu ul li ul li a{ font-size:14px; font-weight:normal; padding:4px;}
#topmenu ul li ul li ul{left: 100%; margin-top:-27px; float:none; margin-left:0px;}
You need to remove "Hover" this list.
And make this list "display: inline-block;"
You may need something like this:
ol {
display: inline-block;
vertical-align: top;
}
li {
display: inline-block;
margin-right: 10px;
width: 60px;
cursor: pointer;
vertical-align: top;
}
<div>
<ol>Spiderman</ol>
<ol>Wolverine</ol>
<ol>The Avengers <br>
<li>Iron Man</li>
<li>Captain America</li>
<li>Thor</li>
<li>Black Widow</li>
</ol>
</div>
In my drop-down menu the font colour of "li" is white and while "hover" the colour change to black and i have drop-down menu also .When hover the sub menu of my products link, the font colour products(li) changing to white my hover background is also white, here my question, how can I keep the colour of my "li" as black ??
my stylesheet
#menu{width:auto; margin: 0px 0px 0px 0px; background-color: #000; height:32px; float:right; border-radius:0px 0px 10px 10px ;}
#menu ul{list-style-type:none; margin:0px; padding:0px; margin-left:10px;}
#menu ul li{float: left; position: relative; margin-left:0px; height:29px; padding-top:3px;}
#menu ul li:active {color:#000;}
#menu ul li:hover{background-color: #f5f5f5; margin-left:0px; color:#000}
#menu ul li a{color: #fff; padding: 0 16px; line-height:25px; font-size:13px; font-family:arial; display: block; text-decoration:none; margin-left:0px;}
#menu ul li a:hover{background-color: #f5f5f5; margin-left:0px; color:#000;}
#menu ul li ul li{float: none; position: relative; margin-left:0px;}
#menu ul li ul{position: absolute; top:32px; left:0; display: none; background-color: #000; width:150px; margin-left:0px;}
#menu ul li:hover > ul{display: block; margin-left:0px; color:#000;}
#menu ul li ul li a{white-space: nowrap; line-height:25px; margin-left:0px;}
#menu ul li ul li ul{position: absolute; top:0; left:145px; display: none; background-color: #000; width:150px; margin-left:0px;}
my html code
<div id="menu">
<ul>
<li>Home</li>
<li>Profile</li>
<li>Product
<ul>
<li>Has Submenu</li>
<li>Has Submenu</li>
<li>Has Submenu</li>
<li>Has Submenu</li>
<li>Has Submenu</li>
</ul>
</li>
<li>Other Services</li>
<li>Contact Us</li>
</ul>
</div>
Add the following CSS:
#menu ul li:hover > a {
color: #000;
}
The problem was the anchor tag. No matter what color would you set for the li, the anchor tag has style color: #fff.
I have a demo here to illustrate my problem
http://www.ttmt.org.uk/
It's just a simple nav floated to the right and there is a drop down menu under 'Two'.
The drop down menu contain large buttons and I want the menu to stretch the with of the red bar above.
I got it working by giving the ul of the drop down menu a set with a negative left margin to pull it across.
#nav #topNav ul#fontSubMenu{
background:#e1e1e1;
left:-999em;
position:absolute;
padding:25px 0px 10px 22px;
margin:0 0 0 -784px;
z-index:120;
1width:100%;
width:1028px;
}
In Safari,Chrome (Mac) this seems to work but in Firefox it's a few pixels out.
Can anyone tell me why it's out in Firefox and is this the best way to do this.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css">
<style type="text/css">
body{
font:1em Helvetica, sans-serif;
color:#555;
}
#wrap{
background:red;
margin:0 auto;
position:relative;
width:1050px;
}
#nav{
overflow:auto;
}
#nav #topNav{
float:right;
}
#nav #topNav li{
float:left;
margin:0 0 0 6px;
}
#nav #topNav li:hover,
#nav #topNav li a:hover{
background:#e1e1e1;
color:#555;
}
#nav #topNav li:hover .subNav{
border-bottom:6px solid #e1e1e1;
z-index:21;
}
#nav #topNav li a{
border-top:6px solid red;
border-bottom:6px solid red;
display:block;
padding:13px 13px;
color:white;
font-size:.98em;
font-weight:bold;
text-decoration:none;
}
#nav #topNav ul#fontSubMenu{
background:#e1e1e1;
left:-999em;
position:absolute;
padding:25px 0px 10px 22px;
margin:0 0 0 -784px;
z-index:120;
1width:100%;
width:1028px;
}
#nav #topNav li:hover ul#fontSubMenu{
left:auto;
}
#nav #topNav li ul#fontSubMenu li{
margin:0 14px 14px 0;
}
#nav #topNav li ul#fontSubMenu li a{
border: 1px solid #f7f7f7;
display:block;
color:#555;
position:relative;
font-size:.98em;
line-height:1.3em;
font-weight:normal;
width:162px;
height:45px;
}
#nav #topNav li ul#fontSubMenu li a em{
position:absolute;
left:75px;
bottom:13px;
width:100px;
font-style:normal;
}
#nav #topNav li ul#fontSubMenu li a:hover{
background:#aaa;
}
</style>
</head>
<body>
<div id="wrap">
<div id="nav">
<ul id="topNav">
<li>One</li>
<li >Two
<ul id="fontSubMenu">
<li><em>Two One</em></li>
<li><em>Two Two</em></li>
<li><em>Two Three</em></li>
<li><em>Two Four</em></li>
<li><em>Two Five</em></li>
<li><em>Two Six</em></li>
<li><em>Two Seven</em></li>
<li><em>Two Eight</em></li>
<li><em>Two Nine</em></li>
<li><em>Two Ten</em></li>
<li><em>Two Eeleven</em></li>
</ul>
</li>
<li >Three</li>
<li >Four</li>
<li >Five</li>
</ul>
</div><!--nav-->
</div><!--wrap-->
</body>
</html>
Why not use absolute positioning? The menu will always be on the same place, right?
ul#fontSubMenu{
left: 0;
top: 58px;
margin: 0;
}
(And remove the left: auto you set on the hover).
Your demo is also off by about 1-2px on Chrome Windows btw.
i am using tinymce to make rich text area input and i have a css styled dropdown menu (only css, no javascript). the problem is, the dropdown menu is conflicting with tinymce.
i am giving a snapshot of the problem
here is my css for my drop down menu
#menu, #menu ul{
margin:0 90px;
padding:0 10px;
list-style-type:none;
list-style-position:outside;
position:relative;
line-height:1.5em;
}
#menu a{
display:block;
padding: 5px 15px 5px 15px;
border-top: 1px solid #ffffff;
color:#fff;
text-decoration:none;
background: #1D2D4F;
margin-left: 1px;
white-space: nowrap;
}
#menu a:hover{
background-color:#475A7F;
}
#menu li{
float:left;
position:relative;
width: 150px;
}
#menu ul {
position:absolute;
display:none;
width:11.3em;
margin: 0 -10px;
}
#menu li ul a{
width:11.3em;
height:auto;
float:left;
}
#menu ul ul{
top:auto;
}
#menu li ul ul {
left:12em;
margin:0px 0 0 10px;
}
#menu li:hover ul ul, #menu li:hover ul ul ul, #menu li:hover ul ul ul ul{
display:none;
}
#menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul, #menu li li li li:hover ul{
display:block;
}
.clear{
clear:both; !important
height:0;
font-size: 1px;
line-height: 0px;
}
how do i fix this problem?
Have you tried adding a z-index:100; to the drop down menu?
The number 100 is just for test, you can change it to another number later.
I have a fairly standard CSS driven drop down menu (the CSS for the lists & list items is below, if needed). All that I want to do it, is to center it in the browser (must support MS IE 7) ... but that seems to escape me :-(
Can somebody help me with this? Maybe a simple example? But really, I think that I probably just need a CSS class definition for an enclosing DIV ...
/*Color navigation bar normal mode*/
.menu a,
.menu a:visited {font-family:Arial, Helvetica, sans-serif;font-style:normal;font- weight:bold;font-size:12px;color: #000000;background-color: #FFFFFF;text-decoration: none;}
.menu ul {list-style-type:none;padding:0; margin:0;}
.menu ul li {float:left; position:relative; z-index:auto !important /*Non-IE6*/; z-index:1000 /*IE6*/; margin-right: 4px; border:solid 1px #004080; }
.menu ul li a {color: #000000;background: #FFFFFF;float:none !important /*Non-IE6*/; float:left /*IE-6*/; display:block; height:30px; line-height:30px; padding:0 10px 0 10px; text-decoration:none; }
.menu ul li ul {display:none; border:none;color: #000000; background: #FFFFFF;}
.menu ul li:hover a {background-color:#d7f1ff; text-decoration:none; color:#000000;}
/*Color main cells hovering mode*/
.menu ul li:hover ul {display:block; position:absolute; z-index:999; top:29px; margin-top:1px; left:0;}
.menu ul li:hover ul li a {display:block; width:12em; height:auto; line-height:1.3em; margin-left:-1px; padding:5px 10px 5px 10px; border-left:solid 1px #004080; border-bottom: solid 1px #004080; background-color:#FFFFFF; color:#000000;}
/*Color subcells normal mode*/
.menu ul li:hover ul li a:hover {background-color:#d7f1ff; text-decoration:none;color:#000000;} /*Color subcells hovering mode*/
.menu table {position:absolute; top:0; left:0; border-collapse:collapse;color: #000000;background: #FFFFFF;}
.menu ul li a:hover {background-color:#d7f1ff; text-decoration:none;color:#000000;}
/*Color main cells hovering mode*/
.menu ul li a:hover ul {display:block; width:12em; position:absolute; z-index:999; top:29px; left:0; }
.menu ul li a:hover ul li a {display:block; width:12em; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-left:solid 1px #004080; border-bottom: solid 1px #004080; background-color:#FFFFFF; color:#000000;}
/*Color subcells normal mode*/
.menu ul li a:hover ul li a:hover {background-color:#d7f1ff; text-decoration:none;color:#000000;}
/*Color subcells hovering mode*/
.menu ul li a:hover ul li a:hover {background-color:#d7f1ff; text-decoration:none;color:#000000;} /*Color subcells hovering mode*/
You can do it with the link g.b sent, but you can also do it by using display:inline-block; which will result in less code.
See this jsfiddle: http://jsfiddle.net/4Q5N2/
<div>
<ul>
<li>center</li>
<li>menu</li>
</ul>
</div>
-
div { background:orange; }
ul {
list-style:none;
text-align:center;
}
ul li {
display:inline-block;
zoom:1;
*display:inline;
margin:5px;
background:purple;
}