#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2014
    Posts
    5
    Rep Power
    0

    Broken Dropdown Menu


    I used some tutorials to do a drop down menu exclusively in css. It worked in dreamweaver but when implemented live, the submenu categories all display. What do I need to fix so that they remain hidden except when there is a hover

    Code:
    #navbar {
    	width: 960px;
    	border-bottom: 1px solid #ccc;
    	padding: 10 10 10 10;
    	}
    
    #dropdown {
    	width: 960px;
    	margin: 0;
    	padding: 0;
    	height: 1em;
    	text-transform: uppercase;
    	text-align: center;
    	font-weight: bold;
    	}
    
    #dropdown li {
    	list-style: none;
    	float: left;
    	}
    
    #dropdown li a {
    	display: block;
    	padding: 3px 8px;
    	text-decoration: none;
    	}
    
    #dropdown li ul {
    	display: none; 
    	width: 10em; /* Width to help Opera out */
    	background-color: #fff;
    	}
    	
    #dropdown li:hover ul, #navbar li.hover ul {
    	display: block;
    	position: absolute;
    	margin: 0;
    	padding: 0;
    	border-bottom: 1px solid #ccc;
    	}
    
    #dropdown li:hover li, #navbar li.hover li {
    	float: none;
    	}
    
    #dropdown li:hover li a, #navbar li.hover li a {
    	background-color: #fff;
    	color: #000;
    	}
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2014
    Posts
    36
    Rep Power
    1
    #dropdown li:hover ul, #navbar li.hover ul {

    display: block;
    position: absolute;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #ccc;

    }


    I would look into this. I don't see why this would be set. And if that doesn't help, I would also look into the float usage.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2014
    Posts
    5
    Rep Power
    0
    The absolute display is keeping the hover displaying over page content rather than push the content down when they open.
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2013
    Posts
    6
    Rep Power
    0
    Originally Posted by lora
    I used some tutorials to do a drop down menu exclusively in css. It worked in dreamweaver but when implemented live, the submenu categories all display. What do I need to fix so that they remain hidden except when there is a hover

    Code:
    #navbar {
    	width: 960px;
    	border-bottom: 1px solid #ccc;
    	padding: 10 10 10 10;
    	}
    
    #dropdown {
    	width: 960px;
    	margin: 0;
    	padding: 0;
    	height: 1em;
    	text-transform: uppercase;
    	text-align: center;
    	font-weight: bold;
    	}
    
    #dropdown li {
    	list-style: none;
    	float: left;
    	}
    
    #dropdown li a {
    	display: block;
    	padding: 3px 8px;
    	text-decoration: none;
    	}
    
    #dropdown li ul {
    	display: none; 
    	width: 10em; /* Width to help Opera out */
    	background-color: #fff;
    	}
    	
    #dropdown li:hover ul, #navbar li.hover ul {
    	display: block;
    	position: absolute;
    	margin: 0;
    	padding: 0;
    	border-bottom: 1px solid #ccc;
    	}
    
    #dropdown li:hover li, #navbar li.hover li {
    	float: none;
    	}
    
    #dropdown li:hover li a, #navbar li.hover li a {
    	background-color: #fff;
    	color: #000;
    	}
    You need to change this css to your css.
    Code:
    #dropdown li ul {
    	display: none; 
    	width: 10em; /* Width to help Opera out */
    	background-color: #fff;
    	visibility:hidden;
    	}
    	
    #dropdown li:hover ul, #navbar li.hover ul {
    	display: block;
    	position: absolute;
    	margin: 0;
    	padding: 0;
    	border-bottom: 1px solid #ccc;
    	visibility:visible;
    	}
    My HTML code is
    Code:
    <div id="navbar">
                 <div id="dropdown">
                  <ul>
                    <li><a href="">Home</a></li>
                    <li><a href="">About</a></li>
                    <li><a href="">Contact</a></li>
                    <li id="dropdown_menu">
                       <a href="">Dropdown</a>
                           <ul>
                             <li><a href="">list1</a></li>
                             <li><a href="">list2</a></li>
                           </ul>
                    </li>
                  </ul>
                </div>
              </div>
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2014
    Posts
    5
    Rep Power
    0
    It works now thanks! I added a child layer and I'm trying to get the submenus to drop down in columns. I seem to have done something wrong as it is only showing 1 submenu per drop down when there are two.

    HTML:
    Code:
    <div id="navbar">
    <div id="dropdown">
    <ul>
      <li class="topnav">MENU
        <ul>
          <li>SUBMENU 1
            <ul class="column">
              <li>CHILD</li>
              <li>CHILD</li>
              <li>CHILD</li>
            </ul>
          </li>
          <li>SUBMENU 2
            <ul class="column">
              <li>CHILD</li>
              <li>CHILD</li>
              <li>CHILD<br>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
    <ul>
      <li>MENU 2
        <ul>
          <li>SUBMENU 1
            <ul>
              <li>CHILD</li>
              <li>CHILD</li>
              <li>CHILD</li>
            </ul>
          </li>
          <li>SUBMENU 2
            <ul>
              <li>CHILD</li>
              <li>CHILD</li>
              <li>CHILD<br>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
    </div>
    </div>
    CSS:
    Code:
    #dropdown {
    	width: 960px;
    	margin: 0 auto;
    	padding: 0;
    	height: 1em;
    	text-transform: uppercase;
    	text-align: center;
    	font-weight: bold;
    	}
    
    #dropdown li {
    	list-style: none;
    	float: left;
    	}
    
    #dropdown li a {
    	display: block;
    	padding: 3px 8px;
    	text-decoration: none;
    	}
    
    #dropdown li ul {
    	display: none; 
    	width: 10em; /* Width to help Opera out */
    	background-color: #fff;
    	visibility:hidden;
    	}
    	
    #dropdown li:hover ul, #navbar li.hover ul {
    	display: block;
    	position: absolute;
    	margin: 0;
    	padding: 0;
    	border-bottom: 1px solid #ccc;
    	visibility:visible;
    	}
    
    #dropdown li:hover li, #navbar li.hover li {
    	float: none;
    	}
    
    #dropdown li:hover li a, #navbar li.hover li a {
    	background-color: #fff;
    	color: #000;
    	}
    
    .topnav a {
    	color: #000;
    	text-decoration: none;
    	}
    
    .topnav a:hover {
    	border-bottom: 1px solid gold;
    	}
    
    .column {
    	display: inline;
    	list-style-type: none;
    	float: left;
    	margin: 5px 0 0 0;
    	padding: 0 5px 0 0;
    	width:240px;
    	}
    
    .column a {
    	color: #999;
    	text-decoration: none;
    	font-size: .7em;
    	}
    
    .column a:hover {
    	border-bottom: 0px;
    	}

IMN logo majestic logo threadwatch logo seochat tools logo