Problems with css menu options

[CT66KG]

Hello,
I use css for the menu selection options with top menu and sub menus below some of these. It has worked perfectly for years, but now it unfolds the menu so that all menus are one below the other and takes up a lot of space and does not look right. Below is the section of the html relating to the menus.

Could it be related to unsecured pages and if so, how would I overcome that?

<!-- Start css3menu.com BODY section -->
<ul>
<ul id="css3menu0" class="topmenu">
<li class="topfirst"><a href="#" style="width: 130px; height: 15px; line-height: 15px;"><span>About</span></a>
<ul style="width: 145px;">
<li><a href="profile.html">Profile </a></li>
<li><a href="resume.html"> CV </a></li>
</ul>
</li>
<li class="topmenu"><a href="#" style="width: 130px; height: 15px; line-height: 15px;"><span>Work</span></a>
<ul style="width: 145px;">
<li><a href="objects.html"> Objects</a></li>
<li><a href="prints.html"> Prints</a></li>
<li><a href="wallworks.html"> Wall Works</a></li>
<li><a href="process.html"> Process</a></li>
</ul>
</li>
<li class="topmenu"><a href="news.html" style="width: 130px; height: 15px; line-height: 15px;">News</a></li>
<li class="topmenu"><a href="#" style="width: 130px; height: 15px; line-height: 15px;"><span>Projects</span></a>
<ul style="width: 145px;">
<li><a href="glass.html"> Field of Glass</a></li>
<li><a href="ice.html"> Ice</a></li>
<li><a href="iceland.html"> Iceland</a></li>
</ul>
</li>
<li class="toplast"><a href="contact.html" style="width: 130px; height: 15px; line-height: 15px;">Contact</a></li>
</ul>
<p class="_css3m"><a href="http://css3menu.com/">Creating CSS
Menu Css3Menu.com</a></p>
<!-- End css3menu.com BODY section -->

Does anyone please have any ideas or suggestions?
Regards,
Chris

 

[c1lonewolf]

The first two lines place two ul's together. Meaning your missing an li start tag. Plus you need to get rid of all that global styling garbage and place the info in the stylesheet properly. not sure what all the topfirst and toplast classes do except maybe making spacing adjustments but you should be able to use something like
ul.topmenu li:first
ul.topmenu li:last

you really need to rename things so they're not so confusing since you also have li tags using the topmenu class

 

[c1lonewolf]

I realize you posted this just to market your lil' app but here,

   <style>
   ul.css3cascademenu {}
   ul.css3cascademenu li:first {}
   ul.css3cascademenu li:last {}
   ul.css3cascademenu a {
      width: 130px;
      height: 15px;
      line-height: 15px;
      }
   ul.css3cascademenu .level1 {
     width: 145px;
     }
   ul.css3cascademenu .level1 a {}
   </style>
  
<!-- Start css3menu.com BODY section -->
<ul id="main_menu" class="css3cascademenu">
  <li><a href="#"><span>About</span></a>
    <ul class="level1">
      <li><a href="profile.html">Profile </a></li>
      <li><a href="resume.html"> CV </a></li>
    </ul>
  </li>
  <li><a href="#"><span>Work</span></a>
    <ul class="level1">
      <li><a href="objects.html"> Objects</a></li>
      <li><a href="prints.html"> Prints</a></li>
      <li><a href="wallworks.html"> Wall Works</a></li>
      <li><a href="process.html"> Process</a></li>
    </ul>
  </li>
  <li><a href="news.html">News</a></li>
  <li><a href="#"><span>Projects</span></a>
    <ul class="level1">
      <li><a href="glass.html"> Field of Glass</a></li>
      <li><a href="ice.html"> Ice</a></li>
      <li><a href="iceland.html"> Iceland</a></li>
    </ul>
  </li>
  <li><a href="contact.html">Contact</a></li>
</ul>
<!-- End css3menu.com BODY section -->

1. The "style" attribute should have never been implemented for just this reason, it's a transitional attribute. It was supposedly implemented to help people transition from HTML layout and design attributes to to using css. Meaning once you actually learned css you would do away with using the "style" attribute in order to create cleaner formatting. Obviously it didn't work.

2. The unique identifier (id attribute) has an actual purpose and it's not marketing your lil' app! It was created for people with disabilities! UAs designed specifically to meet their needs, not javascript play perty's or page design using css. It identifies a specific location, starting point, within the document where one or more document structures may exist, like multiple lists, citations, content headings (on the same level), etc. It gives them a location to access a specific potion of information within the overall docuement, instead their UA having to read the entire document again. Which is why using abbreviated ids or halfwit identifiers only ticks people with disabilities off.

My suggestion would be to let the app users create their own id's for the menu.