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.

Positioning of sub menu items on mouse over

Discussion in 'CSS' started by SSC, Nov 3, 2015.

  1. #1
    Hi guys,

    I am working on this site and have managed to take care of everything except this ...
    SEMrush
    When hovering over one of the categories in navigation menu, example; Exterior > RV Vents, the sub-sub menu that appears is not inline.
    It shows at the top, should be in line with the sub. Screenshot
     
    SSC, Nov 3, 2015 IP
    SEMrush
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,489
    Likes Received:
    366
    Best Answers:
    28
    Trophy Points:
    335
    #2
    Let's start at the beginning: If javascript is disabled, your nav menu is broken. That means your site is broken. A dropdown menu, as you're using does not require javascript. It is doable with css.

    For example:
    
    <!DOCTYPE HTML>
    <html>
      <head>
      <meta http-equiv="Content-Type"
      content="text/html; charset=utf-8">
     
      <meta name="viewport"
      content="width=device-width;
          height=device-height;
          initial-scale=1">
    
      <title>
      Test document
      </title>
     
      <style type="text/css">
      /*<![CDATA[*/
    
      body {
      background-color: white;
      color: black;
      font: 100%/1.5 sans-serif;
      margin: 0;
      padding: 1.5em;}
    
      p {
      font-size: 1em;}
    
      /*  remove the default indent  */
      ul#top-menu,
      ul#top-menu ul {
       padding: 0;}
    
      ul#top-menu {
       list-style: none;
       text-align: center;}
    
      ul#top-menu li {
       border: 1px solid black;
       display: inline-block;
       padding: 0 1.5em;
         position: relative;
       text-align: left;}
     
      ul#top-menu li > ul {
       display: none;
       list-style: none;
       position: absolute;
       text-align: left;
       width: 100%;}
     
      ul#top-menu li:hover > ul {
       display: block;
       left: 0;
       top: 100%;}
    
      ul#top-menu li ul li > ul {
       display: none;}
    
      ul#top-menu li ul li:hover > ul {
       display: block;
       left: 100%;
       top: 0;}
     
      /*]]>*/
      </style>
      </head>
      <body>
      <ul id="top-menu">
      <li>
       ...
      </li>
    
      <li>
       ...
      </li>
    
      <li>
       Exterior ...
       <ul>
        <li>
        ...
        </li>
    
        <li>
        RV Vents...
        <ul>
        <li>
         ...
        </li>
       
        <li>
         Gilded...
        </li>
       
        <li>
         ...
        </li>
        </ul>
    
        </li>
    
        <li>
        ...
        </li>
       </ul>
      </li>
    
      <li>
       ...
      </li>
      </ul>
      </body>
    </html>
    Code (markup):
    cheers,

    gary

    ;;;; I hate this effing reply editor. It doesn't maintain my formatting in the code block. WTF isn't it pre-format and mono width font? Stupid! ~gt
     
    kk5st, Nov 3, 2015 IP