ok, i know how to create a drop down menu using css, the only problem is that all of the code i have used doesnt apply to this. Here is what i have: I have a nav menu in tables (i know why am i using tables) i have one sub section that needs to appear to the right of a link.
#wrapper {
text-align:left;
margin:0px;
width:195px;
border:1px solid #000000;
padding:0px;
background-color:#FFFFCC;
}
#wrapper a {
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
text-align:left;
color: #333333;
text-decoration:none;
}
#wrapper a:hover {
color: #003366;
text-decoration:underline;
}
#wrapper li {
position:relative;
}
#wrapper ul {
list-style: none;
margin: 0;
padding: 0;
position: relative;
top: 0;
left: 100%;
width: 100%;
display:block;
}
#wrapper ul li {
width:100%;
border-left:1px solid #000000;
border-bottom:1px solid #000000;
border-right:1px solid #000000;
background-color:#FFFFCC;
color:#000000;
}
#wrapper a ul li:hover ul li {
display:none;
}
#wrapper is the main table
so why wont this work, im not a pro so i am sure there are mistakes. If you can help me please do so, if you have any questions please ask.
Thank you.
ok new plan
let me know if you want to take a look at my whole script, i can send it to you. There are only a few images not pertaining to the page. I have made some changes.
http://csscreator.com/menu/mu
thanks but...
I know how to do all of that, its just the problem is im trying to manipulate that code into using it on tables
the problem is what do i call to hover over i have right now
th:hover ul li
this is the only area where i use the tags ul and li
jcdevelopment wrote:I know
I know how to do all of that, its just the problem is im trying to manipulate that code into using it on tables
don't?
what do you mean dont?
what do you mean dont?
use the appropriate UL and
use the appropriate UL and LI and then stick that into a table where the nav should be?
see, i thought i was here
see, i thought i was here take a look at both
CSS:
div#listmenu li {
float:left;
list-style-type:none;
}
div#listmenu ul {
position:absolute;
list-style: none;
margin-left:120px;
padding: 0;
}
body div#listmenu ul li {
width:100%;
border-left:1px solid #000000;
border-bottom:1px solid #000000;
border-right:1px solid #000000;
border-top:1px solid #000000;
background-color:#FFFFCC;
color:#FFFFFF;
text-indent:4px;
visibility: hidden;
}
div#listmenu a:hover ul li, div#listmenu ul li {
elevation:above;
visibility: visible;
}
HTML:
Where did i mess up?
Get rid of the tables
Get rid of the tables entirely, it's completely unnecessary.
well, i have pictures placed
well, i have pictures placed in a specific area, so the tables control it better, and i had already created it so i just wanted to see if there was a way. Is there a way?
Yes, and ditching tables is
Yes, and ditching tables is a better way to do it.
If you post all your HTML and CSS (in between code tags please) we can have a more in-depth look at it.
ok, take a look at it here
ok, take a look at it
here is the whole thing
Left nav 2.0
* th {
padding-left:2px;
}
body {
behavior: url(csshover.htc);
}
#wrapper {
text-align:left;
margin:0px;
width:195px;
border:1px solid #000000;
padding:0px;
background-color:#FFFFCC;
}
#wrapper a {
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
text-align:left;
color: #333333;
text-decoration:none;
}
#wrapper a:hover {
color: #003366;
text-decoration:underline;
}
div#tableb th{
border-bottom:1px solid #000000;
border-right:1px solid #000000;
border-left:0px;
}
div#tableba th{
border-bottom:1px solid #000000;
border-right:1px solid #000000;
border-left:0px;
}
div#tableb2 th{
border-bottom:1px solid #000000;
border-right:1px solid #000000;
border-left:0px;
}
div#tableb3 th{
border-bottom:1px solid #000000;
border-right:1px solid #000000;
border-left:0px;
}
div#tableb4 th{
border-bottom:1px solid #000000;
border-right:1px solid #000000;
border-left:0px;
}
div#tableb5 th{
border-bottom:1px solid #000000;
border-right:1px solid #000000;
border-left:0px;
}
div#tableb6 th{
border-bottom:1px solid #000000;
border-right:1px solid #000000;
border-left:0px;
}
div#tableb7 th{
border-bottom:1px solid #000000;
border-right:1px solid #000000;
border-left:0px;
}
.style1 {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-align:center;
color:#000000;
}
.style2 {
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
text-align:left;
color: #333333;
}
a.style2{
text-decoration:none;
}
.style3 {font-family:Arial, Helvetica, sans-serif;
font-size:10px;
text-align:left;
color: #000000;
text-align:center;
}
div#listmenu li {
float:left;
list-style-type:none;
}
div#listmenu ul {
position:absolute;
list-style: none;
margin-left:120px;
padding: 0;
}
body div#listmenu ul li {
width:100%;
border-left:1px solid #000000;
border-bottom:1px solid #000000;
border-right:1px solid #000000;
border-top:1px solid #000000;
background-color:#FFFFCC;
color:#FFFFFF;
text-indent:4px;
visibility: hidden;
}
div#listmenu a:hover ul li, div#listmenu ul li {
elevation:above;
visibility: visible;
}
Buyer/Seller Packet
Buyer/Seller Packet Esp.
Homeshow
Virtual Tours
Logos
Media Kits
Advertising Info
Do Not Call Search
Outgoing Referral
Client Relocation
Blanket Account List
Referral Update
Buyer Registration
Seller Registration
Associate Resources
Forms Manual
Library of Letters
Vendor Directory
Spanish Resources
Independent Contractor Guidlines
Legal Resources
Tax Info
Smart Links
Industry Links
Agent Discounts
Government Agencies
Schools/Education
Ebby Builder Services
Home Team Insurance
Home Team Mortgage
Alumni Group
E-mail
Market
Rappatoni
Ebbyware
Tech Links
[Employee Info]
[Managers]
Where's the top bit? The
Where's the top bit? The doctype, the opening HTML tag, the opening head tag, etc.
i just left that out, do you
i just left that out, do you need it too?
it won't validate without it.
it won't validate without it.
ok heres the whole
ok heres the whole thing.
Left nav 2.0
* th {
padding-left:2px;
}
body {
behavior: url(csshover.htc);
}
#wrapper {
text-align:left;
margin:0px;
width:195px;
border:1px solid #000000;
padding:0px;
background-color:#FFFFCC;
}
#wrapper a {
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
text-align:left;
color: #333333;
text-decoration:none;
}
#wrapper a:hover {
color: #003366;
text-decoration:underline;
}
div#tableb th{
border-bottom:1px solid #000000;
border-right:1px solid #000000;
border-left:0px;
}
div#tableba th{
border-bottom:1px solid #000000;
border-right:1px solid #000000;
border-left:0px;
}
div#tableb2 th{
border-bottom:1px solid #000000;
border-right:1px solid #000000;
border-left:0px;
}
div#tableb3 th{
border-bottom:1px solid #000000;
border-right:1px solid #000000;
border-left:0px;
}
div#tableb4 th{
border-bottom:1px solid #000000;
border-right:1px solid #000000;
border-left:0px;
}
div#tableb5 th{
border-bottom:1px solid #000000;
border-right:1px solid #000000;
border-left:0px;
}
div#tableb6 th{
border-bottom:1px solid #000000;
border-right:1px solid #000000;
border-left:0px;
}
div#tableb7 th{
border-bottom:1px solid #000000;
border-right:1px solid #000000;
border-left:0px;
}
.style1 {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-align:center;
color:#000000;
}
.style2 {
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
text-align:left;
color: #333333;
}
a.style2{
text-decoration:none;
}
.style3 {font-family:Arial, Helvetica, sans-serif;
font-size:10px;
text-align:left;
color: #000000;
text-align:center;
}
div#listmenu li {
float:left;
list-style-type:none;
}
div#listmenu ul {
position:absolute;
list-style: none;
margin-left:120px;
padding: 0;
}
body div#listmenu ul li {
width:100%;
border-left:1px solid #000000;
border-bottom:1px solid #000000;
border-right:1px solid #000000;
border-top:1px solid #000000;
background-color:#FFFFCC;
color:#FFFFFF;
text-indent:4px;
visibility: hidden;
}
div#listmenu a:hover ul li, div#listmenu ul li {
elevation:above;
visibility: visible;
}
Buyer/Seller Packet
Buyer/Seller Packet Esp.
Homeshow
Virtual Tours
Logos
Media Kits
Advertising Info
Do Not Call Search
Outgoing Referral
Client Relocation
Blanket Account List
Referral Update
Buyer Registration
Seller Registration
Associate Resources
Forms Manual
Library of Letters
Vendor Directory
Spanish Resources
Independent Contractor Guidlines
Legal Resources
Tax Info
Smart Links
Industry Links
Agent Discounts
Government Agencies
Schools/Education
Ebby Builder Services
Home Team Insurance
Home Team Mortgage
Alumni Group
E-mail
Market
Rappatoni
Ebbyware
Tech Links
[Employee Info]
[Managers]
For a giant list of links...
For a giant list of links... you really don't need tables.
Just build a ul and style it.
i may sound stupid, but what
i may sound stupid, but what about the images that go to the left in a specific area?
set them as a background of
set them as a background of the li and add a little padding.
ok, thank you to everyone
ok, thank you to everyone for helping me, i will just re-do it into lists.
Keep us posted, there are
Keep us posted, there are gotchas when using lists that you might not know about!
ok, i was able to keep my
ok, i was able to keep my outlining tables and use the ul li to make it work, i appreciate everything.
Glad you got it working
Glad you got it working However you should try and move towards a table-free environment