1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

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