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.
Related
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 problem with CSS white space between words of the menu bar. I tried numerous ways but still cant solve it. Can someone help me here?
The picture of the menu problem can be seen below:
http://imageshack.us/photo/my-images/201/44262065.jpg/
I want the outcome to be like this, lesser space between each menu:
http://i47.tinypic.com/2vvwcnn.jpg
Here is my css:
#cssmenu{
border:none;
border:0px;
margin:0px;
padding:0px;
font-family:verdana,geneva,arial,helvetica,sans-serif;
font-size:14px;
font-weight:bold;
color:8e8e8e;
}
#cssmenu ul{
background:url(img/menu-bg.gif) top left repeat-x;
height:43px;
list-style:none;
margin:0;
padding:0;
}
#cssmenu li{
float:left;
padding:0px 0px 0px 132px;
display: inline-block;
}
#cssmenu li a{
color:#666666;
display:block;
font-weight:bold;
line-height:43px;
padding:0px 0px;
text-align:left;
text-decoration:none;
}
#cssmenu li a:hover{
color:#000000;
text-decoration:none;
}
#cssmenu li ul{
background:#e0e0e0;
border-left:2px solid #f68618;
border-right:2px solid #f68618;
border-bottom:2px solid #f68618;
display:none;
height:auto;
filter:alpha(opacity=95);
opacity:0.95;
position:absolute;
width:180px;
z-index:200;
/*top:1em;
/*left:0;*/
}
#cssmenu li:hover ul{
display:block;
}
#cssmenu li li {
display:block;
float:none;
padding:0px;
width:180px;
}
#cssmenu li ul a{
display:block;
font-size:12px;
font-style:normal;
padding:0px 10px 0px 15px;
text-align:left;
}
#cssmenu li ul a:hover{
background:#949494;
color:#000000;
opacity:1.0;
filter:alpha(opacity=100);
}
#cssmenu p{
clear:left;
}
#cssmenu .active > a:hover {
color:#ffffff;
}
Here is my html code:
<div id='cssmenu'>
<ul>
<li><a href='index.php'><span>Home</span></a></li>
<li><a href='promotions.php'><span>Promotions</span></a></li>
<li><a href='outlets.php'><span>Outlets</span></a></li>
<li><a href='feedback.php'><span>Feedback</span></a></li>
<li class='has-sub '><a href='#'><span>Career</span></a>
<ul>
<li><a href='stall.php'><span>Stall Leasing</span></a></li>
<li><a href='career.php'><span>Career Opportunity</span></a></li>
</ul>
</li>
<li><a href='contactUs.php'><span>Contact Us</span></a></li>
</ul>
</div>
use this decrease your padding of li and line-height also
#cssmenu li{
float:left;
padding:30px;
display: inline-block;
}
Try removing the padding from .border class, row 311 in you blue round.css file
In the following css code the bottom and top borders appear to overlap which causes a thick line and I can't seem to figure out how to remove it. Any advice is appreciated! Thank you.
html code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="" content="">
<link href="navCSS.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="navMenu">
<ul>
<li>Products
<ul>
<li>link item</li>
<li>link item</li>
<li>link item</li>
<li>link item</li>
</ul> <!--inner UL-->
</li> <!--main LI-->
</ul> <!--main UL-->
<br class="clearFloat">
</div> <!--navMenu->
</div> <!-- wrapper -->
</body>
</html>
css code:
#navMenu{
margin:0;
padding:0;
}
#navMenu ul{
margin:0;
padding:0;
line-height:30px;
}
#navMenu li {
margin:0;
padding:0;
/*removes the bullet point*/
list-style:none;
float:left;
position:relative;
background: #fff;
}
/*for top level */
#navMenu ul li a{
text-align:center;
font-family:"calibri";
text-decoration:none; /*remove underline*/
/*height width for all links*/
height:30px;
width:150px;
display:block;
border: 1px solid #ccc;
color: #777;
}
/* hiding inner ul*/
#navMenu ul ul{
position:absolute;
visibility:hidden;
/*must match height of ul li a*/
top:32px;
}
/*selecting top menu to display the submenu*/
#navMenu ul li:hover ul{
visibility:visible;
}
#navMenu li:hover{
background-color: #F9F9F9;
}
#navMenu ul li:hover ul li a:hover{
color: E2144A;
}
#navMenu ul li a:hover{
color: E2144A;
}
You should take out the top border i.e.
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
instead of
border: 1px solid #ccc;
margin-top 0 px; apple below class.
#navMenu ul li a{
text-align:center;
font-family:"calibri";
text-decoration:none; /*remove underline*/
/*height width for all links*/
height:30px;
width:150px;
display:block;
border: 1px solid #ccc;
border-top:0px;
color: #777;
}
I added a selector to remove the bottom border on all items except the last.
http://jsfiddle.net/GWcnK/5/
#navMenu ul li:not(:last-child) a {
border-bottom-style: none;
}
Add this to your list items in the drop down:
li {
margin-bottom: -1px;
}
You can also do margin-top: -1px - but this should give you an idea of how to go about it.
I have a CSS drop down menu that drops up instead of down. What could be wrong? here is the code and the aspx tags related to the problem. this is inside the master page; also on the pages inside ContentPlaceHolder1 eveything inside tags!
.wrapper {
position:relative; height:25px;
}
.mainmenu {
z-index:100;
font-family:Verdana, Geneva, sans-serif;
font-weight:normal;
font-size:90%;
line-height:25px;
left:50%;
margin-left:-303px;
width:606px;
}
ul.menu {
padding:0;
margin:0;
list-style:none;
width:100px;
overflow:hidden;
float:left;
margin-right:1px;
}
ul.menu a {
text-decoration:none;
color:#fff;
padding-left:5px;
position:absolute;
}
ul.menu li.list {
float:left;
width:250px;
margin:-32767px -125px 0px 0px;
background:url(images/top1.png) no-repeat left bottom;
}
ul.menu li.list a.category {
position:absolute;
z-index:50;
display:block;
float:left;
width:120px;
margin-top:32767px;
background:transparent;
}
ul.menu li.list a.category:hover,
ul.menu li.list a.category:focus,
ul.menu li.list a.category:active {
margin-right:1px;
background-image:url(images/tophover1.png);
background-repeat:no-repeat;
background-position:left top;
}
ul.submenu {
float:left;
padding:25px 0px 0px 0px;
margin:0;
list-style:none;
background-image:url(images/tophover1.png);
background-repeat:no-repeat;
background-position:left top;
margin:-25px 0px 0px 0px;
}
ul.submenu li a {
float:left;
width:120px;
background:#369;
clear:left;
}
ul.submenu li a.endlist {
background:url(images/bottom1.png);
}
ul.submenu li a.endlist:hover,
ul.submenu li a.endlist:focus,
ul.submenu li a.endlist:active {
background:url(images/bottomhover1.png);
}
ul.submenu a:hover,
ul.submenu a:focus,
ul.submenu a:active {
background:#900;
margin-right:1px;
}
// and here is the portion of aspx
<div id="slidemenu" >
<ul id="nav">
<li>Home</li>
<li>History</li>
<li>....</li>
<li>Careers</li>
<li>Contact</li>
<li><span> ... </span> </li>
<li class="list">
<a class="category" href="....aspx"> ... </a>
<ul class="submenu" >
<li>1st drop down menu</li>
<li>2nd drop down menu</li>
</ul>
</li>
</ul>
</div>
<!-- ------------ -->
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
Apply this css to your menu text blocks:
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
You should post some code, but I wrote something that may help:
see it in action:
http://jsfiddle.net/HE8uj/
pasted code:
<div class="menu">
<em>hover me!</em>
<ul>
<li> item one </li>
<li> item two </li>
<li> item three </li>
</ul>
</div>
.menu {
font-size: 12px;
width: 100px;
background: #eee;
border: solid 1px black;
margin:1px;
height:20px;
position:relative;
}
.menu * {
display:block;
padding:0; margin:0;
}
.menu em {
padding:5px;
}
.menu ul {
display:none;
}
.menu:hover ul {
display:block;
position:absolute;
width:100%;
bottom:100%; /* change to TOP and it will drop down */
border:solid 1px black;
background: #fff;
}
.menu li {
padding:5px;
}
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