Need help inserting drop down menu.

User 2676159 Photo


Registered User
41 posts

Firstly, to get it covered before anyone suggests it - JS is not an option here!

I have a nice drop-down menu on the pages at http://www.dlit.co.nz. This however is the non-responsive version of the site.

The responsive version, at http://www.dlit.co.nz/h2/try7.php, does not work. I've tried all sorts of tricks to get the drop down menu into place, which is a quite simple CSS/HTML menu borrowed from somehwere (sorry, I can't remember the original source but would be able to find it with some hunting).

I've tried all sorts of things - wraping each menu section in a div, making changes to the css, css inline, css in the header, css in a seperate file. Whatever happens, when I add my own CSS to the files it breaks.

The responsive site makes use of hidden elements to change the menu order among other things as the page size changes. As soon as I add CSS, the hidden bits in the menu become shown (only the hidden bits in the menu, not elsewhere on the page). Also, the <LI> tages become bullets in the RLM version.

Can any one give me some pointers to help me get this working? I am not after a full code, just a keyword or suggestion or few so I can get it going.

[Note : I am using "try7.php" as the the index.php will likely change often and maybe disappear, but if you want to check current progress see dlit.co.nz/h2]

Thanks in advance,
David
david@kiwiscene.kiwi

User 2484360 Photo


Registered User
3,293 posts

This is because your CSS is not within the <head> section.

All the underline bit is out of place. :P Place it in your head section and we can take a look to see if there is something else wrong.

<!DOCTYPE html>
<html><head>
<meta content="text/html; charset=windows-1252" http-equiv="content-type">
<meta name="keywords" content="COMPUTER REPAIR, COMPUTER HARDWARE, VIRUS, MALWARE, UPGRADE, LAPTOP, PC, ANTIVURUS, MICROSOFT, APPLE, MACINTOSH, LINUX, DESKTOP, SOFTWARE, MOUSE, KEYBOARD, INTERNET, NETWORK, ACER, IBM, ASUS, DELL, SONY, SAMSUNG, HP, HEWLETT PACKARD, COMPAQ">
<meta name="description" content="DL IT specialise in all computer hardware and software repair, including viruses. We repair PC and Apple, and sell new or used desktops and laptops."><!-- meta name ="DL IT Solutions specialise in computer software and hardware repair, including cleaning up virus and other malware infections. We also repair all sorts of hardware and software faults. We can provide new and used desktops and laptops. We repair PC and Apple computers. We can provide all your computing needs. We are located in Lower Hutt but can work over the whole Wellington region" --><title>Welcome to DL IT Solutions</title>
<style type="text/css">
.Container2 {
margin-top: 800px;
padding: 60px;
}
#Opening_Fonts {
font-size: xx-large;
}
#new_year_new_start {
font-size: x-large;
}
</style>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Index</title>
<link rel="stylesheet" href="css/coffeegrinder.min.css">
<link rel="stylesheet" href="css/wireframe-theme.min.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/menu.css">
<!--style type="text/css">
.clearboth {
margin: 0;
padding: 0;
clear: both;
}
#nav {
font-family: verdana;
font-weight: bold;
}
#nav ul {
margin: 0;
padding: 0;
list-style: none;
}
#nav a:link,
#nav a:visited {
color: #666666;
text-decoration: none;
}
#nav a {
display: block;
padding: 1px 8px;
}
#nav li {
float: left;
color: #666666;
margin-right: 1px;
position: relative;
}
#nav li2 {
float: left;
background-color: #3333CC;
color: #000000;
margin-right: 1px;
position: relative;
}
#nav li li{
width: 160px;
}
#nav li li2{
width: 160px;
margin-top: 1px;
}
#nav li:hover {
background-color: #ddd2d3;
}
#nav li li:hover {
background-color: #457575;
}
#nav li li2:hover {
background-color: #457575;
}
#nav ul ul {
position: absolute;
visibility: hidden;
}
#nav ul ul ul{
position: absolute;
left: 100%;
top: -2px;
border: solid 1px transparent;
}
#nav li:hover > ul {
visibility: visible;
}
#nav li2:hover > ul {
visibility: visible;
}
.right-arrow {
float: right;
color: #ffffff;
}
</style-->
</head>

<body>

User 2676159 Photo


Registered User
41 posts

Afraid that's not the solution (although I admit it's technically a problem and an oversight on my part - but it still works perfectly in the current main page - a result of multiple files being used to generate one page).

I've tried pullling all my css into one file and having that in the right place. I still have the problem that having my own CSS file in the list un-hides all the hidden text within the menu bar (the menu layout changes in smaller displays, and the change

Have also tried playing with the <LI> tags (and renaming them and the UL tags in the RLM-generated CSS).

I still have the problems - stuff that is supposed to be hidden isn't, <LI> tags show with bullets, and the drop-down menus don't display as they should.

Moving a <div ie="nav"> tag to wrap just one section of the menu gets rid of the problem of the menu titles being un-hidden, but IIRC you can only use a "id" once in a page - I couldn't wrap each segment in that could I? (but what if I make it a "class" instead of an "id"?)

(dlit.co.nz/h2/index.php is roughly up to date, but am starting a h3 folder to play with some other possible ways of fixing this quickly :) )
david@kiwiscene.kiwi

User 187934 Photo


Senior Advisor
20,181 posts

Hi David,
Your page has several errors that are likely the source of the issue.
Get these fixed and it will probably work.:)
http://validator.w3.org/check?uri=http% … mp;group=0
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2676159 Photo


Registered User
41 posts

As an update, have had some success with http://dlit.co.nz/h3/index.php, in that I now have the right bits hidden or showing - some of the time. I see that when I get to the smaller screen sizes, the menu block I've been working on (currently shows as "services2" - named as such because sometimes it will be hidden and sometimes it shows, and it's the second instance of "services" in the code - in case anyone was wondering :) ) is still showing even though it shouldn't be.

I still need to turn the nav id into a class, but it looks like it might work if I wrap each of the sub-menus with that.

However, I still have a couple of severe problems with the layout. One is that the bottom "rule" line is being spaced based on the size of the hidden drop down menu, NOT on the size of the menu bar without the drop-downs, and the sub-menus that should show off to the side of the drop downs aren't in the right place, although that could be a function of the area they're working with (it shouldn't be - they should show above whatever other restrictions there are - as said, on our current page it works perfectly and this is (well, was) exact;y the same code!)

Another menu system would actually be fine with the conditions that it doesn't use JS and that I can keep the basic look of the site without the dropdowns (or "spry" or whatever they're normally called).

While doing some research, I see that I may need to do a few changes to the site to make things work (which are fine), first make more than one menu bar (with some being hidden at various stages),,,

But whatever gets the site working.. (so much for my estimation it'd take maybe another 5-6 hours to get the menu working, and the rest of the PHP code into place :) )
david@kiwiscene.kiwi

User 38401 Photo


Senior Advisor
10,951 posts

I fixed your link in your post, added the http:// to the beginning as it was not a correct link and didn't work.

Other than that it might be me, but when I go to your page the only thing that shows up on anything is the favicon, the rest of the page is pure white and empty for me. I'm on Firefox most current version.
User 2676159 Photo


Registered User
41 posts

Hi Eric,

Eric Rohloff wrote:
Hi David,
Your page has several errors that are likely the source of the issue.
Get these fixed and it will probably work.:)
http://validator.w3.org/check?uri=http% … mp;group=0


Have been through on the new branch (dlit.co.nz/h3/index.php) and have fixed the errors given there. I get a green "valid HTML5" line, but still have a broken page as with my previous message above.. Whereas my "35 errors" original site (which crashes horribly at smaller screen sizes - protect yourself and don't try it! :) ) at least has the menu bar working "perfectly".

Will give up soon for the night - nearly 1am here :) (thank God we open the shop at 10:30am!)

Again, thanks. While it hasn't fixed the main issue, it has shown me a few [cough] places my code needed some work, and a few things (like a stray /html) may've later broken things badly.
david@kiwiscene.kiwi

User 2676159 Photo


Registered User
41 posts

Jo Ann wrote:
I fixed your link in your post, added the http:// to the beginning as it was not a correct link and didn't work.

Other than that it might be me, but when I go to your page the only thing that shows up on anything is the favicon, the rest of the page is pure white and empty for me. I'm on Firefox most current version.


It's a timing thing, and a matter of working with a semi-live site.. And a "feature" of something in my sync-software, or that the local copy of the site is on a Windows partition, or something.. But when I save a page locally it gets transferred to the server over "cloud" software, and somewhere in the chain the access permissions get broken. I have to remember to change them on the server.

What's probably happened is you've tried to view the page in between some of these changes. Just a case of my being to slow to correct things after a save, and too busy/lazy to find out what causes the problem and to fix it :)
david@kiwiscene.kiwi

User 38401 Photo


Senior Advisor
10,951 posts

ok it worked for me this time, fun stuff lol. Anyways you still have one error on there that is a structural error and can/will cause issues with your list and other functions if it's not corrected. Basically you need to remove the 2 in the tag below:

Line 164, Column 25: Element li2 not allowed as child of element div in this context. (Suppressing further errors from this subtree.)

<div id="nav"> <li2> <a class="link-text text-link-2b" href="services.php…

There is no such a tag that exists so I'll assume it's just a typo, but if not then you might want to take a look at the allowed element tags so you are more familiar with what is and isn't considered an element. Hope that helps some too. :)
User 2676159 Photo


Registered User
41 posts

Jo Ann wrote:
ok it worked for me this time, fun stuff lol. Anyways you still have one error on there that is a structural error and can/will cause issues with your list and other functions if it's not corrected. Basically you need to remove the 2 in the tag below:


Yeah. I do sometimes forget to make sure access permissions are correct. One of these days I'll find the time to get in and deal with the issue outright :)


<div id="nav"> <li2> <a class="link-text text-link-2b" href="services.php…
There is no such a tag that exists so I'll assume it's just a typo, but if not then you might want to take a look at the allowed element tags so you are more familiar with what is and isn't considered an element. Hope that helps some too. :)


"LI2" is a tag defined in the CSS. In the dlit.co.nz pages it works perfectly fine, and does what it should. If I swap it for a "li" tag I get a bullet point instead of the menu that's supposed to be there. I assume that the CSS from RLM is over-riding the menu CSS (or possibly setting something that isn't changed by the menu CSS), however I've tried renaming/removing all the LI and UL code from the RLM-generated CSS and I still get that bullet rather than the hidden-until-mouse-over menu.

Which is where the problem is, if I use "li" it's modified somewhere and doesn't work. If I create my own LI I get somewhere but now have the space problem.

I may have to find another way to do the menu. I see the CC site has something that could do the job, might have to trawl through that code when I can find time and see what I can use :)

Thanks,
David
david@kiwiscene.kiwi


Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.