|
CSS - Text Indenting In Drop Down Menu
I am learning to do drop down menus and so far, so good. What I cannot figure out is that in the drop downs the text seems to be indented. For example, if the text said "New information", the "New" part starts what appears to be a few spaces to the right. I did, most recently, set the text to be centered but it still does this. The effect is that if the text wraps to a second line, then the second line is further to the left. Looks odd to me but I can't figure out how to fix it.
Thanks for any help. Richard Similar TutorialsHello, I have large paragraphs of text, and I would like to indent only the first lines of each of these paragraphs. I understand the text-indent property, although I do not know how to use it with only the first line of a large paragraph of text. Could anyone please offer a solution? Thanks! Hey, i've had this issue for some time now with no resolve... see here I have tried adding a background image to the menu, but to no avail. Here's the menu CSS; Code:
#leftmenu {
width:150px;
min-height:500px;
position:relative;
left:0;
top:1px;
background:#e5e5e5 url(images/menu_bg_left.gif) repeat-y;
float:left;
text-align:left;
font-size:8pt;
}
* html #leftmenu {
height:1px;
}
.lefttop {
width:150px;
height:40px;
background:url(images/menu_top_left.gif) no-repeat;
}
.leftbottom {
width:150px;
height:40px;
background:url(images/menu_bottom_left.gif) no-repeat;
}
ul#nav, ul#nav ul {
list-style: none;
width: 130px;
}
ul#nav li {
position: relative;
}
li ul.secondary {
position: absolute;
left: 100%;
top: 0;
display: none;
background-color: #EFEFEF;
z-index:400;
}
ul#nav li a:hover {
display: block;
text-decoration:none;
color:white;
background-color:#C4E500;
}
ul#nav li a {
display: block;
text-decoration: none;
color: #C4E500;
padding: 4px;
color:#333;
border-bottom:1px solid #d1d1d1;
}
/* Fix IE. Hide from IE Mac \*/
* html ul#nav li { float: left; height: 1%; }
* html ul#nav li a { height: 1%; }
/* End */
ul#nav li:hover ul, ul#nav li.over ul {
display: block;
}
thanks! Hey folks, strange issue here. despite the fact that i've set the z-index to 400 for the vertical drop down part of the menu, it's still being displayed underneath some of the text in the content part of the page. here's the menu style: Code:
#leftmenu {
width:150px;
min-height:500px;
position:relative;
left:0;
top:1px;
background:#e5e5e5 url(images/menu_bg_left.gif) repeat-y;
float:left;
text-align:left;
font-size:8pt;
}
* html #leftmenu {
height:1px;
}
.lefttop {
width:150px;
height:40px;
background:url(images/menu_top_left.gif) no-repeat;
}
.leftbottom {
width:150px;
height:40px;
background:url(images/menu_bottom_left.gif) no-repeat;
}
ul#nav, ul#nav ul {
list-style: none;
width: 130px;
}
ul#nav li {
position: relative;
}
li ul.secondary {
position: absolute;
left: 100%;
top: 0;
display: none;
background-color: #EFEFEF;
z-index:400;
}
ul#nav li a:hover {
display: block;
text-decoration:none;
color:white;
background-color:#C4E500;
}
ul#nav li a {
display: block;
text-decoration: none;
color: #C4E500;
padding: 4px;
color:#333;
border-bottom:1px solid #d1d1d1;
}
/* Fix IE. Hide from IE Mac \*/
* html ul#nav li { float: left; height: 1%; }
* html ul#nav li a { height: 1%; }
/* End */
ul#nav li:hover ul, ul#nav li.over ul {
display: block;
}
you can see what i'm talking about here. thanks hey guys, im not the greatest with css and html but i do it for fun to try and teach myself. Anyways I have a css drop menu set up on my site and I am having a problem with the width sizes in the actual drop down. The text length is of various sizes in the drop down. (some are long single words, some are 2 words etc) and I am using a width size of 11em which in all browsers using a standard screen res shows up fine. but if somebody uses a smaller screen res the text starts wrapping. Where you get the 2 word lines split into 2 lines. and then If i increase the size sometimes I get separate <li>'s on the same line. Its pretty frustrating. What I want to do is be able to increase the width size of the drop menu and even have all kinds of extra padding on the right if I want but without <li>'s spilling onto the next line or without <li>'s sitting on the same line cause its too big. Here is my CSS for the drop. Code: #nav li ul {
background: #FCDFFF;
background-image: url('images/background.png');
border-style: ridge;
border-width: 5px;
border-color: #000000;
margin-top: 0px;
position: absolute;
font-size: 95%;
width: 11em;
left: -999em;
line-height: 2;
z-index: 999;
}
anybody know how I can do what Im looking for? Thanks in advance! Hello everyone, I have a drop-down menu that is currently working well. The only change I need to make is to have the right edge of the drop-down menu to align with the right edge of the parent menu. When you hover over the menu, it currently "drops" down and to the right, with the left edges aligned. I want the menu to "drop" down and to the left, so the right edges are aligned. I have tried fiddling with floats and absolute/relative positioning. I'm not sure what needs to be changed. Any help you can provide is greatly appreciated! I'm learning via "cut and paste", so please go easy on any terminology you may use. Thank you! Here is the page: http://www.littlebuddymedia.com/site05/012.html The menu currently drops like this (aligned along the left edge): http://www.justskins.com/wp-content/uploads/2008/12/drop-down-menu.gif I want the menu to do this (align along the right edge; see how "Artists" is aligned under "Music" along the right edge): http://artatm.com/wp-content/uploads/2009/11/mtvmenu.JPG Here is my code: Code:
.chromestyle{
width: 100%;
font-weight: bold;
float: left;
height: 29px;
}
.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.chromestyle ul{
border: 0px solid #BBB;
width: 100%;
background: url(chromebg.gif) center center repeat-x; /*THEME CHANGE HERE*/
padding: 4px 0;
margin: 0;
text-align: right; /*set value to "left", "center", or "right"*/
}
.chromestyle ul li{
display: inline;
}
.chromestyle ul li a{
color: #000000;
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-left: 1px solid #DADADA;
}
.chromestyle ul li a:hover, .chromestyle ul li a.selected{ /*script dynamically adds a class of "selected" to the current active menu item*/
background: url(chromebg-over.gif) center center repeat-x; /*THEME CHANGE HERE*/
}
/* ######### Style for Drop Down Menu ######### */
.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #BBB; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
}
.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
padding: 2px 5px;
text-decoration: none;
font-weight: bold;
color: black;
}
* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}
.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #0000ff;
color: #fff200;
}
I have a left-hand side nagivation TD containing plain-text links. The TD is a fixed width and I want to be able to indent automatically the second line of text in a link should the text for the text for the link exceed the fixed width of the TD. Anyone know how to achieve this effect? An example of what I might want it to look like... Code: Link one Link two A longer link three Link four Following sample is from http://www.code-couch.com/jeff/snippets/general/tektips-navigation-example.html is what I am trying to reference to create a template. But how do I how keep the state of Menu on each requested page any help is appreciated. The following menu is saved in a separate jsp file i.e. navs.jsp. I include this navigation jsp file in all of my files. Initially the drop down looks like: Code: . Ask.Jeeves . [+] Google.com . [+] Yahoo.com Now clicking [+] in front of Google.com will look like. Code:
. Ask.Jeeves
. [-] Google.com
. Google.co.ie
. Google.co.ie
. [+] Google.co.nz
. [+] Yahoo.com
Lets's say now if I click on Google.co.ie it takes me to sample.jsp and on this requested page (sample.jsp) how can I show the following menu hierarchy with Google.co.ie bold/underlined/colorchanged showing what menu content I clicked and am viewing the appropriate content i.e. Code:
. Ask.Jeeves
. [-] Google.com
. Google.co.ie
. Google.co.ie
. [+] Google.co.nz
. [+] Yahoo.com
Same way clicking Google.com or Yahoo.com or Ask.Jeeves shows you the following hierarchy on the requested page with higlight/bold/colored the link we just selected. i.e. Code: . Ask.Jeeves . [+] Google.com . [+] Yahoo.com Any time clicking on the menu takes me to some page but on that page I want to show th hierarchy of the menu all the way to which is recently clicked with different color setting. Here is the source for the above: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<meta http-equiv="content-language" content="en"/>
<title>Test Harness</title>
<style type="text/css">
ul li ul {display:none;list-style-type: none;}
#myNav li a:hover {
color: blue;
}
#myNav li a:active {
color: #FF0000;
background: #FFFFFF;
}
#myNav { list-style-image: url(page.GIF); }
</style>
<script type="text/javascript">
<!--
function initNav() {
var navObj = document.getElementById('myNav');
var ulCollection = navObj.getElementsByTagName('li');
for (var loop = 0; loop < ulCollection.length; loop++) {
if(ulCollection[loop].getElementsByTagName('ul').length > 0) {
/* we have an LI that contains a UL */
if (ulCollection[loop].getElementsByTagName('span').length > 0) {
/* there is at least one SPAN tag present */
ulCollection[loop].getElementsByTagName('span')[0].innerHTML = "[<a href=\"javascript://\" onclick=\"this.innerHTML=this.innerHTML=='+'?'-':'+';temp=this.parentNode.parentNode.getElementsByTagName('ul')[0].style;temp.display=temp.display=='block'?'none':'block';\">+</a>] ";
}
}
}
}
window.onload = initNav;
//-->
</script>
</head>
<body>
<ul id="myNav">
<li><a href="http://www.askjeeves.com">Ask.Jeeves</a></li>
<li><span></span><a href="http://www.google.com">Google.com</a>
<ul>
<li><a href="http://www.google.co.uk">Google.co.uk</a></li>
<li><a href="http://www.google.co.ie">Google.co.ie</a></li>
<li><span></span><a href="http://www.google.co.nz">Google.co.nz</a>
<ul>
<li>*3*</li>
<li>*4*</li>
</ul>
</li>
</ul>
</li>
<li><span></span><a href="http://www.yahoo.com">Yahoo.com</a>
<ul>
<li><a href="http://www.yahoo.co.uk">Yahoo.co.uk</a></li>
<li><a href="http://www.yahoo.co.nz">Yahoo.co.nz</a></li>
</ul>
</li>
</ul>
</body>
</html>
Any help is really appreciated thanks. EDIT:: Simplier way to write the question ^.^ :: When I scroll off the menu/link onto the first link in the submenu it stays, but when I mvoe down to the next item in the submenu it disappears. (My drop down is vertically aligned on the left.) (bits of the code that relate to the menu) PHP Code: .btn1 { position: absolute; left: 165px; top: 200px; } .btn2 { position: absolute; left: 165px; top: 240px; } .btn3 { position: absolute; left: 165px; top: 280px; } .btn4 { position: absolute; left: 165px; top: 320px; } .btn5 { position: absolute; left: 165px; top: 360px; } .btn6 { position: absolute; left: 165px; top: 400px; } .btn7 { position: absolute; left: 165px; top: 440px; } .btn8 { position: absolute; left: 165px; top: 480px; } .link1 { position: absolute; left: auto; top: 240px; } .link2 { position: absolute; left: auto; top: 280px; } .link3 { position: absolute; left: auto; top: 320px; } .link4 { position: absolute; left: auto; top: 360px; } .link5 { position: absolute; left: auto; top: 400px; } .link6 { position: absolute; left: auto; top: 440px; } .link7 { position: absolute; left: auto; top: 480px; } .link8 { position: absolute; left: auto; top: 520px; } .link9 { position: absolute; left: auto; top: 560px; } #nav, #nav ul { padding: 0; margin: 0; list-style: none; } #nav a { display: block; width: 100px; } #nav li { width: 100px; } #nav li ul { position: absolute; width: 100px; left: -9999px; display: none; top: 0; z-index: 3; } #nav li:hover ul { display: block; left: 266px; z-index: 3; } #nav li:over ul { display: block; left: 266px; z-index: 3; } PHP Code: <ul id="nav"> <li><a href="HOBmain.htm"><img class="btn1" src="../mainbtn.gif" width="100" height="38" alt="MainBtn"></a></li> <li><a href="HOBmain.htm"><img class="btn2" src="../blogbtn.gif" width="100" height="38" alt="BlogBtn"></a> <ul> <li class="link1"><a href=""><img src="../mbtn.gif" alt="bMainBtn"></a></li> <li class="link2"><a href="#"><img src="../anmbtn.gif" alt="bAnimeBtn"></a></li> <li class="link3"><a href="#"><img src="../mgabtn.gif" alt="bMangaBtn"></a></li> <li class="link4"><a href="#"><img src="../gmebtn.gif" alt="bGameBtn"></a></li> <li class="link5"><a href="#"><img src="../bookbtn.gif" alt="bBookBtn"></a></li> </ul> </li> <li><a href="HOBmuse.htm"><img class="btn3" src="../musebtn.gif" width="100" height="38" alt="MuseBtn"></a> <ul> <li class="link2"><a href="HOBmuse.htm"><img src="../mbtn.gif" alt="mMainBtn"></a></li> <li class="link3"><a href="HOBmuse.htm"><img src="../pmbtn.gif" alt="mPoemBtn"></a></li> <li class="link4"><a href="HOBmuse.htm"><img src="../stybtn.gif" alt="mStoryBtn"></a></li> <li class="link5"><a href="HOBmuse.htm"><img src="../drmbtn.gif" alt="mDreamBtn"></a></li> </ul> </li> <li><a href="HOBodd.htm"><img class="btn4" src="../oddbtn.gif" width="100" height="38" alt="ComicBtn"></a> <ul> <li class="link3"><a href="HOBodd.htm"><img src="../mbtn.gif" alt="cMainBtn"></a></li> </ul> </li> <li><a href="HOBart.htm"><img class="btn5" src="../artbtn.gif" width="100" height="38" alt="ArtBtn"></a> <ul> <li class="link4"><a href="HOBart.htm"><img src="../mbtn.gif" alt="aMainBtn"></a></li> <li class="link5"><a href="HOBart.htm"><img src="../recbtn.gif" alt="aRecentBtn"></a></li> <li class="link6"><a href="HOBart.htm"><img src="../gaibtn.gif" alt="aGaiaBtn"></a></li> </ul> </li> <li><a href="HOBpic.htm"><img class="btn6" src="../picbtn.gif" width="100" height="38" alt="PicsBtn"></a> <ul> <li class="link5"><a href="HOBpic.htm"><img src="../mbtn.gif" alt="pMainBtn"></a></li> <li class="link6"><a href="HOBpic.htm"><img src="../recbtn.gif" alt="pRecentBtn"></a></li> </ul> </li> <li><a href="HOBfaq.htm"><img class="btn7" src="../faqbtn.gif" width="100" height="38" alt="FaqBtn"></a></li> <li><a href="HOBcon.htm"><img class="btn8" src="../contactbtn.gif" width="100" height="38" alt="ContactBtn"></a> </li> </ul> <script type="text/javascript" src="drop_down.js"></script> the "nav" is referring to a bit of js, and this is in my header. Also not sure if it's correct, but I can worry about that later. link: The Page 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! I working on a CSS to display a round-shouldered-tab menu. My result is acceptable: http://rickduley.webs.com/roundShoulderTabMenu.jpg except for the fact that the tabs are set below the menuBar on which the are supposed to display. I have run out of ideas. Would someone please set me on the right path? Thanks. P.S.: the code is at http://rickduley.webs.com/roundShoulderTabMenu.zip.kgb - you have to delete the 'dot key gee bee' suffix. Howdy. Take a look here. The menu is dropping behind the div for the body section in IE. I've tried mucking with the z-index, but it doesn't seem to make a difference. Here's the menu code; Code:
#menu {
width:780px;
height:28px;
background: #CCCCCC url(images/menu_img.gif) no-repeat center top;
}
ul#nav {
padding: 0;
margin:0 25px 0 25px;
list-style: none;
}
li.navB {
float: left;
position: relative;
width: 230px;
margin:7px 0 7px 0;
font:bold 12px arial, verdana, sans-serif;
text-decoration:none;
color:#2F60C0;
}
li ul {
display: none;
position: absolute;
top: 15px;
left: 0;
padding:5px;
width:100px;
list-style:none;
margin:0;
z-index:3;
}
li ul li{
padding:2px;
width:100px;
list-style:none;
margin:auto;
}
li:hover ul, li.over ul{
display: block;
background:white;
border:1px solid #333333;
width:100px;
padding:5px;
position:absolute;
}
and the body code Code:
.product_container {
width:720px;
margin:auto;
margin-top:4px;
margin-bottom:4px;
border:1px solid black;
min-height:270px;
position:relative;
clear:both;
z-index:1;
}
.product_info {
float:left;
width:500px;
position:relative;
z-index:1;
}
.product_image {
float:right;
margin:auto;
margin-top:20px;
margin-bottom:20px;
position:relative;
font:10px arial;
color:#666666;
text-align:center;
z-index:1;
}
.clear {
clear:both;
margin-top:-1px;
height:1px;
overflow:hidden;
}
Any thoughts? Thanks Hi, I am working on my site, and was wondering if anyone knew how to do a menu like this http://www.vh1.com/music/ The one on the left in blue.. how it turns to white. I am pretty sure this is done with css. Can anyone tell me how this is done? Thanks I'm playing around with CSS for the first time and have created a drop down menu that I would like to use for a site I have so any help would be greatly appreciated!!! I've placed the menu on its own page at h t t p : / / aztechnogeek . somee . com / cssmenu . html for accurate coding (just view source). - sorry as a new user I guess I can't post hyperlinks. What I would like to know how to do is when the cursor is moved down a menu list why the top hover attribute does not stay active??? Confusing I know but when you see the working menu you'll understand - I hope. Any help would be great, thank you!!! First let me start of with this for doing all this work for my drop down menu and then finding out that IE6 (apparently 50% of people browsing) doesn't support :hover except on anchor tags. Here is my situation. I finally got my drop down menu working. However, there are three issues. when I hover over the 'companies' menu item 1) the menu expands and pushes the 'blog' and 'contact' menu items further down the menu. I will say that I did not define a width on the li tags because this is actually for a wordpress theme and I wanted to allow for more pages that might be added later. I thought that by defining a width I would be more likely to fill up my menu container. 2) the child/nested li tags aren't under the parent li tag. Basically the sub-menu items show up to the bottom and right of the 'companies' menu item. I want them to show up directly underneath the parent menu item. 3) the longer sub-menu items (nested li tags) are not showing up on the same line. It's like there is a width that is causing them to overlap or go down to the next row. Not sure if that makes sense. I am wanting it to appear on one line no matter how long the menu item is. I am sure that not defining a width on the li tags have something to do with some of these problems but I wanted others to take a look at it. Code(validated) and styles below. Tried to keep it simple. there are two img files that I use as well but couldn't figure out how to upload those. Any and all help from the CSS gurus will be greatly appreciated. Code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Drop Menu Test</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="access">
<div id="menu-container">
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Compare</a></li>
<li><a href="#">Companies</a>
<ul>
<li><a href="#">Company number one</a></li>
<li><a href="#">Company 2</a></li>
<li><a href="#">Company #3</a></li>
<li><a href="#">Company number 4</a></li>
</ul>
</li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div><!--menu-->
</div><!--menu-container-->
</div><!--access-->
</body>
</html>
Code: body{
background-color: #999;
margin: 0;
}
ul,li {
margin: 0;
}
div#access {
margin: 0px;
background-repeat: repeat-x;
background-image: url(images/navbar-bckgrd.gif);
}
div#menu {
height:1.5em;
width:100%;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}
div#menu a {
color: #FFF;
text-decoration: none;
}
div#menu-container {
width: 974px;
margin-right: auto;
margin-left: auto;
height: 27px;
margin-top: 0px;
margin-bottom: 0px;
}
div#menu li {
list-style-type: none;
color: #FFF;
position: relative;
float: left;
height: 27px;
/*width: 6em;*/
font-size: 1.2em;
line-height: 1em;
}
div#menu ul a {
display:block;
margin-right:1em;
padding:0.2em 0.5em;
}
div#menu li a:hover {
background-image: url(images/hover%20menu.jpg);
background-repeat: repeat-x;
}
/*second teir*/
div#menu li ul {
display: none;
background-repeat: repeat;
background-color: #CCC;
margin: 0px;
}
div#menu li:hover ul {
display: inline;
float: left;
width: 10em;
height: auto;
}
div#menu li ul li {
font-size: 0.9em;
width: 7em;
margin-left: 0px;
}
div#menu li ul li a {
color: #000;
margin-left: 0px;
}
div#menu li ul li a:hover {
color: #FFF;
}
I have a horizontal menu that drops vertically when you hover over a menu item. In IE7, the menu hides behind images making it invisible if it drops in a spot where an image is at. I haven't been able to find the answer to my problem, so I'm hoping someone here is familiar with this issue. I should mention it works in Firefox, but I haven't tested any other browsers. I have created a style sheet drop down menu and it works fine in mozilla and most times in works in ie however sometimes the menu will not drop down in ie but when you hit refresh the menu drops down. any ideas. Below is my stylesheet for creating a css drop down menu - I am using csshover.htc for internet explorer and this in the html <!--[if IE]> <style type="text/css" media="screen"> body { behavior: url(<%lcURLTheme2%><%lcThemeName%>css/csshover.htc);} #menu ul li {float: left; width: 100%;} #menu ul li a {height: 1%;} </style> <![endif]--> #menu { z-index: 2000; background: url(../images/hoz_menu_BG.gif) repeat-x #8898BC; background-color: #8898BC; color: black; position: absolute; width: 100%; text-align: center; left: 0; cursor: pointer; font-size: .9em; font-weight: bold; font-family: Arial, Helvetica, sans-serif; border-bottom: 5px solid #CCD6EB; } /*top level for student*/ #menu #st ul { list-style: none; margin: 0; padding: 0; width: 19.7%; float: left; } /*2nd level for student*/ #menu #st ul ul { width: 80%; position: absolute; left: 0; z-index: 500; } /*3rd level for student*/ #menu #st ul ul ul { width: 90%; position: absolute; left: 100%; top: 1px; } #menu a { color: #FFFFFF; background-color: transparent; text-decoration: none; text-align: center; display: block; padding: 4px 2px 4px 5px; } #menu a:link { color: #FFFFFF; background-color: #4D678C; } #menu a:visited { color: #FFFFFF; background-color: #4D678C; } #menu a:hover { color: #000000; background-color: #ABBAD7; } #menu ul { border-right: 1px dotted #FFFFFF; } #menu li { position: relative; } #menu ul ul li {border-bottom: 1px solid #FFFFFF; } #menu ul ul { border-right: 1px solid #FFFFFF; } #menu ul ul { border-top: 1px solid #FFFFFF; } /*#menu ul ul ul { position: absolute; top: 0; left: 100%; }*/ div#menu ul ul , div#menu ul li:hover ul ul, div#menu ul ul li:hover ul ul { display: none; } div#menu ul li:hover ul, div#menu ul ul li:hover ul, div#menu ul ul ul li:hover ul { display: block; } /*2nd menu colours - uses #menu styles and then overwrites them for top menu links*/ div#menu ul li li a { color: white; background-color: #4D678C; text-transform: capitalize; text-align: left; border-left: 1px solid #FFFFFF; } an oxymoron i know it is... but i need my css menu to not drop down, but rather drop up, setting the tag to a negative top: value isnt working either, as not all the pop-up menu's used are the same height. Any suggestions, or tutorials that you know of? Hi this theme had an old dropdown menu that was acting weird in some browsers so I updated it with a plugin and now to need to customize it to look a certain way. There are a few stylesheets at work because of the plugin but I am unable to discern why the "Contact Us" text is off-center in the button. I can see that it seems to be too long, but I don't know why it is favoring the right side of the background, instead of being centered in the background. If someone could help me demystify this I would be MUCH obliged. I will post a link so that it can be inspected... When I am allowed after 4 more posts! Please inspect the elements (too much code to post with all different style sheets at play!). Thank you. EDIT: here is link: http://drewclifton.com/clients/northern-computer/ You can also see that the dropdown under 'Services' looks funky; I'm thinking a 'sliding door' solution would be appropriate yes? Thank you. |
|||||||