Menu HTML

Discussion in 'HTML & Website Design' started by captainron19, Mar 27, 2015.

0
  1. #1
    Working on a website for my neighbor. She found a template that she liked and still in design phase but I used the template she liked.

    The menu at the top is pretty simple but I do it with a php include so that I can easily edit the one file if the menu ever changes.

    She informed me that she would like one of the menu items (possibly 2) be a drop down to other choices.

    Can anyone provide any insight on a code or script I can impliment into the current menu to make one of them be a drop down for 2 other choices?

    Right now the menu has it formatting (hover, background etc) via css

    A test page I have loaded is at http://www.gofamilyfit.com/programs.php
     
    captainron19, Mar 27, 2015 IP
  2. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #2
    Just do a normal CSS-hover menu? (Hover over the element in the actual menu, show a secondary element (or more)) Something like this:
    
<!DOCTYPE html>
<html>
   <head>
     <title>Test</title>
     <style type="text/css">
       #menu {
         list-style-type: none;
       }
       #menu > li {
         float: left;
         margin-right: 10px;
       }
       li ul li {
         display: none;
       }
       li:hover ul li {
        display: block;
       }
     </style>
   </head>
   <body>
     <ul id="menu">
      <li>Topmenu-element</li>
      <li>Topmenu-element</li>
      <li>Topmenu-element</li>
      <li>Topmenu-element
      <ul>
      <li>Second element</li>
      <li>Third element</li>
      </ul>
      </li>
     </ul>
   </body>
</html>
    Code (markup):
    That's a VERY simple example
     
    PoPSiCLe, Mar 27, 2015 IP
  3. captainron19

    captainron19 Active Member

    Messages:
    49
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    93
    #3
    Is there a way i render what you showed in my current CSS so I do not lose the look of the current menu.

    Here is the code in my current CSS for the menu items 

    #header > ul {
    background: #16a149;
    height: 49px;
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 900px;
}
#header > ul > li {
    float: left;
    position: relative;
    width: 150px;
}
#header > ul > li > a {
    color: #f0f2c9;
    display: block;
    letter-spacing: 0.1em;
    line-height: 49px;
    text-align: center;
    text-decoration: none;
}
#header > ul > li.current > a,
#header > ul > li.current > a:hover,
#header ul li ul li.current a,
#header ul li ul li.current a:hover {
    background: #96b285;
    color: #356618;
}
#header ul li a:hover {
    background: #daead0;
    color: #1b330c;
}
#header ul li ul {
    list-style: none;
    left: -99999px;
    margin: 0;
    overflow: visible;
    padding: 11px 0 0;
    position: absolute;
    top: 49px;
    width: 150px;
    z-index: 2;
}
#header ul li:hover ul {
    left: 0;
    top: 49px;
}
#header ul li ul li {
    background: #4B4B4B;
}
#header ul li ul li a {
    color: #f0f2c9;
    display: block;
    line-height: 31px;
    text-align: center;
    text-decoration: none;
}
    Code (markup):
     
    captainron19, Mar 27, 2015 IP