|
CSS - Css Menu List Styling
I've been hit with a problem that I think isn't possible, but I'm hoping that someone else here might be able to offer some sort of solution. It's a bit complicated to explain, so I'll try and give as much detail as I can.
I have a menu system set up on a site, and it's styled correctly for the way that one section works. It's a standard unordered list. FIRST MENU: Code: <ul>
<li>
<a href="page1.html">Link 1</a>
<ul>
<li><a href="page1.1.html">Link 1.1</a></li>
<li><a href="page1.2.html">Link 1.2</a></li>
</ul>
</li>
<li>
<a href="page2.html">Link 2</a>
<ul>
<li><a href="page2.1.html">Link 2.1</a></li>
</ul>
</li>
</ul>
SECOND MENU: Code: <ul>
<li>
<a href="page1.html">Link 1</a>
</li>
<li>
<a href="page2.html">Link 2</a>
</li>
</ul>
My problem is that I also need to style another menu match this - but the second menu has to have it's first-level links look like the second-level links in the first menu. This wouldn't be a problem normally as I'd be able to use different selectors, ID's or something else, but with this system, the menu is output from a closed function that I can't change. There's no ID's on the lists, and the classes are all the same. I can't change this, and I can't change the system to add anything else around each list to give it a better identifier. This means that both menus use the same CSS. The only way that I can see that I can do this is to set up a CSS rule that styles the list item either only of it contains another<ul> item, or if it doesn't contain another <ul> item. As far as I know that's not possible to do. Does anyone out there have an idea of where I can start with this? Similar TutorialsHello, I am creating a simple navigation bar using a list. My anchor tags inside each list item have a background and margin. The problem is they are overlapping. I then added to the li tag margin-top: 20px. The problem is that the bottom background of the last element disappears. I think I might doing something wrong on my styling because when I fix something, something else gets wrong. Could someone, please, help me out? HTML: <ul id="wmNavigation" class="Bar"> <li> <a title="Page1" href="http://www.name.com/page1">Page1</a> </li> <li> <a title="Page2" href="http://www.name.com/page1">Page2</a> </li> <li> <a title="Page3" href="http://www.name.com/page1">Page3</a> </li> <li> <a title="Page4" href="http://www.name.com/page1">Page4</a> </li> </ul> CSS: ul.Bar {} ul.Bar li { font: normal 1.2em Verdana, Geneva, sans-serif; letter-spacing: 0.1em; margin-top: 20px; } ul.Bar li a { background-color: #202020; color: #E2E2E2; padding: 4px 10px 6px 12px; text-decoration: none; } ul.Bar li a:link , ul.Bar li a:visited {} ul.Bar li a:hover, ul.Bar li a:active, ul.Bar li a:focus { background-color: #303030; } Thanks, Miguel Hi all I just want to change the colour of the dot on a ul/li list. Can anybody tell me how I can do that in CSS? Cheers. Hi all I just want to change the colour of the dot on a ul/li list. Can anybody tell me how I can do that in CSS? Cheers. Please look at the bottom of this page in FF - http://certified.tmhdesign.com The li elements have a margin-left or the ul a padding left. Can someone help me out? Here is my css ul#hp_offers{ width:600px; margin:0 0 0 10px; border:1px solid #e0e0e0; } ul#hp_offers li{ padding:3px 5px 3px 25px; border-bottom:1px solid #e0e0e0; list-style:none; list-style-type:none; margin:0; } li.even{ background: #f1efef url(../images/offer_even_bullet.gif) no-repeat 10px 7px; } li.odd{ background: #e0e0e0 url(../images/offer_odd_bullet.gif) no-repeat 10px 7px; } hi all, I want to show an ordered list in a particular way. I currently have an ordered on my site but instead of using <ol> and <li> tags, I am simply using text and <br>'s. So what I would like to do is use the <ol> and <li> tags to build the list, but have it appear in exactly the same way as my current setup. The list is only ever 5 items long, so all the extra spacing is not needed, it literally needs to look like this: 1. Item 1 2. Item 2 3. Item 3 and so on. So far, I have: Code:
.test ol {
margin:5px 0px 5px 40px;
padding:0 0 0 2px;
}
.test ol li {
color:#333333;
margin:2px -3px 2px -17px;
}
.test ol li a:link,
.test ol li a:active,
.test ol li a:visited,
.test ol li a:hover {
text-decoration:underline;
margin-left:-8px;
}
[code] <div class="test"> <ol> <li><a href="#">List item 1</a></li> <li><a href="#">List item 2</a></li> <li><a href="#">List item 3</a></li> <li><a href="#">List item 4</a></li> <li><a href="#">List item 5</a></li> </ol> </span> [/div] This looks perfect on IE, but there is still some left margin on the <li>s on FF and Opera and others. And I can't seem to get rid of it. Hoping you can help. Mark I have a css list menu which uses background images in place of bullets. What I'd like is for the user to visit the 'about' page and have the 'about' links background image be different from the rest. So the user can see from looking at the menu, what page they are on. Anyone able to suggest any methods of doing this? Would be appreciated =D Hello everyone! I would like to integrate a very simple purely css-based dropdown menu into my website. My knowledge of css is very basic, so I adapted a free sample menu, boiled it down (mostly through trial and error) to my very specific idea of what it should look like and finally ran into a problem which I could not solve myself so far. The following code represents "my" current code, with placeholder colors, text, links etc.: Code: <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Menu</title>
<style type="text/css">
/* background */
body {
background-color: #252525;}
/* targeted dropdown button style */
.dd-select {font: 10.5px Verdana; text-transform: uppercase;}
.dd-select a:link {color: #ff0000; text-decoration: none;}
.dd-select a:hover {color: #ffea00;}
/* positioning */
ul.Menu ul{display:none}
ul.Menu li:hover>ul{display:block}
ul.Menu ul{position: absolute; left:-1px; top:98%;}
ul.Menu li:hover{position:relative;}
/* shrink to fit */
ul.Menu {
float: left;}
/* dropdown button */
ul.Menu {
margin:0px;
list-style:none;
padding:0px;}
/* menu case */
ul.Menu ul {
margin:0px;
list-style:none;
padding:0px;
background-color:#5c5c5c;
border-color:#a3a3a3;
border-width:1px;
border-style:solid;}
/* menu element padding */
ul.Menu li{
margin:5px 5px 5px 5px;}
/* menu element */
ul.Menu a {
display:block;
background-color:#454545;
text-align:left;
padding:4px 9px 5px 9px;
font:normal 11.5px Verdana;
color: #f7f7f7;
text-decoration:none;}
/* menu hover */
ul.Menu li:hover>a{
background-color:#333333;
color: #00ff60;}
</style>
</head>
<body>
<ul class="Menu">
<li><a href="#" target="_top">Select</a>
<ul>
<li><a href="#" target="_top">Option 1</a></li>
<li><a href="#" target="_top">Option 2</a></li>
<li><a href="#" target="_top">Option 3</a></li>
</ul>
</li>
</ul>
<p> </p>
<p> </p>
<p class="dd-select"><a href="#">Select (as it should look)</a></p>
</body>
</html>
Now my problem is, I would like the dropdown menu's trigger button (labeled "Select") to look like the text link beneath (styled through .dd-select) instead of having it look like the the rest of the actual dropdown menu. So, different font size, decoration, colours, hover effect and, most importantly, no background color. The dropdown menu should of course keep its original look. Could anyone please give me a hint on how to accomplish this (perhaps with a code example or two) in an elegant way or maybe even refine my code to make it work? That would help me out a lot and I would like to thank everyone for reading and trying to help! Kind regards, Jakob Hi there, I'm playing around with a menu that is based on the 'suckerfish' method and basically, I am trying to change the background colour of one of the menu options. The problem is, I can't seem to do this in isolation - i.e. without messing up the other items in the menu. I've tried applying a background image to the <li> item, with no joy and I've also tried creating a separate div layer for this one option - again with no joy. **EDIT** Just worked out how to do this.... All I did was add [CODE]id="selected" it's best to get a visual of this one: www.viportals.com i'm talking about the buttons under the top banner. if you hover "Games", a drop down list appears. there is a 1pixel line between the "Games" button and its dropdown list (when you hover the "Games" button) which i want to get rid of, but can't. in IE, there are many horrible problems, probably due to the display:inline-block of the li a. the buttons are too tall and hang down below the bottom line of the horizontal bar, and the dropdown menu appears beside the "Games" button. i tried css Code: Original - css Code #sddm ul li a { padding-top: 0; padding-bottom: 0; margin-top:0; margin-bottom:0; }
#sddm ul li a {
in my separate ie css file, but its the same here is all the code if you need it to gain a better understanding (css, html, and js). css Code: Original - css Code /* DROP-DOWN NAVIGATION MENU */ #sddm { margin: 0; padding: 0; z-index: 30; } #sddm li { margin: 0; padding: 0; list-style: none; float: left; } #sddm li a { display: inline-block; text-decoration: none; color:#495B20; background-color:#BAD36B; border-left: 2px solid #fff; border-top: 2px solid #fff; border-right: 2px solid #000; border-bottom: 2px solid #000; } #sddm li a:hover { background-color:#495B20; color:#BAD36B; border-left: 2px solid #000; border-top: 2px solid #000; border-right: 2px solid #fff; border-bottom: 2px solid #fff; text-decoration:none; } #sddm li:hover div { position: absolute; visibility: hidden; margin: 0; padding: 0; background: #BAD36B; border-left: 2px solid #fff; border-top: 2px solid #fff; border-right: 2px solid #000; border-bottom: 2px solid #000; } #sddm li div { position: absolute; visibility: hidden; margin: 0; padding: 0; background: #BAD36B; border-left: 2px solid #fff; border-top: 2px solid #fff; border-right: 2px solid #000; border-bottom: 2px solid #000; } #sddm li div:hover { background-color:#495B20; color:#BAD36B; border-left: 2px solid #000; border-top: 2px solid #000; border-right: 2px solid #fff; border-bottom: 2px solid #fff; } #sddm li div:hover a{ background: #495B20; color: #BAD36B; } #sddm li div a { position: relative; display: block; margin: 0; padding: 5px 10px; width: auto; white-space: nowrap; text-align: left; text-decoration: none; border:none; font: 11px arial; } #sddm li div a:hover { text-shadow:#000; text-decoration:underline; border:none; } /* DROP-DOWN NAVIGATION MENU */ html Code: Original - html Code <div id='navbar'> <ul id="sddm"> <?php echo " <li> <a href='".get_home_link()."'> Home</a> </li> <li> <a href='".get_category_link("name=all&page=1")."'"; ?> onmouseover='mopen("m1")' <?php echo " onmouseout='mclosetime()'> Games</a> <div id='m1' onmouseover='mcancelclosetime()' onmouseout='mclosetime()'> "; $categories = get_categories("htmlize=true&order=order&sort=ASC"); foreach ($categories as $category) { $link=get_category_link("name="._sp($category['name'])."&page=1"); echo "<a href='".$link."'>".$category['name']; $category['gamenum'] = count(get_games("thecat="._sp($category['name']))); echo " (".$category['gamenum'].")"; echo "</a>"; } echo " </div> </li> <li> <a href='".get_users_link()."'> Members</a> </li> <li> <a href='".get_news_link()."'> News</a> </li> <li> <a href='".get_submit_link()."'> Submit</a> </li> <li> <a href='".get_links_link()."'> Links</a> </li> <li> <a href='".get_rules_link()."'> Rules</a> </li> <li> <a href='".get_faq_link()."'> FAQ</a> </li> <li> <a href='".get_contact_link()."'> Contact</a> </li>"; ?> </ul> <div style="clear:both"></div> </div>
<div id='navbar'>
<ul id="sddm">
<?php
echo "
<li>
<a href='".get_home_link()."'>
Home</a>
</li>
<li>
<a href='".get_category_link("name=all&page=1")."'";
?>
onmouseover='mopen("m1")' <?php echo "
onmouseout='mclosetime()'>
Games</a>
<div id='m1'
onmouseover='mcancelclosetime()'
onmouseout='mclosetime()'>
";
$categories = get_categories("htmlize=true&order=order&sort=ASC");
foreach ($categories as $category) {
$link=get_category_link("name="._sp($category['name'])."&page=1");
echo "<a href='".$link."'>".$category['name'];
$category['gamenum'] = count(get_games("thecat="._sp($category['name'])));
echo " (".$category['gamenum'].")";
echo "</a>";
}
echo "
</div>
</li>
<li>
<a href='".get_users_link()."'>
Members</a>
</li>
<li>
<a href='".get_news_link()."'>
News</a>
</li>
<li>
<a href='".get_submit_link()."'>
Submit</a>
</li>
<li>
<a href='".get_links_link()."'>
Links</a>
</li>
<li>
<a href='".get_rules_link()."'>
Rules</a>
</li>
<li>
<a href='".get_faq_link()."'>
FAQ</a>
</li>
<li>
<a href='".get_contact_link()."'>
Contact</a>
</li>";
?>
</ul>
<div style="clear:both"></div>
</div>
Hi There - Just finished the tutorial from List Apart. I've got the tabs working well, but I can't get the text colour to style in browsers (works fine in dreamweaver). I've been at this for so long that I'm sure I'm not seeing something that's obvious to fresh eyes. Could someone please look at my code and tell me where I'm being a bone-head? I've put the rules all over the place and can't seem to get the text-colour to go right. Thanks for your help. Here's the html: Code: <div id="tabnav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
Here's the CSS: Code: #tabnav {
float:left;
width:100%;
background:#FFFFFF url("tab_background.png")
repeat-x bottom;
line-height:normal;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
font-size: 13pt;
}
#tabnav ul {
margin:0;
padding:10px 10px 0;
list-style:none;
}
#tabnav li {
float:left;
background:url("tab_inactive_right.png")
no-repeat right top;
margin:0;
padding:0;
}
#tabnav a {
display:block;
background:url("tab_inactive_left.png")
no-repeat left top;
padding:8px 15px 4px;
}
#tabnav a:link{
color:293356;
text-decoration: none;
}
#tabnav a:hover{
color:596eba;
text-decoration: none;
}
/* Commented Backslash Hack
hides rule from IE5-Mac \*/
#tabnav a {float:none;}
/* End IE5-Mac hack */
#tabnav #current {
background-image:url("tab_active_right.png");
}
#tabnav #current a {
background-image:url("tab_active_left.png");
padding-bottom:5px;
}
On one of my pages I display an ordered list (see http://www.valleyspokesmen.org/cinderella_training2.php). I'd like to break up the twelve vertically displayed list items and display them six alongside six, with appropriate spacing between adjacent items, with item number 7 adjacent to item number 1, item 8 adjacent to item 2, etc. I searched this forum but found nothing addressing that sort of challenge. On my web page, my left column is floated left, the right column is floated right, and the center column is....well.....just trying to stay afloat :-) With that in mind, can you offer any advice on how to break up my ordered list so that it appears in two blocks of six items? thank you very much for your valuable time. I'm having troubles with a list menu. The first problem I have is that the menu options dont fill the whole of the menu but do in Firefox. The second problem is that the padding is different in IE and Firefox and I would like them to be the same. If anyone could help that would be great. http://departments.brooklands.ac.uk/wine/example/ Jemes I am having problems with a horizontal list menu. If you take a look at the link below I'm trying to get the top picture, menu and the main content area to all line up vertically. http://www.willisemail.co.uk/skill/ I may be wrong but the list menu seems to be the problem as it never lines up. Any help would be great or a suggestion on how to go about this another way. Thanks Jemes html { padding:0px; margin:0px; } body { background-color: #F5F5F5; font-size: 12px; color: #564b47; text-align:center; margin:0px; padding:0px; } /* Site Holder Start */ #box { width: 750px; margin: 0px auto; padding: 0px; text-align: left; border: 1px solid #979696; background-color: #FFFFFF; background-image:url(../Images/mid.jpg); } /* Site Holder End */ /* Site Holder Start */ #box2 { margin-left: 49px; margin-right: 50px; margin-top: 10px; margin-bottom: 10px; padding: 0px; text-align: left; } /* Site Holder End */ /* Content Start */ #content { width: 461px; padding:0px; background-color:#FFF; overflow: hidden; } /* Content End */ /* Content Start */ #content2 { margin-left: 14px; margin-right: 15px; margin-top: 0px; margin-bottom:0px; padding:0px; background-color:#FFF; overflow: hidden; } /* Content End */ /*Right Menu Start*/ #right { width: 178px; padding:0px; float:right; background-color:#FFF; overflow: auto; } /*Right Menu End */ .imgRight { text-align:center; margin-top: 10px; } .imgMain { text-align:center; margin-top:10px; border: 1px solid #979696; } .Menu { margin-top:10px; padding: 0px; } .Menu ul { padding: 0px; margin:0px; list-style-type:none; } .Menu li { display: inline; list-style-type:none; padding: 1px; margin:0px; } .Main { margin: 0px; border: 1px solid #979696; margin-top:8px; margin-bottom:10px; } Hi, I'm trying to make a simple rollover menu with a <ul><li> list. Here's my stylesheet: Code: .navigation{
width:768px;
height:26px;
padding: 94px, 0px, 10px, 5px;
z-index:999;
}
.navigation ul.nav li {display:inline}
.navigation ul.nav li a.link: hover{
color:#fbe8be;
font-family:times, serif;
font-size: 14pt;
text-decoration:none;
}
.navigation ul.nav li a.link:active{
text-decoration:none;
color:#bac4a1;
font-family:times, serif;
font-size: 14pt;
}
And here's my XHTML: Code: <div class="navigation"> <ul class="nav"> <li><a href="index.php" class="link">Home</a></li> | <li><a href="ScopeofServices.php" class="link">Scope of Services</a></li> | <li><a href="BaselineFees.php" class="link">Baseline Fees</a></li> | <li><a href="BaslineProcedures.php" class="link">Baseline Procedures</a></li> | <li><a href="Qualifications.php" class="link">Qualification<a></li> | <li><a href="contact.php" class="link">Contact Us</a></li> | <li><a href="considerations.php" class="link">Key Considerations & Pre-Conditions</a></li> </ul> </div> Here's the page: http://www.caillouette.com/SelvanSite/index.php Can anyone tell me why my rollovers don't work? thanks - Hi; I got two problem in my code. 1) a list of menu could not sit in the center. 2) a list menu has a gap from top in the Firefox, but there is not gap from top from IE browser. And in the IE Browser, the list of menu sit too hight on the top. How could i sit the list of menu in the center and there are about 1px gas or not gas between the top and the menu bar in IE and Firefox. my code as following; Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body {
font: 80% arial, helvetica, sans-serif;
background: white;
margin: 0;
}
#container{
position: relative;
width: 780px;
w\idth: 780;
border: solid #036;
border-width: 0 3px;
margin: auto;
}
#navlist
{
color: white;
text-align: center;
list-style-type: none;
padding-bottom: 1px;
}
#navlist li
{
bacground-color: #4c56d9;
margin-left: 1px;
display: inline;
border: 3px solid #4c56d9;
padding: 1px;
}
#navlist li a
{
text-decoration: none;
border: 2px solid #737be4;
padding: 2px;
color: white;
margin-left: 1px;
background-color: #4c56d9;
}
</style>
</head>
<body>
<div id="container">
<ul id="navlist">
<li id="active"><a href="#" id="current">Home</a></li>
<li><a href="#">Contact Us </a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Help</a></li>
</ul>
</div>
</body>
</html>
I'm embedding menumatic into a joomla 1.6 based website. Menumatic is just a slick css suckerfish menu with some mootools effects. http://greengeckodesign.com/menumatic Anyway, I've edited the CSS to look ALMOST right. The only problem is that I cannot get the menu as a whole to center correctly on the page. Anybody have any ideas about how i can do this? (In addition to the 100's of things I've tried, I've tried putting it in another set of div's and centering that div, but it didn't work ) below is all the code. I left the JS out, since it also runs (a bit less prettily) on pure css. Also, I have verified the CSS at w3. There are four lines that are not standard, but they are to do with the rounded corner borders, not the spacing or alignment. Edit: A bit more playing around and I have think it is a conflict with floating the items left. They need to display:block in order to display correctly so they also need to float (left) since they would otherwise be on separate lines (I think). Anybody have an idea about how to get around this? I tried to justify the text (that would be fine for my purposes), but it didn't work either. CSS: Code:
#mainMenu{
background-color: #036;
padding: 0px;
font-size: medium;
text-align: center;
}
/* Based partially on Matthew Carroll's keyboard accessible flavor of Suckerfish
* Dropdowns by Patrick Griffiths and Dan Webb.
* http://carroll.org.uk/sandbox/suckerfish/bones2.html
*/
/* ----[ LINKS ]----*/
/* all menu links */
.menuMain a, #subMenusContainer a{
text-decoration:none;
display:block;
padding:10px 20px;
background-color:#036 ;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
}
/* Just main menu links --[for non-javascript users this applies to submenu links as well]*/
.menuMain a{
margin:0;
float:left;
color:#fff;
}
/* Just sub menu links */
#subMenusContainer a, .menuMain li li a{
}
/* All menu links on hover or focus */
.menuMain a:hover, .menuMain a:focus, #subMenusContainer a:hover, #subMenusContainer a:focus, .menuMain a.mainMenuParentBtnFocused, #subMenusContainer a.subMenuParentBtnFocused{
background-color:#06c ;
color:#FFF;
}
/* sub menu links on hover or focus */
#subMenusContainer a:hover,
#subMenusContainer a:focus,
.menuMain a.mainMenuParentBtnFocused,
#subMenusContainer a.subMenuParentBtnFocused,
.menuMain li a:hover,
.menuMain li a:focus{
background-color:#06c ;
color:#FFF;
}
/* Parent Sub Menu Links ---[javascript users only]*/
.subMenuParentBtn{
background: url(../ottest/templates/ot_template/images/arrow_right.gif) right center no-repeat;
}
/* Parent Sub Menu Links on hover or focus ---[javascript users only]*/
.subMenuParentBtnFocused{
background: url(../ottest/templates/ot_template/images/arrow_right_over.gif) right center no-repeat;
}
/* Parent Main Menu Links ---[javascript users only]*/
.mainMenuParentBtn{
background: url(../ottest/templates/ot_template/images/arrow_down.gif) right center no-repeat;
}
/* Parent Main Menu Links on hover or focus ---[javascript users only]*/
.mainMenuParentBtnFocused{
background: url(../ottest/templates/ot_template/images/arrow_down_over.gif) right center no-repeat;
}
/* ----[ OLs ULs, LIs, and DIVs ]----*/
/* Submenu Outer Wrapper - each submenu is inside a div with this class - javascript users only */
.smOW{
display:none;
position: absolute;
overflow:hidden;
/*the 2px left & right padding lets you have a 1px border
on the ul or ol inside since overflow is set to hidden*/
padding:0 2px;
margin:0 0 0 -2px;
}
/* All ULs and OLs */
.menuMain, .menuMain ul, .menuMain ol, #subMenusContainer ul, #subMenusContainer ol {
padding: 0;
margin:0 20px 0 0;
list-style: none;
line-height: 1em;
}
/* All submenu OLs and ULs */
.menuMain ol, .menuMain ul, #subMenusContainer ul, #subMenusContainer ol {
/*border around submenu goes here*/
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
background:#036;
left:0;
}
/* List items in main menu --[for non-javascript users this applies to submenus as well] */
.menuMain li {
/*great place to use a background image as a divider*/
display:block;
list-style:none;
margin:0 5px;
position:relative;
float:left;
}
#subMenusContainer li{
list-style: none;
}
/* main menu ul or ol elment */
.menuMain{
display:block;
list-style:none;
margin-top:0px;
margin-bottom:0px;
margin-left:40px;
margin-right:auto;
z-index:5;
text-align: center;
display:block;
}
#subMenusContainer{ display:block; position:absolute; top:0; left:0; width:100%; height:0; overflow:visible; z-index:1000000000; }
/* --------------------------[ The below is just for non-javscript users ]--------------------------*/
.menuMain li li{ float:none; }
.menuMain li li a{ /* Just submenu links*/
position:relative;
float:none;
}
.menuMain li ul { /* second-level lists */
position: absolute;
width: 10em;
margin-left: -1000em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
margin-top:2.2em;
}
/* third-and-above-level lists */
.menuMain li ul ul { margin: -1em 0 0 -1000em; }
.menuMain li:hover ul ul { margin-left: -1000em; }
/* lists nested under hovered list items */
.menuMain li:hover ul{ margin-left: 0; }
.menuMain li li:hover ul { margin-left: 10em; margin-top:-2.5em;}
/* extra positioning rules for limited noscript keyboard accessibility */
.menuMain li a:focus + ul { margin-left: 0; margin-top:2.2em; }
.menuMain li li a:focus + ul { left:0; margin-left: 1010em; margin-top:-2.2em;}
.menuMain li li a:focus {left:0; margin-left:1000em; width:10em; margin-top:0;}
.menuMain li li li a:focus {left:0; margin-left: 2010em; width: 10em; margin-top:-1em;}
.menuMain li:hover a:focus{ margin-left: 0; }
.menuMain li li:hover a:focus + ul { margin-left: 10em; }
The menu html (an excerpt) Code: <html> <head> <link rel="stylesheet" href="MenuMatic.css" type="text/css" /> </head> <body> <div id="mainMenu" style="width:950px;"> <ul class="menuMain"> <li id="item-101" class="current active"><a href="/ottest/" >Home</a></li> <li id="item-102" class="deeper parent"><a href="/ottest/currentissuemenu" >Current Issue</a> <ul> <li id="item-133"><a href="/ottest/currentissuemenu/test-item-menu" >Test item menu</a></li> </ul> </li> <li id="item-103"><a href="/ottest/otblogmenu" >OT Blog</a></li> <li id="item-104"><a href="/ottest/previousissuesmenu" >Previous Issues</a></li> <li id="item-105"><a href="/ottest/classifiedsmenu" >Classifieds</a></li> <li id="item-124"><a href="/ottest/contact-us" >Contact Us</a></li> </ul> </div> </body> </html> Hi, I am working on this website atm: www.powys.gov.uk I have a problem with the menu, the problem is when you scale the browser window and the menu links(on the left column) are forced to wrap, the indentation of the link isnt the same e.g: Code: My Menu Link Has been wrapped I want it to be like: Code: My Menu Link Has been Wrapped The problem only occurs in IE, it looks perfect in Mozilla, can anyone offer any help on how I might fix this? I am out of ideas. Regards, Graham I'm trying to create a menu using 'list' but so far without much success :-( Problems? Not displaying horizontally in browser. Can't center text in box. Adding 'padding' didn't work. Any help would be much appreciated, Mike P.S. Please ignore the colors ;-) //paste.pocoo.org/show/207718/ Please add http to the above - I'm not yet allowed to .. |
|||||||