|
CSS - Making Horizontal Menu Boxes The Same Width?
I found this code online and I'm trying to alter it slightly for what I need.
Code: <html>
<head>
<style type="text/css">
body,html {
padding: 0;
margin: 10;
}
#navcontainer ul {
list-style-type: none;
padding: 0;
margin: 0;
text-align: center;
}
#navcontainer ul li {
display: inline;
}
#navcontainer ul li a {
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #036;
}
#navcontainer ul li a:hover {
color: #fff;
background-color: #acf;
}
</style>
</head>
<body>
<div id="navcontainer">
<ul>
<li><a href="#">Content</a></li>
<li><a href="#">Photographs</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Estate</a></li>
</ul>
</div>
</body>
It gives a nice center-aligned horizontal CSS menu. What I'm wondering is: How do I make it so that the width of each of the blue boxes the links are in are the same width? Say I want them all width: 180px; Where do I put that style so that it applies to all the links? [On a related issue, the style sheet has 4 things related to #navcontainer. How does one know which one of these to put additional styles in?] Thanks Much. j 9 Similar TutorialsI am trying to get a page that has 3 boxes in a row (horizontally) with the first two having a fixed width, and my problem is getting the third one to take up the rest of width - so I don't have to specifiy a width for the third one. I have tried the auto width which works great and shows up perfectly in Firefox but just leaves a not very wide box in IE. There is probably an easier or cleaner way to do this but this is what I have so far: CSS: #box1 { width:70px; height:120px; text-align:right; padding:10px; border: 1px solid gray; font-size:10px; position:absolute; top:250px; left:0px; } #box2 { width:70px; height:120px; text-align:right; padding:10px; border: 1px solid gray; font-size:10px; position:absolute; top:250px; left:97px; } #box3 { width:auto; /*WIDTH IN QUESTION*/ height:120px; text-align:right; padding:10px; border: 1px solid gray; font-size:10px; position:absolute; top:250px; left:194px; right:0px; } HTML: <body> <div id="box1">TEST</div> <div id="box2">TEST</div> <div id="box3">TEST</div> </body> We are redesigning and I have a CSS menu I like that runs vertically. I need a version that would also work running horizontal, with the drop downs underneath. Is this possible by tweaking my existing code? I got the code I am using from alistapart and I am not really too familiar with it. You can see it here http://www.caribbean-on-line.com/tables.html Thanks - Anthony Hi Is there a way to create a 100% width (liquid layout without table) Horizontal menu using <UL><LI>. I searched Google, but i found only the menus aligned either towards left or middle. Not extending to full width. When i give "width: auto" for LI then all the links get aligned towards the left. Or if i specify some particular width say 12.5% for each Li then when i make it to 800x600 screen its wrapping to second line. Hi, is there anyway to make the horizontal menu on the top of the webpage fit the entire width of the screen along with the titlebar? I mean, irrespective of the number of menu items, the menu should be exactly as wide as the screen. Thanks. Hi, Here is my problem: I have a horizontal css menu using a list. It is embedded within a table <td> element. The menu is floating to the left as I suppose is inteneded by the css code, but I want the whole list to be centered with respect to the <td> element. I put <td align=center> but that does not center the whole list. It is still flushed against the left side of the <td> element. Also, I want the entire list to cover the entire width of the <table>. How do I accomplish these tasks? I have searched on google without any success. thank you for your help in advance. Here is the CSS code and Html code for your reference: CSS: Code:
<style type="text/css">
.horizontalcssmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}
/*Top level list items*/
.horizontalcssmenu ul li{
position: relative;
display: inline;
float: left;
}
/*Top level menu link items style*/
.horizontalcssmenu ul li a{
display: block;
width: 80px; /*Width of top level menu link items*/
#width: 95px;
_width: 95px;
padding: 2px 8px;
border: 0px solid #202020;
border-left-width: 0;
border-right-width: 0;
text-decoration: none;
/*background: url(http://asc2009.dreamhosters.com/menubg.gif) center center repeat-x;*/
color: white;
font: bold 13px Tahoma;
}
.horizontalcssmenu ul li a:visited{
color:white;
#color:white;
/*background: url(menubgover.gif) center center repeat-x;*/
}
.horizontalcssmenu ul li a:hover{
background: yellow;
color: blue;
#color: blue;
/*background: url(menubgover.gif) center center repeat-x;*/
}
HTML Code: Code: <table width="900" height="20" border="0" cellpadding="0" cellspacing="0" style="border-bottom:1px solid black;"> <tr> <td background="menubg.jpg" align="center"> <div class="horizontalcssmenu" align="center"> <ul> <li><a href="default.htm">Home</a></li> <li style="border-left:1px solid black"><a href="default.htm">About Us</a></li> <li style="border-left:1px solid black"><a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()">Products</a></li> <li style="border-left:1px solid black"><a href="default.htm">Downloads</a></li> <li style="border-left:1px solid black"><a href="default.htm">Service</a></li> <li style="border-left:1px solid black"><a href="default.htm">Requests</a></li> <li style="border-left:1px solid black"><a href="default.htm">References</a></li> <li style="border-left:1px solid black"><a href="default.htm">What's New</a></li> <li style="border-left:1px solid black"><a href="default.htm">Contact Us</a></li> </ul> </div> </td> </tr> </table> Please visit my site where the menu is currently hosted. the url is http://asc2009.dreamhosters.com You will see my problem. You will notice when you hover your mouse over the last item in the menu, you will notice that the hover color does not go the whole way to the end of the td element. the list is flush to the left of the td element I need it to cover the whole width of the table. any help would be very much appreciated. I am having trouble getting my 3rd blue box to clear - I floated the first one left, gave the 2nd one a left margin enough to clear and leave space between it and the 1st box, and I am trying to do the same with the 3rd except it won't clear the 2nd box. I've been playing with the widths and left margins but nothing seems to work. I'm trying to get them equally spaced out in their containing DIV. Thanks for any help. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
margin:0;
padding:0;
text-align: center; /* IE5/Win fix */
}
#wrapper {
width:750px;
height:100%;
margin:0 auto 0 auto;
border:1px solid green;
text-align: left;
}
#bottomcontent {
width:auto;
height:auto;
/* border:1px solid #990; */
}
#leftboxes {
width:185px;
padding:5px;
float:left;
border:1px solid black;
}
.leftbox {
height:80px;
width:98%;
margin-bottom:10px;
border:1px solid orange;
}
#rightboxes {
width:535px;
padding:5px 0 0 0;
margin-left:200px;
border:1px solid pink;
}
.rightbox1, .rightbox2, .rightbox3 {
height:172px;
width:165px;
border:1px solid blue;
}
.rightbox1 {
float:left;
}
.rightbox2 {
margin-left:170px;
}
.rightbox3 {
margin-left:342px;
}
/* hide from IE/Mac \*/
* html #bottomcontent,* html #midbanner {
width:750.5px;
wid\th:750px;
}
/* end hide */
</style>
</head>
<body>
<div id="wrapper">
<div id="bottomcontent">
<div id="leftboxes">
<div class="leftbox">Ad #1</div>
<div class="leftbox">Ad #2</div>
<div class="leftbox">Ad #3</div>
</div>
<div id="rightboxes">
<div class="rightbox1">Package 1</div>
<div class="rightbox2">Package 2</div>
<div class="rightbox3">Package 3</div>
</div>
</div>
</div>
</body>
</html>
Hey guys, This seems like a really simple thing to accomplish, but I'm just having trouble locking on to what exactly to put in the code. Basically, I want to have two rows of four horizontal boxes, with the two rows of boxes and the contents of each box centered. How do I go about doing this? Should I use <span> for each box and then just use absolute positioning? Or should I put them in a container <div> or something? If anybody has any code samples, that would be a big help. I just want it to end up looking like this: [ ] [ ] [ ] [ ] [ ] [ ] [ ] [ ] ...with all the boxes centered on the page. Thanks for the help! - Luke Hi guys, I have been following the little tutorial at http://www.phoenity.com/newtedge/horizontal_nav/ It works just fine in Firefox, but not in IE. Do you know what changes would be needed to make it work in IE? I have a test up on my site, which is a copy of the code from Phoenity. I just copied his, but here is what I have: HTML Code: <ul class="nav"> <li><strong>Browsers</strong> <ul> <li><a href="http://mozilla.org/">Mozilla</a></li> <li><a href="http://mozilla.org/products/firefox/">Firefox</a></li> <li>..</li> <li..</li> </ul> CSS Code:
/*Nav bar styles*/
ul.nav,
.nav ul{
margin: 0;
padding: 0;
cursor: default;
list-style-type: none;
display: inline;
}
ul.nav{
display: table;
}
ul.block{
width: 100%;
table-layout: fixed;
}
ul.nav>li{
display: table-cell;
position: relative;
padding: 2px 6px;
}
/*
ul.nav>li:hover{
padding-right: 1px;
}*/
ul.nav li>ul{
display: none;
position: absolute;
max-width: 40ex;
margin-left: -6px;
margin-top: 2px;
}
ul.nav li:hover>ul{
display : block;
}
.nav ul li a{
display: block;
padding: 2px 10px;
}
/*Menu styles*/
ul.nav,
.nav ul,
.nav ul li a{
background-color: #fff;
color: #369;
}
ul.nav li:hover,
.nav ul li a:hover{
background-color: #369;
color: #fff;
}
ul.nav li:active,
.nav ul li a:active{
background-color: #036;
color: #fff;
}
ul.nav,
.nav ul{
border: 1px solid #369;
}
.nav a{
text-decoration: none;
}
I want to make the drop downs on suckerfish menus appear horizontally rather than vertically. Any ideas how to? PHP Code: <style type="text/css"> #nav, #nav ul { padding: 0; margin: 0; list-style: none; background-color: red; color: #000; } #nav a { display: block; width: 10em; color: #FFF; } #nav li { float: left; width: 10em; background-color: green; } #nav li ul { position: absolute; width: 10em; left: -999em; } #nav li:hover ul { left: auto; } #nav li:hover ul, #nav li.sfhover ul { left: auto; } </style> <ul id="nav"> <li><a href="#">Percoidei</a> <ul> <li><a href="#">Remoras</a></li> <li><a href="#">Tilefishes</a></li> <li><a href="#">Bluefishes</a></li> <li><a href="#">Tigerfishes</a></li> </ul> </li> <li><a href="#">Anabantoidei</a> <ul> <li><a href="#">Climbing perches</a></li> <li><a href="#">Labyrinthfishes</a></li> <li><a href="#">Kissing gouramis</a></li> <li><a href="#">Pike-heads</a></li> <li><a href="#">Giant gouramis</a></li> </ul> </li> <!-- etc. --> </ul> I thought I could change the BLOCK display of the #nav a to INLINE but that doesn't work. We want the dropdowns to appear as 1 2 3 4 5 rather than 1 2 3 4 5 Thanks see he http://www.christiancouriernewspaper.com/blogbase/contactpage.php What I want is for 7 fields (Name-State) on the Left just how they are Then I want the remaining fields (Country- the spam question) on the right I would like to have it so it all fits on one page without having to scroll any ideas/suggestions? the .css file is below Code: /*
----------------------------------------------------------------
GBCF-V3 BLUE STYLE SHEET - MIKE CHERIM HTTP://GREEN-BEAST.COM
----------------------------------------------------------------
To use for testing, this stylesheet must be named default.css
*/
/* === form div and elements ======================================= */
#form-div {
font-family : verdana, helvetica, palatino sans, tahoma, arial, sans-serif;
width : 70%;
margin : auto;
color : #FF8C00 ;
line-height : 1.2em;
}
#form-div p.form-footer {
margin : -35px 2px 20px 13px;
}
#form-div p.form-footer a {
color : #003366;
}
#form-div p.form-footer a:hover, #form-div p.form-footer a:focus, #form-div p.form-footer a:active {
color : #000;
text-decoration : none;
}
#form-div p.form-footer a:focus, #form-div p.form-footer a:active {
background-color : #eee;
}
/* === form div link styles ======================================== */
#form-div a {
color : #FF6600;
}
#form-div a:hover, #form-div a:focus, #form-div a:active {
color : #000;
text-decoration : none;
}
#form-div a:focus, #form-div a:active {
background-color : #eee;
}
/* === success and error message/results box ======================= */
#form-div p.success, #form-div p.error, #form-div p.center {
color : #fff;
/* color : #000; (lite colors option - uncomment to use) */
padding : 1px 4px;
border : 1px solid #000;
background-color : #003366;
/* background-color : #bfccd9; (lite colors option - uncomment to use) */
margin : 10px 3px;
text-align : center;
}
#form-div p.error {
background-color : #bb0000;
/* background-color : #edbaba; (lite colors option - uncomment to use) */
}
#form-div p.error a, #form-div p.success a {
color : #ffff7f;
}
#form-div p.center {
text-align : center;
background-color : #edbaba;
color : #000;
margin-top : -3px;
padding : 0px 4px;
}
#form-div p.error a:hover, #form-div p.error a:focus, #form-div p.error a:active,
#form-div p.success a:hover, #form-div p.success a:focus, #form-div p.success a:active {
color : #eee;
background-color : #bb0000;
}
#form-div p.success a:hover, #form-div p.success a:focus, #form-div p.success a:active {
background-color : #003366;
}
/* === structural form elements ==================================== */
form#gbcf-form { }
fieldset.main-set,
fieldset.req-set,
fieldset.opt-set {
border : 1px solid #eee;
padding : 5px;
}
/* === textural form elements ====================================== */
#form-div legend {
font-weight : bold;
}
#form-div legend span { }
legend.main-legend {
color : #777;
font-size : 100%;
}
legend.req-legend,
legend.opt-legend {
color : #777;
font-size : 60%;
}
legend.main-legend span { }
legend.main-legend { }
legend.req-legend span { }
legend.req-legend {
margin-left : -2px;
}
legend.opt-legend span { }
legend.opt-legend {
margin-left : -2px;
}
label.req-label, label.opt-label {
color : #FF6600;
font-size : 60%;
}
label.opt-label.check {
float : right;
padding : 0;
margin : 1px 4px;
cursor : pointer;
}
label.opt-label.main-label {
margin : 0 2px;
font-weight : bold;
font-size : 75%;
}
label.opt-label.main-label span {
font-weight : normal;
color : #FF6600;
font-sze : 60%;
}
label.opt-label.main-label span.req, label span.req {
font-weight : bold;
color : #c70000;
}
label.req-label.explain {
color : #666;
font-size : .8em;
}
label.req-label.explain:hover {
color : #000;
}
/* === control and interface form elements ========================= */
/*
note: In this section you will see the hover/focus styles for the
inputs. For example: input:hover, input:focus. You will also see
these names applied as classes: input.hover, input,focus, for
example. This is not done by mistake. Those classes are needed for
the JavaScript focus script (files/focus.js) for IE 7 and older.
*/
input.text-long.address, input.text-long.address:hover, input.text-long.address:focus,
input.text-long.address.hover, input.text-long.address.focus {
border-bottom : 0;
margin-bottom : 0;
padding-bottom : 2px;
border-bottom : 1px dotted #bbb;
}
input.text-long.address2, input.text-long.address2:hover, input.text-long.address2:focus,
input.text-long.address2.hover, input.text-long.address2.focus {
border-top : 0;
margin-top : 0;
padding-top : 2px;
border-top : 1px dotted #bbb;
}
input.checkbox {
border : 1px solid #999;
width : .9em;
height :.9em;
padding : 0;
margin : 0;
cursor : pointer;
}
input.checkbox:hover, input.checkbox.hover,
input.checkbox:focus, input.checkbox.focus {
border : 1px solid #666;
}
input.text-short,
input.text-med,
input.text-long,
select.select,
textarea.textarea {
font : 0.6em verdana, helvetica, palatino sans, tahoma, arial, sans-serif;
border : 1px solid #999;
background-color : #fffffe;
cursor : text;
padding : 1px 2px;
}
select.select {
padding : 1px 0;
}
input.text-short {
width : 75px;
}
input.text-med, select.select {
width : 150px;
}
input.text-long {
width : 175px;
}
textarea.textarea {
width : 220px;
height : 100px;
}
select.select, select.select option {
cursor : pointer;
}
input.text-short:focus, input.text-short.focus,
input.text-med:focus, input.text-med.focus,
input.text-long:focus, input.text-long.focus,
select.select:focus, input.select.focus,
textarea.textarea:focus, textarea.textarea.focus {
border : 1px solid #666;
background-color : #ffe;
}
input.button {
font : 0.9em verdana, helvetica, palatino sans, tahoma, arial, sans-serif;
font-weight : bold;
margin-top : 8px;
padding : 1px 10px;
cursor : pointer;
float : right;
clear : both;
color : #003366;
}
input.button:hover, input.button.hover,
input.button:focus, input.button.focus {
color : #333;
}
/* because IE6 sucks - if you have a conditionally served IE6 style sheet add this to it */
* html input.button {
border : 1px solid #666;
}
/* EOF - Created by Mike Cherim @ http://green-beast.com =========== */
thanks ahead of time!!! i ve been playing with my page and been trying to modify the width of the page (divs) according to the browswer's width. The problem is i want the navigation menu on left to be fixed width (say 200px) and the center div and the right column to be variable width. Also, i want to set a minimum width , so that the floating divs dont roll below the navigation menu. here s the link to the page. try reducing ur browser windows size . the content div rolls down under theleft nav menu. http://ccc.1asphost.com/pacemakerpr...r/cicuitlab.htm Also , i get wierd result in netscape navigator. please help how can i make list items that are in a horizontal list all the same width. I try adding the width attribute to it but it has no effect Hi there, Is it possible to set a border's width? when I say width I mean it's horizontal width not height. Many thanks Is there any way to have horizontal list items automatically fill any given width? for example, If I have 5 list items, I can set each width to 20% and the list will fill the width of the container, but if I don't set a width, then they collapse to the left. the behavior I'm after is like a table. The 'old' way to create a horizontal list would be to create a table with one row and 5 cols. Setting the width of the table to 100% would make each cell 20% automatically. Any way to accomplish this in css without explicitly setting the width? new to the world of css and now working on a shell for a website I'm doing. here is the css PHP Code: html, body{ margin:0; padding:0; } h1, h2, h3, h4, h5, h6 { color: #bf9060; } img { padding-bottom: 2px; } #pagewidth{ width:100%; min-width: 500px; } #header{ height:88px; width:100%; background:#ccae8f; background-image: url("/images/pillowback3.jpg"); background-repeat: repeat-x; } #navcontainer { margin: 0; padding: 0; height: 25px; width: 100%; } #navcontainer ul { border: 0; margin: 0; padding: 0; list-style-type: none; text-align: center; } #navcontainer ul li { display: block; float: left; text-align: center; padding: 0; margin: 0; } #navcontainer ul li a { background: #ffffff; width: 125px; height: 18px; border: 1px solid #ccae8f; padding: 0; margin: 0; color: #000000; text-decoration: none; display: block; text-align: center; font: normal 14px/22px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif; } #navcontainer ul li a:hover { color: #ffffff; background: #806c59; } #navcontainer a:active { background: #806c59; color: #ffffff; } #navcontainer li#active a { background: #c60; border: 1px solid #c60; color: #fff; } and the list PHP Code: <div id="navcontainer"> <ul id="navlist"> <li><a href="/pillows.php" title="Everything you need for your pillow needs">Home</a></li> <li><a href="/build/index.php" title="Start here for the Best Pillows the net has to offer">Build</a></li> <li><a href="/samples/index.php" title="Pick up to 8 samples ">Samples</a></li> <li><a href="/products/index.php" title="See our full line of Products">Products</a></li> <li><a href="/about/index.php" title="Meet our staff. How PillowWorks works.">About</a></li> <li><a href="/contact/index.php" title="Contact us for any reason">Contact</a></li> </ul> </div> as you can see i'm using px to style the size of the elements, but that isn't very liquid Hi all, I've got a horizontal menu that is working just fine in every browser but IE 6 and 7. In IE it's almost there, except that the submenus will only appear one level deep. The menu is created with nested lists. The :hover functionality is simulated via JavaScript for IE 6. The IE developer toolbar shows the 3rd level menu is correctly being changed to display: block when its parent is hovered, and the border the dev toolbar draws even puts it in the correct place, it just doesn't actually appear. You can find the page he http://www.perceptes.com/topdog/ The CSS and JS (uses jQuery) can be found he http://www.perceptes.com/topdog/css/screen.css http://www.perceptes.com/topdog/css/ie.css (loaded with a conditional comment) http://www.perceptes.com/topdog/js/tdps.js http://www.perceptes.com/topdog/js/ie.js (loaded with a conditonal comment) For a specific example of what I'm talking about, try hovering over the second item, Filters & Parts. This will give you another level with four choices. Each of those also has child elements, but when hovered over, the next level doesn't appear. Try it in something other than IE 6 or 7 to see how it's supposed to look. Thanks very much in advance! Gday CSS PPL, Im still yet to test on other browers, but im using IE 6.0 while the explorer is full screen the width of my div is 100% But when i resize the browser on the horizontal untill a horizontal scroll bar appear, and scroll to the right, the div cuts off where the scrolling begins, div.banner { background-image: url(../images/banner_repeat.gif); width:100%; height:163px; text-align:center; } and yeah, the background image 'banner_repeat' stops repeating at that point. any help would be great, Thx in advance, James I think this is a very basic quesiton, but I am stumped with it. How can I make a paragraph that will be a specific width in the middle of the page for example regardless of the size of the monitor or browser window - that is, the paragraph will stay the same width even though it is on a page that will stretch to fill the entire window? This can be done of course with tables, but I would like to know how to do it with CSS. The margin property seems of no help because you must assume a given size of the page or parent element. Ok, I know virtually nothing about css, but realized that that a css menu is better for SEO. Anyway I found this vertical menu that works the way I want it. But I also need a horizontal version of it with dropdown submenus. Can someone help with this? I have been trying a bunch of things but it just looks awful and doesn't work right. It has 3 basic componets; Html, Javascript, and css. Here they are below. drop_down.js: Code: // JavaScript Document
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Horizontal Drop Down Menus</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="drop_down.js"></script>
<style type="text/css">
@import "style2.css";
</style>
</head>
<body>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Offices</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Internet Marketing</a></li>
<li><a href="#">Hosting</a></li>
<li><a href="#">Domain Names</a></li>
<li><a href="#">Broadband</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a>
<ul>
<li><a href="#">United Kingdom</a></li>
<li><a href="#">France</a></li>
<li><a href="#">USA</a></li>
<li><a href="#">Australia</a></li>
</ul>
</li>
</ul>
</body>
</html>
Style2.CSS: Code: body {
font: normal 11px verdana;
}
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}
ul li {
position: relative;
}
li ul {
position: absolute;
left: 149px; /* Set 1px less than menu width */
top: 0;
display: none;
}
/* Styles for Menu Items */
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */
li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
li:hover ul, li.over ul { display: block; } /* The magic */
|
|||||||